京东顶部导航条（html/css）
2020-10-14 本文已影响0人
番茄你个西紅柿
京东顶部导航条.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>
