从0到1搭建小米商城首页（二）

当前任务：

完成黑色导航栏  

• dom结构

最外层一个nav 里面分为左右两个div 都是使用ul li的列表

<!-- 顶部导航 -->
    <nav class="top_nav">
        <div class="top_nav_all">
            <div class="top_nav_left">
                <div>
                    <a href="">小米商城</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">MIUI</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">loT</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">云服务</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">天星数科</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">有品</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">小爱开放平台</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">企业团购</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">资质证照</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">协议规则</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">下载app</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">智能生活</a>
                    <!-- <span>|</span> -->
                </div>
            </div>
            <div class="top_nav_right">
                <div>
                    <a href="">登录</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">注册</a>
                    <span>|</span>
                </div>
                <div>
                    <a href="">消息通知</a>
                </div>
                <div>
                    <div class="shopCar">
                        <i class="iconfont icon-gouwuchekong txt"></i>
                        <a href="">购物车（0）</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

使用<nav> + <div> 组合

• 样式

1、最外层设置背景颜色，设置高度与行高,垂直居中

.top_nav{
    height: 40px;
    background-color: rgb(51,51,51);
    font-size: 12px;
    line-height: 40px;
}

 2、这里的div class="top_nav_all"应该将宽度设置为80%，且水平居中,使用flex布局将左右div靠两侧布局

display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;

 3、左右两个div设置flex布局。

4、a标签如果内容为中字,后面是span标签，两者有1-2px间距，所以再给span加margin时左边的margin要偏小一点，我是这样加的

.top_nav div span{
    margin: 0 4px 0 2px;
    color: #424242;
}

5、购物车的图标使用引入的图标CSS文件

6、购物车额外使用div包裹，设置适当padding值

7、使用nth-last-child(2) 伪类选择器选中倒数第二个div，设置margin-right: 20px

完整CSS代码

.top_img{
    height: 120px;
    width: 100%;
    background-image: url('../assets/pictures/top_bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.top_nav{
    height: 40px;
    background-color: rgb(51,51,51);
    font-size: 12px;
    line-height: 40px;
}
.top_nav_all{
    width: 80%;
    padding: 0;
    display: flex;
    justify-content: space-between;  
    margin: 0 auto;
}
.top_nav_left,.top_nav_right {
    display: flex;
}

.top_nav div {
   color: #b0b0b0;
}

.top_nav div a{
    text-decoration: none;
}

.top_nav div span{
    margin: 0 4px 0 2px;
    color: #424242;
}

.top_nav div a:visited{
    color: #b0b0b0;
}

.top_nav_right div:nth-last-child(2) {
    margin-right: 20px;
}
.shopCar{
    background-color: #424242;
   
    height: 40px;
    padding: 0 20px;
}

效果图

前端大佬们，有什么建议可以直接提，不吝赐教！