网页讲解01

最新推荐文章于 2022-02-16 10:15:28 发布

weixin_34144450

最新推荐文章于 2022-02-16 10:15:28 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/qq3111901846/p/6422968.html

版权

网页讲解01

第一章：div + css

1.
    <!> <html xmlns="http://www.w3.org/1999/xhtml">

   什么是网页声明：告知浏览器我采用什么规范写网页 xmlns htmls html

2.网页的定位

   相对定位：relative 自己原来的位置，原来的位置不消失浮动居中连用

   绝对定位：absolute 相对于距离自己最近的有position属性的祖宗节点（如果不存在这样的祖宗节点，相对于可视区域（静态））

   固定定位：fixed 浏览器（动态）可视区域，就是可以看到的区域，滚动条，广告，不动的地方等，原来的位置消失不能和浮动联用


   定位里面属性 left right bottom top 可正，可负百分比
              z-index

   对于普通的盒子（div）用：   margin: 0px auto;就可以居中了 margin-left 属性设置元素的左外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局01</title>
    <style type="text/css">
        .chb{
                width: 600px;
                height: 300px;
                position: fixed; //定位
                left: 50%;
                top:10px;
                margin-left: -300px; //设置元素的左外边距
                background-color: yellow;
             }
        .chb1{width: 1000px;
                height: 2000px;
                background-color: black;
                margin: 0px auto;
        }
    </style>
</head>
<body>
    <div class="chb1"></div>
    <div class="chb"></div>

</body>
</html>