布局设计

标签：==   自适应   pos   red   banner   png   单行   class   content   

1，全部都是占满行。

2，使用百分比定义宽度，width:100%;  或者max-width:1200px;  min-width:800px;

3，块级元素添加margin:0 auto; 左右自适应宽度居中。   

4， height=line-height;   text-align:center;   块级元素单行水平居中

1，宽度固定

2，使用百分比定义宽度，width:100%;  或者max-width:1200px;  min-width:800px;

3，   .navigator{width:100%; height:50px;  position:fixed;  top:0px;}  //使用了fixed相对视口定位不动，脱离文档流。后面的banner会晚上跑，被导航遮住50px;

　　  .banner{margin-top:-50px;} //被导航遮住50px;  使用margin-top:-50px; 往下移动50px;，不会被遮住。

　　这里可以使用position:sticky; top:0px; 这是新属性，兼容性不好，所以可以使用上述fixed 代替，写在.nav中。
<div class="navgator">   固定导航栏，不随滚动条滚动而滚动 </div>

<div class="banner">  广告栏 </div>

如下代码：

.nav{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #333;
            color: #fff;
            margin: 0 auto;
            position: fixed;
            top: 0px;
        }
        .banner{
            width: 1200px;
            height: 300px;
            background: green;
          /*   line-height: 300px;
          text-align: center; */
            color: red;
            margin: 0 auto;
            margin-top: 50px;
        }

    <div class="nav">导航栏</div>
    <div class="banner">banner栏</div>
    <div class="content">内容</div>
    <div class="footer">footer</div>

 ========================

布局设计

标签：==   自适应   pos   red   banner   png   单行   class   content   

原文地址：https://www.cnblogs.com/Knowledge-is-infinite/p/10661387.html