CSS经典布局

skt_faker麻瓜
180 阅读3分钟

css 经典布局

1、页面结构

页头：header导航：nav
页面主体: main侧栏：sidebar
叶尾：footer栏目：column
内容: content/container页面外围控制：wrapper
容器：container左、右、中：left,right,center

2、导航

导航：nav左导航：leftsidebar
主导航：mainnav右导航：rightsidebar
子导航：subnav菜单：menu
顶导航：topnav子菜单：submenu
边导航：sidebar标题：title
摘要：summary

3、功能

标志：logo注册：register
广告：banner搜索：search
登陆：login功能区：shop
登陆条：loginbar标题：title

二、经典布局

行布局

1、基础行布局

1.1、基础行布局居中样式 使用相对定位

<style>
    
    body {
        padding: 0;
        margin: 0;
        color:#fff;
        text-align: center;
    }
    
    
    .container {
        width:800px;
        height:200px;
        background: aqua;
        position: absolute;
        left: 50%;
		top: 50%;
        margin-left: -400px;
        margin-top: -100px;
    }
</style>

<div class="container"></div>

2、经典列布局

2.1、2列布局

<style>
  		*{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        
        .container{
           width:90%;
           height: 500px;
           margin:0 auto;
        }
        
        .left{
            float: left;
            width:60%;
            height: 500px;
            background:blue;
        }
        
        .right{
            float:right;
            width:40%;
            height: 500px;
            background:green;
        }

</style>



<div class="container">
    <div class="left">
        这是左侧布局
    </div>
    <div class="right">
        这是右侧布局
    </div>
</div>

2.2、3列布局

2.2.1、固定宽度布局
<div class="layout">
    <div class="left">
        页面左侧
    </div>
    
    <div class="content">
        这是内容
    </div>
    <div class="right">
		这是页面的右侧        
    </div>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
        color: #fff;
    }
    
    .layout {
        width:1000px;
        height: 1000px;
        text-align: center;
    }
    
    .left{
        float:left;
        width:100px;
        height:1000px;
        background: blue;
    }
    .content {
        float:left;
        width:800px;
        height: 1000px;
        background:yellow;
    }
    
    
    .right{
        float:right;
        width: 100px;
        height: 1000px;
        background: green;
    }
    
    

</style>
2.2.2 、百分比布局
<div class="layout">
    <div class="left">
        页面左侧
    </div>
    
    <div class="content">
        这是内容
    </div>
    <div class="right">
		这是页面的右侧        
    </div>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
        color: #fff;
    }
    
    .layout {
        width:90%;
        height: 1000px;
        text-align: center;
        margin:0 auto;
    }
    
    .left{
        float:left;
        width:10%;
        height:1000px;
        background: blue;
    }
    .content {
        float:left;
        width:80%;
        height: 1000px;
        background:yellow;
    }
    
    
    .right{
        float:right;
        width: 10%;
        height: 1000px;
        background: green;
    }
    
    

</style>

3、网页布局

3.1、经典网页布局

<style>
	 *{
        margin: 0;
        padding: 0;
        color: #fff;
    }

    .layout {
        width: 90%;
        height:1000px;
        margin:0 auto;
        text-align: center;
    }

    .header{
        width:100%;
        height:100px;
        background-color: #333;
        float: left;
    }

    .container {
        width: 100%;
        height: 800px;
    }

    .nav {
        width: 20%;
        height: 800px;
        background-color: tan;
        float: left;
    }

    .content {
        float: right;
        width: 80%;
        height: 800px;
        background-color: tomato;
    }

    .footer {
        clear:both;
        width:100%;
        height: 100px;
        background-color: green;
    }

</style>

<div class="layout">
    <div class="header">
        头部
    </div>
    <div class="container">
        <div class="nav">
            
        </div>
        <div class="content">
            
        </div>
    </div>
    <div class="footer">
        尾部
    </div>
</div>

3.2、圣杯布局

<div class="layout">
	<div class="header">
        header
    </div>    
	<div class="container">
		<div class="middle">
            <h4>middle</h4>
            <p>
                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
                                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
                                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
                                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
            </p>
        </div> 
        <div class="left">
            <h4>
                left
            </h4>
            <p>
                这是页面左侧内容
            </p>
        </div>
        <div class="right">
            <h4>
                right
            </h4>
            <p>
                这是页面右侧内容
            </p>
        </div>
    </div>
    
    <div class="footer">
        footer
    </div>
</div>

<style>
     *{padding: 0; margin: 0; color: #fff;}
      body{min-width: 700px;}
      .header,.footer {
        background-color: #ddd;
        float: left;
        width:100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }

      .container {
        padding: 0 220px 0 200px;
      }

      .middle,.left,.right {
        position:relative;
        float: left;
        min-height: 300px;
      }
      .middle {
        width: 100%;
        background-color: green;
      }
    
      .left{
        width:200px;
        background-color: goldenrod;
        margin-left: -100%;
        left: -200px;
      }	
    
      .right {
        width:220px;
        background-color: violet;
        margin-left: -220px;
      }

</style>
  • 圣杯布局： padding:0 220px 0 200px 定义左边宽度，右边宽度， 需要使用 position:relative; div.middle 内容在前面，left 在中间，right 在后面,margin-left: -100%, 能移动到最左边， margin-left: -220px 代表右边padding 宽度为220px,right :220px 右边距离220px;

3.3、双飞翼布局

<div class="header">
    header
</div>

<div class="main">
	<div class="main-inner">
        <h4>
            main
        </h4>
        <p>
               内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
                                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
                                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
                                内容内容内容内容内容内容内容内容内容内容内容内容                内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
    </div>    
</div>

<div class="sub">
    <h4>
        sub
    </h4>
    <p>
       左侧内容
    </p>
</div>

<div class="extra">
    <h4>
        extra
    </h4>
    <p>
        右侧内容
    </p>
</div>
<div class="footer">
    footer
</div>


<style>
    *{padding: 0; margin: 0; color: #fff;}
    body{min-width: 700px;}
    .header,.footer {
        background-color: #ddd;
        float: left;
        width:100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        
     }
	  .sub,.main,.extra{
            float: left;
            min-height: 300px;
      }
      
      .main{
        width:100%;
        min-height: 300px;

      }

      .main-inner{
        margin-left: 200px;
        margin-right: 220px;
        background-color: green;
        min-height: 300px;
      }

      
      .sub {
        width: 200px;
        background-color: greenyellow;
        margin-left: -100%;
      }	

      .extra {
        width:220px;
        background-color: aqua;
        margin-left: -220px;
      }

</style>

  • 双飞翼布局： div.main > div.main-inner 需要写在前面，双飞翼布局不需要使用定位，只需要把下面的子菜单左浮动，main-inner 内容 添加左外边距，右外边距。margin-left: -100% 是块级元素 跑到最左边 。margin-left:-220px 代表 main-inner ： margin-right=220px;

avatar
文章
阅读
粉丝