14.京东顶部导航条
整体效果
实施目标
效果
代码
<!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入重置样式表 --> <link href="css/reset.css" rel="stylesheet"> <!-- 引入图标样式 --> <link href="./fontawesome/css/all.css" rel="stylesheet"> <style> body { color: #9c9c9c; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; } /* 修饰a的样式 */ a { color: #9c9c9c; text-decoration: none; } /* 设置鼠标划过span和a时，字体红色效果 */ .top-bar-wrapper span:hover, .top-bar-wrapper a:hover { color: #f10215; } /* 向下图标 */ .fa-angle-down { color: #9c9c9c; font-size: 1px; } /* 设置外部容器样式 */ .top-bar-wrapper { height: 30px; background-color: #e3e4e5; line-height: 30px; border-bottom: 1px solid #ddd; } /* 设置内部容器样式 */ .top-bar { width: 1000px; /* 设置垂直居中 */ line-height: 30px; /* 设置水平居中 */ margin: 0 auto; } /* 设置左侧location */ .top-bar .location { float: left; margin-left: 10px; width: 60px; text-align: center; } /* 设置location下的小图标 */ .location .fa-map-marker-alt, .shortcut .highlight { color: #f10215; } /* 设置current-city效果 */ .location .current-city { /* 设置边框颜色为透明 */ border: 1px solid transparent; border-bottom: none; /* 设置相对定位,令其层级为999 */ position: relative; z-index: 9999; } /* 设置鼠标移到location时，current-city效果 */ .location:hover .current-city { background-color: #fff; border: 1px solid rgb(204, 204, 204); border-bottom: none; } /* 设置city-list效果 */ .location .city-list { /* 设置city-list默认情况下隐藏 */ display: none; width: 400px; height: 500px; border: 1px solid rgb(204, 204, 204); box-shadow: 2px 2px 2px rgb(204, 204, 204); /* 设置绝对路径,离html的高度为30px */ position: absolute; top: 30px; /* 设置其层级在所有页面之上,在current-city之下 */ z-index: 999; } /* 当鼠标移到location时,city-list显示 */ .location:hover .city-list { display: block; } /* 设置右侧菜单样式 */ .shortcut { float: right; } /* 设置右侧菜单样式 的li*/ .shortcut li { float: left; } /* 设置分割线 */ .shortcut .line::after { content: '|'; color: #ccc; font-size: 1px; vertical-align: top; margin: 10px; } </style> </head> <body> <!-- 创建外围容器 --> <div class="top-bar-wrapper"> <!-- 创建内部容器 --> <div class="top-bar"> <!-- 左侧定位菜单 --> <div class="location"> <div class="current-city"> <i class="fas fa-map-marker-alt"></i> <a href="javascript:;">北京</a> </div> <!-- city-list框 默认不显示--> <div class="city-list"> <p>阿巴阿巴阿巴，一大堆字.</p> <p>阿巴阿巴阿巴，一大堆字.</p> <p>阿巴阿巴阿巴，一大堆字.</p> <p>阿巴阿巴阿巴，一大堆字.</p> <p>阿巴阿巴阿巴，一大堆字.</p> </div> </div> <!-- 右侧菜单 --> <div> <ul class="shortcut"> <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">网址导航</a> <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> </div> </body> </html>
地址选择框效果
实施目标
效果
代码
<!DOCTYPE html>
<html lang="">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入重置样式表 -->
<link href="css/reset.css" rel="stylesheet">
<!-- 引入图标样式 -->
<link href="./fontawesome/css/all.css" rel="stylesheet">
<style>
body {
color: #9c9c9c;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
/* 修饰a的样式 */
a {
color: #9c9c9c;
text-decoration: none;
}
/* 设置鼠标划过span和a时，字体红色效果 */
.top-bar-wrapper span:hover,
.top-bar-wrapper a:hover {
color: #f10215;
}
/* 向下图标 */
.fa-angle-down {
color: #9c9c9c;
font-size: 1px;
}
/* 设置外部容器样式 */
.top-bar-wrapper {
height: 30px;
background-color: #e3e4e5;
line-height: 30px;
border-bottom: 1px solid #ddd;
}
/* 设置内部容器样式 */
.top-bar {
width: 1000px;
/* 设置垂直居中 */
line-height: 30px;
/* 设置水平居中 */
margin: 0 auto;
}
/* 设置左侧location */
.top-bar .location {
float: left;
margin-left: 10px;
width: 60px;
text-align: center;
}
/* 设置location下的小图标 */
.location .fa-map-marker-alt,
.shortcut .highlight {
color: #f10215;
}
/* 设置current-city效果 */
.location .current-city {
/* 设置边框颜色为透明 */
border: 1px solid transparent;
border-bottom: none;
/* 设置相对定位,令其层级为999 */
position: relative;
z-index: 9999;
}
/* 设置鼠标移到location时，current-city效果 */
.location:hover .current-city {
background-color: #fff;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
}
/* 设置city-list效果 */
.location .city-list {
/* 设置city-list默认情况下隐藏 */
display: none;
width: 400px;
height: 500px;
border: 1px solid rgb(204, 204, 204);
box-shadow: 2px 2px 2px rgb(204, 204, 204);
/* 设置绝对路径,离html的高度为30px */
position: absolute;
top: 30px;
/* 设置其层级在所有页面之上,在current-city之下 */
z-index: 999;
}
/* 当鼠标移到location时,city-list显示 */
.location:hover .city-list {
display: block;
}
/* 设置右侧菜单样式 */
.shortcut {
float: right;
}
/* 设置右侧菜单样式 的li*/
.shortcut li {
float: left;
}
/* 设置分割线 */
.shortcut .line::after {
content: '|';
color: #ccc;
font-size: 1px;
vertical-align: top;
margin: 10px;
}
</style>
</head>
<body>
<!-- 创建外围容器 -->
<div class="top-bar-wrapper">
<!-- 创建内部容器 -->
<div class="top-bar">
<!-- 左侧定位菜单 -->
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:;">北京</a>
</div>
<!-- city-list框 默认不显示-->
<div class="city-list">
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
</div>
</div>
<!-- 右侧菜单 -->
<div>
<ul class="shortcut">
<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">网址导航</a>
<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>
</div>
</body>
</html>
遇到的问题
问题一
代码
/* 设置城市列表效果 */
.location .city-list {
display: none;
width: 400px;
height: 500px;
border: 1px solid rgb(204, 204, 204);
margin-top: -1px;
}
.current-city:hover+.city-list { //要改变的部分
display: block;
}
<!-- 左侧定位菜单 -->
<div class="location"> //父元素
<div class="current-city"> //兄弟元素
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:;">北京</a> //子元素
</div>
<!-- city-list框 默认不显示-->
<div class="city-list"> //兄弟元素
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
<p>阿巴阿巴阿巴，一大堆字.</p>
</div>
</div>
问题分析：
- 当将
hover绑定给city-list的兄弟元素时current-city:hover+.city-list { //要改变的部分 display: block; }
hover不能绑定给city-list的子元素，应为通过其子元素不能找到其兄弟元素/* 当a被触发时我们想让city-list显示，可是无法连接到.city-list */ .current-city a:hover ？？？.city-list { display: block; }
解决方法：
正确做法，必须将hover绑定给location父元素1 /* 当鼠标移到location时,city-list显示 */ 2 .location:hover .city-list { 3 display: block; 4 }
问题二
如何消除下图圈起来的这条线？
问题分析：
边框将两部分分割，不美观。经典问题，说大不大说小不小，那如何解决呢？
解决方法：
我们可以利用定位position来解决，将current-city和city-list都开启定位，current-city的层级大于city-list，这样city-list的边框就被current-city覆盖掉。
记住不要设current-city的下边框。
代码
/* 设置current-city效果 */
.location .current-city {
/* 设置边框颜色为透明 */
border: 1px solid transparent;
border-bottom: none;
/* 设置相对定位,令其层级为999 */
position: relative;
z-index: 9999;
}
/* 设置city-list效果 */
.location .city-list {
/* 设置city-list默认情况下隐藏 */
display: none;
width: 400px;
height: 500px;
border: 1px solid rgb(204, 204, 204);
box-shadow: 2px 2px 2px rgb(204, 204, 204);
/* 设置绝对路径,离html的高度为30px */
position: absolute;
top: 30px;
/* 设置其层级在所有页面之上,在current-city之下 */
z-index: 999;
}
效果
问题三
图中点击北京它会跳动，如何让它不跳动呢？
问题分析：
跳动的原因是应为我们定义北京被鼠标触发时会在其周身添加边框，而边框将容器撑大所以显示跳动效果。
解决方法：
与其等鼠标触发再添加边框，不如提前加好边框将其设为透明，等鼠标触发时再添加边框覆盖掉隐形的边框，这样北京就不会跳动了。
代码
/* 设置current-city效果 */
.location .current-city {
/* 设置边框颜色为透明 */
border: 1px solid transparent;
border-bottom: none;
/* 设置相对定位,令其层级为999 */
position: relative;
z-index: 9999;
}
/* 设置鼠标移到location时，current-city效果 */
.location:hover .current-city {
background-color: #fff;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
}
效果
