0 0 0 5 - 优化内容区设置,Web密训营,Web开发,鱼C论坛

星海雪的钟爱 发表于 2019-2-20 15:19:06

交作业，container的父元素body定位不能为relative,否则container的top属性不起作用。

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

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

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

   #container{
         width: 100%;
         text-align: center;
         position: absolute;
         /* 设置垂直居中 */
         top: 50%;
         transform: translateY(-50%);
         /* 垂直上移50%的高度 */
   }

</style>
</head>
<body>
<div id="container">
   <h1>我爱鱼C</h1>
   <p>fishc.com.cn-让编程改变世界</p>
   <a href="http://fishc.com.cn">传送门</a>
</div>
</body>
</html>

phszhuli 发表于 2019-3-25 16:53:14

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

}

html,body{
height: 100%; /* height如果不设置100%，就会出现重复
*/
color: #ffffff
}
#container{
width: 100%;
text-align: center;/*文字居中*/
position: absolute;/*绝对定位*/
top: 50%;
transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

萌·小杨 发表于 2019-5-26 18:50:43

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>看什么看</title>
<style type="text/css">
html {
height: 100%;
color: #00ff00;
margin:0;
padding:0;
position: relative;
}
body {
background: url("bg.jpg") center center;
background-size: cover;
}
#container {
width: 100%;
text-align: center;
position:absolute;
top:50%;
transform:translateY(-50%);
}
</style>
</head>
<body>
<div id="container">
<h1>老子哎FishC</h1>
<p>草泥马</p>
<a href="http://fishc.com.cn">传送！</a>
</div>
</body>
</html>

fangfangfengfei 发表于 2019-6-5 22:04:35

作业

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进行布局

fangfangfengfei 发表于 2019-6-5 22:19:27

MSK 发表于 2017-7-5 09:48
我的直接无法居中，还是麻烦不二看看

那个id的名字跟css的不对照导致样式不能识别

fangfangfengfei 发表于 2019-6-5 22:26:32

嘟嘟！发表于 2017-8-6 19:37
为什么要设置区块宽度为100%，横向撑满屏幕呢？感觉没啥区别

通常情况下块状元素是占满整个一行的也就默认width：100%
但是如果给元素加了绝对定位，该元素的宽度就具有了包裹性，width与元素的最大宽度相关，并不是100%，所以需要用到水平居中特性时需要将width设为100%

Cloud1258 发表于 2019-8-20 23:49:01

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>欢迎来到html的世界</title>
   <style type="text/css">
         html,body{
            height: 100%;
            color: #ffffff;
         }
         body{
            background: url(link.jpg) center center;
            background-size: cover;
            margin: 0;
            padding:0;
            position: relative;
         }
         #container{
            width: 100%;
            text-align: center;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
         }
   </style>
</head>
<body>
   <div id="container">
         <h1>我爱编程</h1>
         <p>编程能静心</p>
         <a href="https://cn.bing.com">必应</a>
   </div>
</body>
</html>

ricia 发表于 2020-2-21 16:46:04

EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中

在css里面应该这样注释/* position: relative; */ ，不过写成好像也不生效了
html{
      height: 100%;
      color: #FFFFFF;
   }
要设置body的position为relative，上面的html后面应该加上,body

ricia 发表于 2020-2-21 16:53:53

background: url("../img/ilovefishc.jpg") center center; 和 background-image: url("../img/ilovefishc.jpg"); 有什么区别呀！后面这段代码加center后就无法显示背景图了。

huanghuiyv 发表于 2020-8-15 16:00:26

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>TEST! TEST!!</title>
   <style type="text/css">

         html {
            height: 100%;
         }

         body {
            margin: 0;
            padding: 0;
            /* position: relative; */
            background: url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg) center center;
            background-size: cover;
         }

         #container {
            width: 100%;
            text-align: center;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
         }

         h1 {
            color: pink;
         }

         p {
            color: honeydew;
         }
   </style>
</head>

<body>
   <div id="container">
         <h1>我爱鱼C</h1>
         <p>让编程改变世界!</p>
         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
   </div>
</body>
</html>

页: 1 2 [3]

鱼C论坛's Archiver