设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 0 5 - 优化内容区设置
123
返回列表 发新帖
楼主: 不二如是

[庖丁解牛] 0 0 0 5 - 优化内容区设置

[复制链接]
星海雪的钟爱
发表于 2019-2-20 15:19:06 | 显示全部楼层
交作业，container的父元素body定位不能为relative,否则container的top属性不起作用。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>第四、五节：页面美化，优化</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         html{
  14.             height: 100%;
  15.             color: #d81d1d;
  16.         }
  17.         /* body元素的heigt不能设置为100%，设置后，背景图会有重复
  18.          * 原因：浏览器似乎会给body加了一个margin:8，body元素的height实际会比html的高度值小
  19.          * 处理：方式1：清除margin值；使用*{margin:0}初始化
  20.          *      方式2：让body继承html的高度
  21.          */

  23.         body{
  24.             background: url("../images/bg.jpg") center center;
  25.             /* 设置网页的背景图片，并水平垂直居中 */
  26.             background-size: cover;
  27.             /* 设置背景图模式为cover */

  29.             /* position: relative; */
  30.             /* body元素position不能设置relative,否则container的top属性不起作用 */
  31.         }

  33.         #container{
  34.             width: 100%;
  35.             text-align: center;
  36.             position: absolute;
  37.             /* 设置垂直居中 */
  38.             top: 50%;
  39.             transform: translateY(-50%);
  40.             /* 垂直上移50%的高度 */
  41.         }

  43.     </style>
  44. </head>
  45. <body>
  46.     <div id="container">
  47.         <h1>我爱鱼C</h1>
  48.         <p>fishc.com.cn-让编程改变世界</p>
  49.         <a href="http://fishc.com.cn">传送门</a>
  50.     </div>
  51. </body>
  52. </html>
复制代码
005.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

phszhuli
发表于 2019-3-25 16:53:14 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">/*指定CSS的样式定义*/
  7.                 body{
  8.                         background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
  9.                         background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
  10.                         margin: 0;
  11.                         padding: 0;/*潜规则，提高自主控制*/
  12.                         position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

  14.                 }
  15.                
  16.                 html,body{
  17.                         height: 100%; /* height如果不设置100%，就会出现重复
  18.                 */
  19.                         color: #ffffff
  20.                 }
  21.                 #container{
  22.                         width: 100%;
  23.                         text-align: center;/*文字居中*/
  24.                         position: absolute;/*绝对定位*/
  25.                         top: 50%;
  26.                         transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
  27.                 }
  28.         </style>
  29. </head>
  30. <body>
  31.         <div id="container"><!--div封装，id区块说明-->
  32. <h1>我爱鱼C</h1>
  33. <p>WWW.FishC.com - 让编程改变世界</p>
  34. <a >传送门</a>
  35. </div>
  36. </body>
  37. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

萌·小杨
发表于 2019-5-26 18:50:43 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>看什么看</title>
  6.                 <style type="text/css">
  7.                         html {
  8.                                 height: 100%;
  9.                                 color: #00ff00;
  10.                                 margin:0;
  11.                                 padding:0;
  12.                                 position: relative;
  13.                         }
  14.                         body {
  15.                                 background: url("bg.jpg") center center;
  16.                                 background-size: cover;
  17.                         }
  18.                         #container {
  19.                                 width: 100%;
  20.                                 text-align: center;
  21.                                 position:absolute;
  22.                                 top:50%;
  23.                                 transform:translateY(-50%);
  24.                         }
  25.                 </style>
  26.         </head>
  27.         <body>
  28.                 <div id="container">
  29.                         <h1>老子哎FishC</h1>
  30.                         <p>草泥马</p>
  31.                         <a href="http://fishc.com.cn">传送！</a>
  32.                 </div>
  33.         </body>
  34. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-5 22:04:35 | 显示全部楼层

homework

homework
作业
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-5 22:11:32 | 显示全部楼层
EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中

body设置position为relative后会使其高度height变为0px；不再继承html的height
absolute是相对于第一个不是static的父元素进行定位的，so本例中他的%高度是相较于body的0px的
解决办法

增加 body{height：100%}
或者删除body的positon：relative 此时的containers会相较于根元素html的位置和height进行布局
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-5 22:19:27 | 显示全部楼层
MSK 发表于 2017-7-5 09:48
我的直接无法居中，还是麻烦不二看看

那个id的名字跟css的不对照 导致样式不能识别
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-5 22:26:32 | 显示全部楼层
嘟嘟！ 发表于 2017-8-6 19:37
为什么要设置区块宽度为100%，横向撑满屏幕呢？感觉没啥区别

通常情况下块状元素是占满整个一行的也就默认width：100%
但是如果给元素加了绝对定位 ，该元素的宽度就具有了包裹性，width与元素的最大宽度相关，并不是100%，所以需要用到水平居中特性时需要将width设为100%
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Cloud1258
发表于 2019-8-20 23:49:01 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到html的世界</title>
  6.         <style type="text/css">
  7.              html,body{
  8.                  height: 100%;
  9.                  color: #ffffff;
  10.              }
  11.              body{
  12.                  background: url(link.jpg) center center;
  13.                  background-size: cover;
  14.                  margin: 0;
  15.                  padding:0;
  16.                  position: relative;
  17.              }
  18.              #container{
  19.                  width: 100%;
  20.                  text-align: center;
  21.                  position: absolute;
  22.                  top:50%;
  23.                  transform: translateY(-50%);
  24.              }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div id="container">
  29.             <h1>我爱编程</h1>
  30.             <p>编程能静心</p>
  31.             <a href="https://cn.bing.com">必应</a>
  32.         </div>
  33.     </body>
  34. </html>
复制代码

屏幕快照 2019-08-20 23.44.55.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ricia
发表于 2020-2-21 16:46:04 | 显示全部楼层
EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中

在css里面应该这样注释/* position: relative; */ ，不过写成<!-- position: relative; -->好像也不生效了
   html{
         height: 100%;
         color: #FFFFFF;
       }  
要设置body的position为relative，上面的html后面应该加上  ,body
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ricia
发表于 2020-2-21 16:53:53 | 显示全部楼层
background: url("../img/ilovefishc.jpg") center center; 和 background-image: url("../img/ilovefishc.jpg"); 有什么区别呀！后面这段代码加center后就无法显示背景图了。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

huanghuiyv
发表于 2020-8-15 16:00:26 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>TEST! TEST!!</title>
  6.         <style type="text/css">

  8.             html {
  9.                 height: 100%;
  10.             }

  12.             body {
  13.                 margin: 0;
  14.                 padding: 0;
  15.                 /* position: relative; */
  16.                 background: url([img]https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg[/img]) center center;
  17.                 background-size: cover;
  18.             }

  20.             #container {
  21.                 width: 100%;
  22.                 text-align: center;
  23.                 position: absolute;
  24.                 top:50%;
  25.                 transform: translateY(-50%);
  26.             }

  28.             h1 {
  29.                 color: pink;
  30.             }

  32.             p {
  33.                 color: honeydew;
  34.             }
  35.         </style>
  36.     </head>

  38.     <body>
  39.         <div id="container">
  40.             <h1>我爱鱼C</h1>
  41.             <p>让编程改变世界!</p>
  42.             <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  43.         </div>
  44.     </body>
  45. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

123
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-8 20:11

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表