导航条
本文是在引用了reset.css文件去除浏览器默认样式的情况下进行的渲染,可参考day02-layout盒模型中浏览器的默认样式模块下的reset.css链接自行下载使用
本文引用的向下箭头、定位表为图标字体,可自行在iconfont阿里巴巴矢量图标库自行下载,可参考day03-布置练习中导航条模块下的使用示例进行使用
<!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="../05daohangtiao/iconfont.css">
<style>
body {
background-color: seagreen;
font-size: 12px;
}
.zong {
width: 1060px;
height: 31px;
background-color: rgb(227, 228, 229);
}
.zong .daohangtiao {
width: 990px;
height: 30px;
overflow: hidden;
margin: 10px auto;
line-height: 30px;
border-bottom: 1px solid rgb(221, 221, 221);
}
.zong .daohangtiao .denglu {
float: left;
padding: 0 7px;
}
.zong .daohangtiao .denglu .shanxi {
padding: 0 7px;
float: right;
}
.zong .daohangtiao .denglu span {
color: rgb(241, 2, 21);
}
.zong .daohangtiao .denglu a,
.zong .daohangtiao .denglu .inconfont {
float: left;
color: #999999;
text-decoration: none;
}
.zong .daohangtiao .neirongqu {
float: right;
}
.zong .daohangtiao .neirongqu .bufen {
padding: 0 7px;
}
.zong .daohangtiao .neirongqu .bufen .inconfont {
font: 12px;
line-height: 30px;
}
.zong .daohangtiao .neirongqu li {
float: left;
color: #999999;
}
.zong .daohangtiao .neirongqu li a {
text-decoration: none;
color: #999999;
}
.zong .daohangtiao .neirongqu .dianhong a:hover,
.zong .daohangtiao .neirongqu .zhihong a {
color: rgb(241, 2, 21);
}
.zong .daohangtiao .neirongqu .shenglue {
white-space: nowrap;
width: 2em;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="zong">
<div class="daohangtiao">
<div class="denglu">
<a href="javascript:;">
<span class="iconfont"></span>
<div class="shanxi">陕西</div>
</a>
</div>
<ul class="neirongqu">
<li class="bufen dianhong"><a href="javascript:;">你好,请登录</a></li>
<li class="bufen zhihong shenglue"><a href="javascript:;">免费注册</a></li>
<li class="shugang">|</li>
<li class="bufen dianhong"><a href="javascript:;">我的订单</a></li>
<li class="shugang">|</li>
<li class="bufen dianhong">
<a href="javascript:;">我的京东</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen dianhong"><a href="javascript:;">京东会员</a></li>
<li class="shugang">|</li>
<li class="bufen zhihong">
<a href="javascript:;">企业采购</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen">
<a href="javascript:;">客户服务</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen">
<a href="javascript:;">导航网站</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen"><a href="javascript:;">手机京东</a></li>
</ul>
</div>
</div>
</body>
</html>
下拉框
本文是在引用了reset.css文件去除浏览器默认样式的情况下进行的渲染,可参考day02-layout盒模型中浏览器的默认样式模块下的reset.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="../05daohangtiao/iconfont.css">
<style>
body {
background-color: seagreen;
font-size: 12px;
}
.zong {
width: 1060px;
height: 31px;
background-color: rgb(227, 228, 229);
border-bottom: 1px solid rgb(221, 221, 221);
}
.zong .daohangtiao {
width: 990px;
height: 30px;
/* overflow: hidden; */
margin: 0px auto;
line-height: 30px;
position: relative;
z-index: 1;
}
.zong .daohangtiao .denglu {
float: left;
padding: 0 7px;
}
.zong .daohangtiao .denglu .zuoshang {
width: 57.95px;
height: 29.99px;
}
.zong .daohangtiao .denglu .zuoshang .shanxi {
padding: 0 7px;
float: right;
}
.zong .daohangtiao .denglu .zuoshang span {
color: rgb(241, 2, 21);
}
.zong .daohangtiao .denglu .xialakuang {
display: none;
width: 310px;
height: 440px;
border: 1px solid rgb(221, 221, 221);
background-color: rgb(255, 255, 255);
position: absolute;
top: 31px;
}
.zong .daohangtiao .denglu a,
.zong .daohangtiao .denglu .inconfont {
/* float: left; */
color: #999999;
text-decoration: none;
}
/* hover绑定给denglu,在鼠标移入下拉框时也处于选中状态 */
.zong .daohangtiao .denglu:hover .zuoshang{
border: 1px solid rgb(221, 221, 221);
border-bottom: 2px solid rgb(255, 255, 255);
background-color:rgb(255, 255, 255);
position: absolute;
z-index: 9999;
}
.zong .daohangtiao .denglu:hover .xialakuang {
display: block;
}
.zong .daohangtiao .neirongqu {
float: right;
position: relative;
}
.zong .daohangtiao .neirongqu .bufen {
padding: 0 7px;
}
.zong .daohangtiao .neirongqu .bufen .inconfont {
font: 12px;
line-height: 30px;
}
.zong .daohangtiao .neirongqu li {
float: left;
color: #999999;
}
.zong .daohangtiao .neirongqu li a {
text-decoration: none;
color: #999999;
}
.zong .daohangtiao .neirongqu .dianhong a:hover,
.zong .daohangtiao .neirongqu .zhihong a ,
.zong .daohangtiao .denglu a:hover{
color: rgb(241, 2, 21);
}
.zong .daohangtiao .neirongqu .shenglue {
white-space: nowrap;
width: 2em;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="zong">
<div class="daohangtiao">
<div class="denglu">
<div class="zuoshang">
<a href="javascript:;">
<span class="iconfont"></span>
<div class="shanxi">陕西</div>
</a>
</div>
<div class="xialakuang"></div>
</div>
<ul class="neirongqu">
<li class="bufen dianhong"><a href="javascript:;">你好,请登录</a></li>
<li class="bufen zhihong shenglue"><a href="javascript:;">免费注册</a></li>
<li class="shugang">|</li>
<li class="bufen dianhong"><a href="javascript:;">我的订单</a></li>
<li class="shugang">|</li>
<li class="bufen dianhong">
<a href="javascript:;">我的京东</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen dianhong"><a href="javascript:;">京东会员</a></li>
<li class="shugang">|</li>
<li class="bufen zhihong">
<a href="javascript:;">企业采购</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen">
<a href="javascript:;">客户服务</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen">
<a href="javascript:;">导航网站</a>
<span class="iconfont"></span>
</li>
<li class="shugang">|</li>
<li class="bufen"><a href="javascript:;">手机京东</a></li>
</ul>
</div>
</div>
</body>
</html>