常见的网页布局-第十二天

常见的网页布局

通栏布局:div不设置宽度,让盒子和浏览器等宽的布局
版心布局:网页主体内容放在一个有具体宽度并居中的孩子的布局,整体结构始终处于网页版面的中心
- 常用类名 .w .main .container .view .content
通栏嵌套版心布局:通栏盒子不设置宽度仅设置高并且添加一个背景色,在通栏盒子里面再书写一个版心盒子,让内容居中显示的布局

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /* css3盒子模型 设置宽高为盒子最终宽高 */
            border-style: border-box;
        }
        .shortcut{
            height: 40px;
            background-color: #333333;
        }
        .shortcut .w{
            width: 1226px;
            height: 40px;
            background-color: #333333;
            /* 让当前盒子水平居中 */
            margin: 0 auto;
            /* 行高可被继承 */
            line-height: 40px;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        li{
            float: left;
            list-style: none;
            margin-right: 14px;
        }
        li a{
            /* 清除下划线 */
            text-decoration: none;
            color: #b0b0b0;
            font-style: 12px;
        }
        li a:hover{
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="shortcut">
        <div class="w">
            <ul class="left">
                <li><a href="">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">IoT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">天星数科</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
                <li><a href="">协议规则</a></li>
                <li><a href="">下载app</a></li>
                <li><a href="">智能生活</a></li>
                <li><a href="">Select Location</a></li>
            </ul>
            <ul class="right">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">消息通知</a></li>
                <li><a href="">购物车</a></li>
            </ul>
        </div>
    </div>
</body>
</html>