css网页布局

经典的行布局

1.基础的行布局

2.行布局自适应

3.行布局自适应限制最大宽

4.行布局垂直水平居中

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin:0;padding: 0;color:#fff;  text-align: center;font-size: 16px}
        .header{width: 100%;height: 50px;background: #333;margin: 0 auto; line-height: 50px; position: fixed;}
        .banner{width: 800px;height: 300px;background: #30a457;margin: 0 auto;padding-top: 50px;}
        .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;}
        .footer{width: 800px;height: 100px;background: #333;margin :0 auto;line-height: 100px;}
    </style>

</head>
<body>
    <div class="header">这是页面的头部</div>
    <div class="banner">这是页面的banner图</div>
    <div class="container">这是页面的内容</div>
    <div class="footer">这是页面的底部</div>
</body>
</html>

 

经典的列布局

1.两列布局固定    width为px

2.两列布局自适应 width为%

3.三列布局固定

4.三列布局自适应

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin: 0;padding: 0;color: #fff;}
        .container{width: 90%;height: 1000px;margin: 0 auto;}
        .left{width: 60%;height: 1000px;background: #1a5acd;float: left;}
        .right{width: 40%;height: 1000px;background: #5880f9;float: right;}
    </style>
</head>
<body>
    <div class="container">
        <div class="left">这是页面的左侧</div>
        <div class="right">这是页面的右侧</div>
    </div>
</body>
</html>

 

混合布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin: 0;padding: 0;font-size: 16px;color: #fff;text-align: center;}
        .header{width: 100%;height: 50px;background: #5880f9;margin: 0 auto;line-height: 50px;}
        .container{width: 100%;margin: 0 auto;height: 1000px}
        .container .left{width: 40%;height: 1000px;background: #67b581;float: left;}
        .container .right{width: 60%;height: 1000px;background: #123456;float: right;}
        .footer{width: 100%;height: 100px;background: #ed817e;margin: 0 auto;line-height:100px; }
    </style>
</head>
<body>
    <div class="header">这是页面的头部</div>
    <div class="container">
        <div class="left">这是页面的左侧</div>
        <div class="right">这是页面的右侧</div>
    </div>
    <div class="footer">这是页面的底部</div>
</body>
</html>

 

圣杯布局

圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念

在国内由淘宝UED的工程师传播开来

布局要求

1.三列布局,中间宽度自适应,两边定宽

2.中间栏要在浏览器中优先展示渲染

3.允许任意列的高度最高

4.用最简单的CSS、最少的HACk语句

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,
        .footer{float: left;width: 100%;background: #ddd;height: 40px;line-height: 40px;text-align: center;}
        .container{padding: 0 220px 0 200px;}
        .left,
        .middle,
        .right{position: relative;float: left;min-height: 300px;}
        .middle{width: 100%;background: #1a5acd;}
        .left{width: 200px;background:#f00; margin-left: -100%;left: -200px;}
        .right{width: 220px;background:#30a457;margin-left: -220px;right: -220px; }
    
    </style>
</head> 
<body>
    <div class="header">
        <h4>header</h4>
    </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">
        <h4>footer</h4>
    </div>
</body>
</html>

 

圣杯布局的流程方式:

1.Middle部分首先要放在container的最前部分

2.然后是left right

 

双飞翼布局

经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局

去掉相对布局,只需要浮动和负边距

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin:0;padding: 0;}
        .header,
        .footer{width:100%;float:left; height: 40px;background: #ddd;text-align: center;line-height: 40px;}
        .sub,
        .main,
        .extra{float: left;min-height: 300px;}
        .main{width: 100%;min-height: 300px;}
        .main-inner{margin-left: 200px;margin-right: 220px;background: #30a457;min-height: 300px;}
        .sub{width: 200px;background: #f00;margin-left: -100%}
        .extra{width: 220px;background: #1a5acd;margin-left: -220px;}
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </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">
        <h4>footer</h4>
    </div>

</body>
</html>

 

双飞翼布局的流程方式:

main要放在最前边,其次是sub extra

圣杯布局
<div class="container">
    <div>中间</div>
    <div>左侧</div>
    <div>右侧</div>
</div>

双飞翼布局
<div class="main">
    <div>中间</div>
</div>
<div>左侧</div>
<div>右侧</div>

 

posted @ 2018-01-30 21:32  quanzhan  阅读(170)  评论(0编辑  收藏  举报