今天继续着上一篇博客的内容进行编写，本次主要实现的是商场官网实战里面的黑色导航栏部分，也就是广告图片下面的部分。

本次除了每篇都要通用的样式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