【Web前端实操20】商城官网_黑色导航
今天继续着上一篇博客的内容进行编写，本次主要实现的是商场官网实战里面的黑色导航栏部分，也就是广告图片下面的部分。
本次除了每篇都要通用的样式CSS代码之外，还增添了一个引用矢量图标的样式，如果有兴趣的友友们，可以看看我的这篇博客，上面详细介绍了如何下载矢量图标并进行应用的：【Web前端实操17】导航栏效果——滑动门-CSDN博客
代码如下：
reset.css:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}mi.css:
/* 头部样式开始 */
.header{
width: 100%;
height: 120px;
overflow: hidden;
position: relative;
}
.header img{
height: 120px;
/* 图片，以中间开始渲染 */
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 头部样式结束 */
/* 黑色导航样式开始 */
/* 黑色背景容器主体，设置宽高，设置行高，设置背景色，设置文字大小 */
.black-nav{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
font-size: 12px;
}
/* 设置内容居中和宽度 */
.wrap{
width: 1226px;
margin: 0 auto;
}
/* 设置左导航整体往往左浮动 */
.black-nav-left{
float: left;
}
/* 设置右导航整体往右浮动 */
.black-nav-right{
float: right;
}
/* 设置两个导航栏里面的列表左浮动，相对定位 */
.black-nav li{
float: left;
position: relative;
}
/* 设置超链接文本颜色 */
.black-nav a{
color: #b0b0b0;
}
/* 设置超链接旁边连接符的颜色和边距 */
.black-nav span{
color: #424242;
margin: 0 3.6px;
}
/* 设置下载APP超链接下的图片块效果 */
.download{
/* 设定宽高、背景色以及绝对定位，离左边的距离和上边的距离 */
width: 124px;
height: 0;
background: #fff;
/* 有阴影效果 */
box-shadow: 0 1px 5px #aaa;
position: absolute;
top: 40px;
left: 50%;
/* 调整图片块的位置 */
margin-left: -62px;
overflow:hidden;
/* 过渡效果 */
transition: all 0.3s;
}
/* 设置图片宽度，调整图片内边距 */
.download img{
width: 90px;
margin: 18px auto 0;
}
/* 设置图片下面的文字背景、字体大小和行高 */
.download p{
color: #333;
font-size: 14px;
line-height: 14px;
}
/* 鼠标悬停的效果
具体的大小可以自己调定*/
.black-nav-left li:hover>.download{
height: 140px;
}
/* 添加箭头，宽高设置为0，边框设置
绝对定位，设置居中 */
.stri{
width: 0;
height: 0;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position:absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
display: none;
}
.black-nav-left>li:hover>.stri{
display: block;
}
/* 购物车滑下去的效果设置，宽高背景色，边距，相对定位 */
.cart{
width: 120px;
height: 40px;
background: #424242;
margin-left: 25px;
position: relative;
}
/* 设置鼠标悬停在购物车上的背景色，为白色 */
.cart:hover{
background: #fff;
}
/* 设置超链接文本为橘色 */
.cart:hover>a{
color: #ff6700;
}
/* 设置购物车文本样式正常，右边距为8px */
.cart i{
font-style: normal;
margin-right: 8px;
}
/* 设置“购物车中还没有商品，赶紧选购吧”的块结构的宽高背景色，阴影效果等 */
.cart-list{
width: 316px;
height: 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
position: absolute;
right: 0;
top: 40px;
color: #424242;
overflow: hidden;
transition: all 0.3s;
line-height: 100px;
}
/* 当鼠标悬停在购物车上时会出现“购物车中还没有商品，赶紧选购吧”的提示 */
.cart:hover>.cart-list{
height: 100px;
}
/* 黑色导航样式结束 */矢量图标：
index.html:
小米
实现效果：
点击【下载APP】会出现相应的效果，点击【购物车】也会出现相对应的文字，包括鼠标悬停、文字变色等效果。
评论区的小伙伴们，感兴趣的记得点赞收藏哦，有不解的也可以评论哦，我们一起探讨，共同进步呢！