京东导航栏项目 | 青训营笔记

Adop
279 阅读1分钟

文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第15天

一.项目介绍

        该项目是类似于京东顶部上的导航栏，其中细节 颇多，接下来我带大家一起逐条解析一下该项目

项目效果图

image.png

Document
引入重置样式和图标字体文件
<link rel="stylesheet" href="../总目录/项目集/06.font&background/fa/css/css_local/all.css">
<link rel="stylesheet" href="./css/reset.css">
###### /* 解决高度塌陷问题 */ .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } /* 设置字体样式 */

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

/* 设置外部容器的样式 */
.top-bar-wrapper{
    width: 100%;
    background-color: #E3E4E5;
    line-height: 30px;
    border-bottom: 1px #ddd solid;
}
/* 设置内部容器的样式 */
.top-bar{
/* 固定宽度 */
    width: 1190px;
/* 设置水平居中 */
    margin: 0 auto;
    background-color: ;
    position: relative;
}

.location{
    float: left;
}
/* 设置location下的小图标 */
.location .fas{
    color: #f10215;
}

.shortcut{ float: right; }

/* 设置li */
.shortcut li{
/* 注意这里是像左浮动，如果向右浮动则文字顺序将会颠倒 */
    float: left;
}

.top-bar a,
.top-bar span,
.top-bar i{
    color: #999;
/* 去除下划线 */
    text-decoration: none;

}
/* 将鼠标移入状态设置为红色 */
.top-bar a:hover,
.top-bar a.highlight
{
    color: red;
}
/* 设置分割线 */
.shortcut .line{
    width: 1px;
    height: 12px;
    background-color: #999;
    margin: 10px 12px 0;
}
/* 设置城市列表的效果 */
.location .city-list{
    display: none;
    width: 320px;
    height: 436px;
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
/* 将现实的内容隐藏 */
    display: none;
/* 设置绝对定位，不占用页面位置 */
    position: absolute;
    box-shadow: 0 0 10px rgba(15, 1, 1, 0.2);
    
    top: 31px;
    z-index: 999;

}
.current-city{
    padding: 0 10px;

    position: relative;
/* 设置将鼠标移入也不会动 */
    border: 1px solid rgb(204, 204, 204);
    border-bottom: none;

    z-index: 9999;
}

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

}
/* 设置current-city的移入效果 */
.current-city:hover{
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
    border-bottom: none;
    padding-bottom: 1px;

   
}
主体部分
###### -创建外围容器 
<div class="top-bar-wrapper">
-- 创建内部容器 -
-- 创建左侧菜单 --
        <div class="location">
            <div class="current-city">
               <i class="fas fa-map-marker-alt"></i>
                <a href="javascript">贵州</a>
-- 放置城市列表 -
                <div class="city-list">

                </div>
            </div>
        </div>

        <ul class="shortcut clearfix">
            <li>
                <a href="javascript">你好，请登录！</a>
            <a class="highlight" 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="highlight" 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>

            <li class="line"></li>
            <li>
                <span>网站无障碍</span>
            </li>


        </ul>
    </div>
 </div>
 <body>
 <html>



## 二.总结
    今天要介绍的主要就是这一个项目，虽然呈现出来的效果看起来很简单就几种再加上后面还有些内容没有填充完毕，其中细节也是有很多，也花了我三天的时间才彻底整理明白！
avatar
文章
阅读
粉丝