29.布局

最新推荐文章于 2022-03-21 22:09:39 发布

郭振澳

最新推荐文章于 2022-03-21 22:09:39 发布

阅读量145

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u011513939/article/details/74095137

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

布局

 <!DOCTYPE html>
<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>

郭振澳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
29.布局

布局 <!DOCTYPE html><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,
复制链接

扫一扫