作业-前端小米商城首页顶部导航栏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>小米商城导航栏</title>
    <style >
        .site-topbar
        {
            position:relative;
            z-index:30;
            height:40px;
            font-size:12px;
            color:#b0b0b0;
            background:#333
        }
        .sep {
            margin: 0 .3em;
            color: #424242
        }
        .site-topbar a:hover
        {
         color:white;
        }
        .site-topbar a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            text-decoration: none;
            text-align: center;
        }
        .shopping-car
        {
                background: #424242;
                float: right;
                height: 40px;
                line-height: 40px;
                width: 120px;
                text-align: center;
                margin-left: 40px;
        }
        .herder-left
        {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            height: 40px;
            float: left;
        }
        .herder-right
        {
            float: right;
            height: 40px;
            line-height: 40px;
        }

    </style>

</head>
<body>
<div class="site-topbar" >
    <div class="herder-left" >
    <span class="sep">|</span>
    <a rel="nofollow" href="//www.mi.com/index.html" style="text-decoration:none">小米商城</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//jr.mi.com?from=micom" target="_blank">金融</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//qiye.mi.com/" target="_blank">企业团购</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//www.mi.com/aptitude/list/?id=41" target="_blank">资质证照</a>
    <span class="sep">|</span>
    <a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
    <span class="sep">|</span>
    <a href="">下载app</a>
    <span class="sep">|</span>
    <a href="">SelectLocation</a></div>
    <div class="shopping-car">
        <a href="">购物车 (0)</a></div>
<!--    <div class="topbar-info">-->
<!--        <span class="sep">|</span>-->
<!--        <a rel="nofollow" href="http://localhost:63342/python%20oldboy/day52/Login.html" target="_blank">登录</a>-->
<!--        <span class="sep">|</span>-->
<!--        <a rel="nofollow" href="http://localhost:63342/python%20oldboy/day52/registed.html" target="_blank">注册</a></div>-->
    <div class="herder-right">
        <a href="">登录</a>
        <span class="sep">|</span>
        <a href="">注册</a>
        <span class="sep">|</span>
        <a href="">消息通知</a></div>

</div>

</body>
</html>
posted @ 2020-05-13 14:51  sunshine如你  阅读(932)  评论(0)  编辑  收藏  举报