主页的样式表
顶部导航条的容器
.topbar-wapper{
设置宽度全屏
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: 0 8px;
margin-top: -1px;
}
设置左侧导航栏
.service, .topbar li{
float:left;
}
.app{
position:relative;
}
设置app下的小三角
li:hover .app::after{
content:‘’;
设置绝对定位
position:absolute;
display:block;
width:0;
height:0;
设置四个方向的边框
border: 8px solid transparent;
去除上边框
border-top: none;
单独设置下边框的颜色
border-bottom-color:#fff;
bottom:0;
left:0;
right:0;
margin:auto;
}
li:hover>.app .qrcode{
display:block;
}
设置下载app的下拉
.app .qrcode{
display:none;
position:absolute;
left:-40px;
width:124px;
height:148px;
line-height:1;
text-align:center;
background-color:#fff;
box-shadow:0 0 10px rgba(0,0,0,.3)
}设置二维码图片
.app .qrcode img{
width:90px;
margin: 17px;
margin-bottom:10px;
}
设置二维码中的文字
.app .qrcode span{
font-size:14px;
color:#000;
}
设置右侧导航栏
.shop-cart, .user-info{
float:right;
}
.shop-cart{
margin-left:26px;
}
设置购物车的样式
.shop-cart a{
width:120px;
background-color:#424242;
text-align:center;
}
.shop-cart:hover a{
background-color:#fff;
color:#ff6700;
}
.shop-cart i{
margin-right:2px;
}
导航条的内容基本完善