其他分享
首页 > 其他分享> > 83导航条基本样式

83导航条基本样式

作者：互联网

index.html

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入index.css -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 顶部导航条外部容器 -->
    <div class="top-bar-wrapper">
        <!-- 顶部导航条 -->
        <div class="top-bar w clearfix">
            <ul class="service">
                <li><a href="javasript:;">小米商城</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">MIUI</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">loT</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">云服务</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">天星数科</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">有品</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">小爱开放平台</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">企业团购</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">资质证照</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">协议规则</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">下载app</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">智能生活</a></li>
                <span class="sep">|</span>
                <li><a href="javasript:;">Select Location</a></li>
            </ul>

            <ul class="shop-cart">
                <li><a href="javascript:;"><i class="fa fa-shopping-cart"></i>购物车(0)</a></li>
            </ul>

            <ul class="user-info">
                <li><a href="javasript:;">登陆</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">注册</a></li>
                <span class="iconfont">&#xe605;</span>
                <li><a href="javasript:;">消息通知</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

index.css

/* 主页index.html的样式表 */

/* 顶部导航条容器 */
.top-bar-wrapper {
    /* 设置宽度 */
    width: 100%;
    /* 设置背景颜色 */
    background-color: #333;
    /* 设置高度和垂直居中 */
    line-height: 40px;
}

/* 设置左侧导航栏 */
.service,
.service li,
.service span,
.user-info li,
.user-info span {
    float: left;
}

/* 设置右侧导航栏 */
.shop-cart,
.user-info {
    float: right;
}

/* 设置文字颜色 */
.top-bar a {
    font-size: 12px;
    color: #b0b0b0;
    text-decoration: none;
    /* 这一步的目的是让整个框都能点击 */
    display: block;
}

/* 设置超链接移入的效果 */
.top-bar a:hover {
    color: #fff;
}

/* 设置分割条颜色 */
.top-bar span {
    font-size: 12px;
    color: #424242;
    /* 设置边距 */
    margin: 0 8px;
}

/* 设置购物车 */
.shop-cart a {
    text-align: center;
    width: 120px;
    background-color: #424242;
}
.shop-cart i {
    margin-right: 4px;
}
.shop-cart:hover a {
    background-color: #fff;
    color: rgb(255,106,0);
}
.shop-cart {
    margin-left: 26px;
}

标签：shop,bar,样式,top,cart,color,设置,导航条,83
来源： https://blog.csdn.net/quanxiaobai_/article/details/118084341