商城导航页面

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物商城</title>
    <link rel="stylesheet" href="练习.css">

</head>
<body>
<div class="nav">
    <div class="content clearfix">
        <div class="nav-left">
            <ul>
                <li><a href="https://www.mi.com/index.html">小米商城</a></li>
                <li><a href="https://www.miui.com/">MIUI</a></li>
                <li><a href="https://iot.mi.com/index.html">IoT</a></li>
                <li><a href="https://i.mi.com/#/">云服务</a></li>
                <li><a href="https://jr.mi.com/index.html?from=micom&t=1556976996391">金融</a></li>
                <li><a href="https://www.xiaomiyoupin.com/">有品</a></li>
                <li><a href="https://xiaoai.mi.com/">小爱开放平台</a></li>
                <li><a href="https://qiye.mi.com/">企业团购</a></li>
                <li><a href="https://www.mi.com/aptitude/list/?id=41">资质证照</a></li>
                <li><a href="https://www.mi.com/aptitude/list/">协议规则</a></li>
                <li><a href="https://www.mi.com/appdownload/">下载app</a></li>
                <li><a href="https://www.mi.com/appdownload/">Select Region</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <ul>
                <li>
                    <a href="https://account.xiaomi.com/pass/serviceLogin?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Findex.html%26sign%3DMjM0MWU0NjBlOTU1YzY4NGQzOTc3MDk4N2M2MjQ5Y2ZiZTMxNTFlZQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">登录</a>
                </li>
                <li><a href="https://www.mi.com/index.html">注册</a></li>
                <li>
                    <a href="https://account.xiaomi.com/pass/serviceLogin?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Forder.mi.com%252Fmessage%252Flist%26sign%3DMjEyY2NkOTg5NjAzZmMyNWUyMDBhNzE2MDczNWJkYzFkMTg1Yjc0MQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">消息通知</a>
                </li>
            </ul>

        </div>
    </div>

</div>
</body>
</html>

 

CSS

/*blog页面相关的*/


/*通用*/

/*字体*/

*{
    font-family: "微软雅黑","Microsoft YaHei UI";
    font-size: 12px;
    color: #fff;
}


*{
    padding: 0;
    margin: 0;
}

/*去掉li标签前面的黑点*/
ul{
    list-style-type: none;
}

.nav{
    background-color: #333;
}

/*清除左右的浮动*/
.clearfix:after{
    clear: both;
    content: "";
    display: block;
}

/*这里是将导航里面的窗格单独作为内容进行调整*/
.content{
    width: 90%;/*内容占到整个黑色条带的90%*/
    margin:0 auto;
}

/*将竖着排列的nav-left标签横着排列*/
.nav-left li{  /*注意这里是一个简写本来正确写法应该是.nav-left>ul>li*/
    float: left;
    padding-right: 10px;/*所有标签中间间隔10px*/
    margin-left: 35px;
}

/*nav-right*/
.nav-right li{
     float: right;/*将这里的所有标签全部都向右漂移*/
     padding-right: 20px;
}

 

posted @ 2019-05-04 23:16  舒畅123  阅读(231)  评论(0)  编辑  收藏  举报