CSS固定布局：960GS

960栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    /* 定义容器 */
        .container_12{
            margin-left: auto;
            margin-right: auto;
            width: 960px;
        }
    /* 栅格的全局变量 */
        .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,
        .grid_9,.grid_10,.grid_11,.grid_12{
            display: inline;
            float: left;
            margin-left: 10px;
            margin-right: 10px;
            text-align: center;
            background-color: pink;
            margin-top: 15px;
        }
    /* 分别设置栅格宽度 */
        .container_12 .grid_1{
            width: 60px;
        }
        .container_12 .grid_2{
            width: 140px;
        }
        .container_12 .grid_3{
            width: 220px;
        }
        .container_12 .grid_4{
            width: 300px;
        }
        .container_12 .grid_5{
            width: 380px;
        }
        .container_12 .grid_6{
            width: 460px;
        }
        .container_12 .grid_7{
            width: 540px;
        }
        .container_12 .grid_8{
            width: 620px;
        }
        .container_12 .grid_9{
            width: 700px;
        }
        .container_12 .grid_10{
            width: 780px;
        }
        .container_12 .grid_11{
            width: 860px;
        }
        .container_12 .grid_12{
            width: 940px;
        }
    </style>
</head>

<body>
    <div class="container_12">
        <div class="grid_12">940</div>
        <div class="grid_1">60</div>
        <div class="grid_11">860</div>
        <div class="grid_2">140</div>
        <div class="grid_10">780</div>
        <div class="grid_3">220</div>
        <div class="grid_9">700</div>
        <div class="grid_4">300</div>
        <div class="grid_8">620</div>
        <div class="grid_5">380</div>
        <div class="grid_7">700</div>
        <div class="grid_6">460</div>
        <div class="grid_6">460</div>
    </div>
</body>
</html>

 

posted @ 2017-04-08 18:12  行动派  阅读(404)  评论(0)  编辑  收藏  举报