顶部导航条
结构:最外围的容器(最大)
三个div块
左右两侧各一块,购物车独占一块(样式需设置)
css下的文档(样式)
/* 主页index1.html的样式表 */
/* 顶部导航条的样式 */
.topbar-wrapper{
/* 设置宽度全屏 */
width: 100%;
/* 设置高度和行高 */
height: 40px;
line-height: 40px;
/* 设置背景颜色 */
background-color: #333;
}
/* 设置超链接的颜色 */
.topbar a{
font-size: 12px;
color:#b0b0b0;
display: block;
}
/* 设置超链接移入的效果 */
.topbar a:hover{
color: #fff;
}
/* 设置中间分割线 */
.topbar .line{
font-size: 12px;
color: #424242;
margin: 0px 8px;
margin-top: -1px;
}
/* 设置左侧导航栏 */
.service, .topbar li{
float: left;
}
/* 设置右侧导航 */
.shop-cart, .use-info{
float: right;
}
/* 设置购物车的内边距 */
.shop-cart{
margin-left: 26px;
}
/* 设置购物车(0)这个超链接 */
.shop-cart a{
width: 120px;
background: #424242;
/* 设置购物车居中 */
text-align: center;
}
/* 设置图标购物车与购物车之间的距离 */
.shop-cart i{
margin-right: 2px;
}
/* 设置超链接购物车移入效果 */
.shop-cart:hover a{
background-color: #fff;
color:#FF6700;
}
/* 公共样式 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
/* 去除a的下划线 */
a{
text-decoration: none;
color: #333;
}
body{
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
/* 设置容器最低宽度,以防溢出 */
min-width: 1226px;
}
/* 设置一个类,用来表示中间容器的宽度 */
.w{
/* 固定容器的宽度 */
width: 1226px;
/* 设置容器居中 */
margin: 0 auto;
}
结构代码
<!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>小米商城 - Redmi Note 8、小米CC9、小米MIX 3,小米电视官方网站</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="./css/base1.css">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="./fa/css/all.css">
<!-- 引入当前页面样式表 -->
<link rel="stylesheet" href="./css/index1.css">
</head>
<body>
<!-- 创建顶部导航条 -->
<!-- 创建顶部导航条外部容器 -->
<div class="topbar-wrapper">
<!-- 创建内部容器 -->
<div class="topbar w clearfix">
<!-- 左侧的导航条 -->
<ul class="service">
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">loT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证照</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li><a href="javascript:;">下载app</a></li>
<li class="line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!-- 购物车 -->
<ul class="shop-cart">
<li><a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车(0)
</a>
</li>
</ul>
<!-- 用户登录注册 -->
<ul class="use-info">
<li><a href="javascript:;">登录</a></li>
<li class="line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="line">|</li>
<li><a href="javascript:;">消息通知</a></li>
<li class="line">|</li>
</ul>
</div>
</div>
</body>
</html>
效果图
补充:图标字体的文档一定要正确引入才能从页面中显示购物车图标