用div布局CSS样式控制小米案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style>
        /*  css初始化样式 */
        body{min-width:1000px;}
        body,ul,ol,li,p,div,img,b,i,u,h1,h2,h3,h4,h5,h6{margin:0; padding:0; }
        ul,ol{list-style:none; }
        a{text-decoration:none;}


        /*  top  start  */
        #top{height:40px; background-color: #333;}
        #top #top-center{ width: 1000px; height:40px;   margin:0 auto; }
        #top #top-center .top-nav{width: 800px; height:40px; line-height:40px;  float:left; color:#B0B0B0; overflow:hidden;}
        #top #top-center .top-nav ul li{list-style:none; float:left; margin-right:5px;}
        #top #top-center .top-nav ul li a{color:#B0B0B0;}
        #top #top-center .top-cart{width: 100px; height:40px; float:right;}
        #top #top-center .top-login{width: 100px; height:40px;  float:right;}


        /*  top  end  */

        #main{
            width: 1000px;
            min-height:595px;
            background-color: orange;
            margin: 10px auto;
        }

        #footer{
            height:100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id='top'>
        <div id='top-center'>
            <div class='top-nav'>
                <ul>
                    <li><a href="">小米商城</a></li>
                    <li> | </li>
                    <li><a href="">MIUI</a></li>
                    <li> | </li>
                    <li><a href="">米聊</a></li>
                    <li> | </li>
                    <li><a href="">游戏</a></li>
                    <li> | </li>
                    <li><a href="">多看阅读</a></li>
                    <li> | </li>
                    <li><a href="">云服务</a></li>
                    <li> | </li>
                    <li><a href="">金融</a></li>
                    <li> | </li>
                    <li><a href="">小米网移动版</a></li>
                    <li> | </li>
                    <li><a href="">问题反馈</a></li>
                    <li> | </li>
                    <li><a href="">Select Region</a></li>
                </ul>
            </div>
            <div class='top-cart'></div>
            <div class='top-login'></div>
        </div>
    </div>
    <div id='main'></div>
    <div id='footer'></div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容