这篇博客通过HTML和CSS展示了如何创建京东风格的顶部导航条，包括左侧的城市切换和右侧的多个下拉菜单。博客中详细说明了CSS样式，如浮动、定位、过渡效果以及如何处理高度塌陷问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部的导航条</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="../css/reset.css">
<!-- 引入字体样式 -->
<link rel="stylesheet" href="./css/all.css">
<style>
/*设置浮动之后元素脱离文档流 产生高度塌陷问题*/
.clear::after,
.clear::before {
content: '';
display: table;
clear: both;
}
body {
font-size: 14px;
}
/*设置外部容器*/
.out_wapper {
width: 100%;
background-color: #E3E4E5;
height: 30px;
line-height: 30px;
}
/*设置内部容器*/
.inner_wapper {
width: 1190px;
margin: 0px auto;
}
/*设置左边浮动*/
.location {
float: left;
position: relative;
}
/*将列表右浮动*/
.list {
float: right;
}
/*列表下的li向左边浮动*/
.list li {
float: left;
}
/*清除 a的下划线 以及设置字体颜色*/
.inner_wapper a,
.inner_wapper i,
.list span {
text-decoration: none;
color: #A6A6A6;
}
.list .line {
height: 10px;
border: 1px solid #A6A6A6;
margin: 11px 5px 0;
background-color: #A6A6A6;
overflow: hidden;
}
/*设置鼠标移入效果*/
.inner_wapper a:hover {
color: #F10215;
}
/*设置城市列表*/
.location .city_list {
/*设置宽高*/
width: 323px;
height: 465px;
/*设置背景色*/
background-color: white;
/*隐藏这个块*/
display: none;
/*设置边框*/
border: 1px solid #CCCCCC;
/*设置阴影*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*设置绝对定位 使其脱离文档流*/
position: absolute;
top: 28px;
/*设置层级*/
z-index: 999;
}
/*移入的效果绑定到location上 因为location包含这current-list 和city-list这两个块*/
.location:hover .city_list {
<
最低0.47元/天 解锁文章
扫一扫
6209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
