京东顶部导航条（html/css）

京东顶部导航条.png

思路：
1、引入重置样式表
2、引入font awesome样式表

    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="./fa/css/all.css">

3、创建外围容器、内部容器，绘制布局

基本布局.png

4、外部容器设置样式：宽度、背景颜色、行高（文字垂直居中）、下边框

外部容器.png

5、内部容器设置样式：宽度、外边距（水平居中）

内部容器.png

6、让北京左浮动，让其他整体右浮动，并解决高度塌陷问题；其他菜单内部左浮动

左右浮动.png

导航栏.png

7、在body上设置样式：字体，颜色最好不要设置在body中，因为在body中设置会运用到全局中
8、设置字体样式：颜色、风格

颜色.png

9、北京设置样式：小图标颜色、外右边距
10、设置字体固定红色和鼠标移入变红色
11、设置线的位置、颜色、宽高、外边距

22.png

12、下拉框制作
当鼠标移入location，让city-list显示，一般这种效果hover给父元素，设置绝对定位，使其脱离文档流，不占据页面的位置，设置阴影，设置北京背景、边框

效果图.png

【html】

<body>
    <div class="top-bar-wrapper">
        <div class="top-bar  clearfix">
            <div class="location">
                <div class="current-city">
                    <i class="fas fa-map-marker-alt"></i>
                    <a href="javascript:;">北京</a>
                </div>
                <div class="city-list">

                </div>
            </div>
            <ul class="shortcut  clearfix">
                <li>
                    <a href="javascript:;">你好，请登录</a>
                    <a class='highline' href="javascript:;">免费注册</a>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">我的京东</a>
                    <i class="fas fa-angle-down"></i>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">京东会员</a>
                </li>
                <li class="line"></li>
                <li>
                    <a class='highline' href="javascript:;">企业采购</a>
                    <i class="fas fa-angle-down"></i>
                </li>
                <li class="line"></li>
                <li>
                    <span>客户服务</span>
                    <i class="fas fa-angle-down"></i>
                </li>
                <li class="line"></li>
                <li>
                    <span>网站导航</span>
                    <i class="fas fa-angle-down"></i>
                </li>
                <li class="line"></li>
                <li>
                    <span>手机京东</span>
                </li>
            </ul>
        </div>
    </div>
</body>

【css】

<style>
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        body {
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        }

        .top-bar-wrapper {
            width: 100%;
            background-color: #E3E4E5;
            border-bottom: 1px solid #DDDDDD;
            line-height: 30px;
            height: 30px;
        }

        .top-bar {
            width: 1190px;
            margin: 0 auto;
            position: relative;
        }

        .top-bar a,
        .top-bar span,
        .top-bar i {
            color: #999999;
            text-decoration: none;
        }

        .top-bar a:hover,
        .top-bar a.highline {
            color: #f10215;
            ;
        }

        .location {
            float: left;

        }

        .location .fas {
            color: #f10215;
            margin-right: 4px;
        }

        .location .city-list {
            width: 290px;
            height: 320px;
            background-color: white;
            display: none;
            border: 1px solid rgb(204, 204, 204);
            position: absolute;
            box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
            top: 31px;
            z-index: 999;
        }

        .location:hover .city-list {
            display: block;

        }

        .current-city {
            padding: 0 10px;
            border: 1px solid transparent;
            border-bottom: none;
            position: relative;
            z-index: 1000;

        }

        .location:hover .current-city {
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
            padding-bottom: 1px;

        }

        .shortcut {
            float: right;
        }

        .shortcut .line {
            width: 1px;
            height: 10px;
            margin: 10px 12px 0;
            background-color: #ccc;
        }

        .shortcut li {
            float: left;
        }
    </style>