前端学习之旅(七)【顶部导航栏】

最新推荐文章于 2024-07-19 20:58:37 发布

·+·+·

最新推荐文章于 2024-07-19 20:58:37 发布

阅读量402

点赞数 6

分类专栏： B大学前端文章标签：学习 html 前端 css

本文链接：https://blog.csdn.net/qq_62170186/article/details/135630429

版权

B大学前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

任务

参考视频，学习制作一个自己的导航栏。

参考视频链接：尚硅谷前端课程

代码

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>豹富商品会</title>
    <!-- 引入页签图标 -->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./assets/css/index.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="topbar">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左部欢迎栏 -->
            <div class="welcome leftfix">
                <span class="hello">豹富商品会欢迎您</span>
                <span>请</span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
            <!-- 右部索引栏 -->
            <div class="tagbar rightfix">
                <ul class="tagbar-list clearfix">
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的尚品汇</a></li>
                    <li><a href="#">尚品汇会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注尚品汇</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
        </div>
    </div>    
</body>
</html>

CSS代码：

/* #region基础样式start */
.container {
    width: 1190px;
    margin: 0 auto;
}
/* #endregion基础样式end */


/* #region顶部导航栏start */
.topbar{
    height: 30px;
    background-color: #ECECEC;
    line-height: 30px;
}

.welcome {
    font-size: 0;
    color: #666;
}

.welcome span, .welcome a{
    font-size: 12px;
}

.welcome .hello {
    margin-right: 28px;
}

.welcome .login {
    padding-right: 10px;
    border-right: 1px solid #666;
}
 
.welcome .register {
    padding-left: 10px;
}

.tagbar .tagbar-list li {

    float: left;
}

.tagbar .tagbar-list a {
    padding: 0 15px;
    border-right: 1px solid #666;
}

.tagbar .tagbar-list li:first-child a{
    padding-left: 0px;
}

.tagbar .tagbar-list li:last-child a {
    padding-right: 0;
}

.tagbar .tagbar-list li:last-child a{
    border-width: 0;
}

/* #endregion顶部导航栏end */