尚品汇导航条

最新推荐文章于 2024-08-22 16:43:17 发布

peakJun

最新推荐文章于 2024-08-22 16:43:17 发布

阅读量60

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/JunGuanDreams/article/details/130631918

版权

HTML代码

<!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.0">
  <title>Document</title>
  <!-- 引入默认清除样式 -->
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 引入样式-->
  <link rel="stylesheet" href="./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="topbar-nav rightfix">
        <ul class="clearfix list">
          <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代码

/* 基础设置 */
.container{
  width: 1190px;
  margin: 0 auto;
}

/* #region顶部导航条start */
.topbar{
  height: 30px;
  background-color: #ececec;
}
.welcome{
  height: 30px;
  line-height: 30px;
  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;
}
.topbar-nav .list{
  height: 30px;
  line-height: 30px;
}
.topbar-nav .list li{
  float: left;
}
.topbar-nav .list li a{
  padding: 0 15px;
  border-right: 1px solid #666;
}
.topbar-nav .list li:first-child a{
  padding-left: 0;
}
.topbar-nav .list li:last-child a{
  padding-right: 0;
  border: 0;
}
/* #endregion顶部导航条end */

运行结果