马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本文章以淘宝的导航栏为例子，希望对代码感爱好的同砚有所帮助，此代码主要面向纯新手小白，
导航栏使用纯html+Css、实现导航栏固定，ul的固定悬浮，hover和display的显示隐藏。
代码简单：div，ul，li，a
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/TBpage-copy.css" />
</head>
<body>
<header>
<!--导航栏-->
<div id="nav">
<div id="navigation">
<ul id="navigation_l">
<li class="NavWorld">
<a href="#">举世</a>
<ul class="NavWorld_dropdown">
<li>
<a href="#">清远</a>
</li>
<li>
<a href="#">广州</a>
</li>
<li>
<a href="#">成都</a>
</li>
<li>
<a href="#">南充</a>
</li>
<li>
<a href="#">...</a>
</li>
</ul>
</li>
<li>
<a href="#">登录</a>
</li>
<li>
<a href="#">注册</a>
</li>
<li>
<a href="#">网页无障碍</a>
</li>
<li>
<a href="#">切换企业版</a>
</li>
</ul>
<ul id="navigation_r">
<li class="NavPurchase">
<a href="#">我的淘宝</a>
<ul class="NavPurchase_t">
<li>
<a href="#">已买宝贝</a>
</li>
<li>
<a href="#">阅览足迹</a>
</li>
</ul>
</li>
<li>
<a href="#">购物车</a>
</li>
<li class="NavFavorites">
<a href="#">收藏夹</a>
<ul class="NavFavorites_t">
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店肆</a></li>
</ul>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li class="NavPay">
<a href="#">免费开店</a>
<ul class="NavPay_t">
<li><a href="#">对公支付</a></li>
</ul>
</li>
<li><span href="#">l</span></li>
<li class="NavCenter">
<a href="#">千牛卖家中心</a>
<ul class="NavCenter_t">
<li><a href="#">开店入驻</a></li>
<li><a href="#">已卖出的宝贝</a></li>
<li><a href="#">出售中的宝贝</a></li>
<li><a href="#">卖家服务市场</a></li>
<li><a href="#">卖家培训中心</a></li>
<li><a href="#">体检中心</a></li>
<li><a href="#">电商学习中心</a></li>
</ul>
</li>
<li class="NavHelp">
<a href="#">帮助中心</a>
<ul class="NavHelp_t">
<li><a href="#">官方客服</a></li>
<li><a href="#">商家客服</a></li>
<li><a href="#">消息中心</a></li>
<li><a href="#">意见反馈</a></li>
<li><a href="#">举报中心</a></li>
</ul>
</li>
</ul>
</div>
</div
</header>
</body>
</html>
Css：
* {
padding: 0;
margin: 0;
}
/*nav*/
#nav {
width: 100%;
height: 22px;
margin: 0px auto;
padding: 5px 0px;
border-bottom: 1px solid gray;
background: gray;
position: fixed;
/*background: #ADFF2F;*/
}
#nav a {
text-decoration: none;
color: black;
}
#nav a:hover {
color: red;
text-decoration: underline;
-moz-text-decoration-color: red;
}
#navigation {
width: 1390px;
margin-left: 77.5px;
/*background: #20B2AA;*/
}
#navigation ul {
list-style: none;
display: inline-flex;
}
#navigation ul li {
padding: 0px 12px;
display: inline-flex;
}
#navigation_r {
margin-left: 26%;
}
/*ul固定悬浮*/
/*高度21/格+2px*/
#navigation .NavWorld_dropdown,
#navigation .NavPurchase_t,
#navigation .NavFavorites_t,
#navigation .NavPay_t,
#navigation .NavCenter_t,
#navigation .NavHelp_t {
display: block;
z-index: 1;
position: absolute;
text-align: left;
top: 25px;
border: 1px solid gray;
border-top: none;
background: white;
display: none;
}
/*举世*/
#navigation .NavWorld_dropdown {
width: 75px;
height: 107px;
left: 77px;
}
/*购买*/
#navigation .NavPurchase_t {
width: 88px;
height: 44px;
left: 819px;
}
/*收藏*/
#navigation .NavFavorites_t {
width: 105px;
height: 44px;
left: 979px;
}
/*收费*/
#navigation .NavPay_t {
width: 88px;
height: 21px;
left: 1139px;
}
/*中心*/
#navigation .NavCenter_t {
width: 120px;
height: 149px;
left: 1255px;
}
/*帮助*/
#navigation .NavHelp_t {
width: 88px;
height: 107px;
left: 1375px;
}
#navigation .NavWorld:hover .NavWorld_dropdown,
#navigation .NavPurchase:hover .NavPurchase_t,
#navigation .NavFavorites:hover .NavFavorites_t,
#navigation .NavPay:hover .NavPay_t,
#navigation .NavCenter:hover .NavCenter_t,
#navigation .NavHelp:hover .NavHelp_t {
display: block;
}
#nav .NavWorld:hover,
#navigation .NavPurchase:hover,
#navigation .NavFavorites:hover,
#navigation .NavPay:hover,
#navigation .NavCenter:hover,
#navigation .NavHelp:hover {
background: white;
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
