web——栅格系统

来源：互联网发布：淘宝购买不了系统繁忙编辑：程序博客网时间：2024/06/10 13:18

前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，是圣杯布局开始，到最流行的bootstrap栅格布局，下面是个列子

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title></title>        <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">        <style>            /*通配符选择器*/            [class*="col-"]{                border: 1px solid gray;            }            @media only screen and (max-width: 768px) {                #demo{                    display: none;                }            }        </style>    </head>    <body>        <div class="container-fluid">            <div class="row">                <div id="demo" class="col-lg-2 col-md-1 col-sm-1">左侧导航</div>                <div class="col-lg-8 col-md-11 col-sm-11 col-lg-offset-2">右侧内容</div>            </div>        </div>    </body></html>

阅读全文

0 0