二级目录-----纯css(案例：淘宝导航栏）

其他 2019-01-06 17:21:02 阅读次数: 0

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>易淘</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css" />
	<body>
		<nav id="header" class="header">
			<span><a class="tag" href="#">中国大陆</a>
				<ul>
					<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>
					<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>
			</span>
			<span><a href="#">亲，请登录</a></span>
			<span><a href="#">免费注册</a></span>
			<span><a href="#">手机淘宝</a></span>
			<span><a class="tag" href="#">我的淘宝</a>
				<ul>
					<li><a href="#">已卖到的宝贝</a></li>
					<li><a href="#">我的足迹</a></li>
				</ul>
			</span>
			<span><img src="img/shopcar.png"><a class="Tag" href="#">购物车</a></span>
			<span><img src="img/upterik.png"><img class="img" src="img/twrik.png"><a class="Tag" href="#">收藏夹</a>
				<ul>
					<li><a href="#">收藏的宝贝</a></li>
					<li><a href="#">收藏的店家</a></li>
				</ul>
			</span>
			<span><a href="#">商品分类</a></span>
			<span><a class="tag" href="#">卖家中心</a>
				<ul>
					<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>
			</span>
			<span><a class="tag" href="#">联系客服</a>
				<ul>
					<li><a href="#">消费者客服</a></li>
					<li><a href="#">卖家客服</a></li>
				</ul>
			</span>
			<span><img src="img/nav.png"><a class="tag" href="#">网站导航</a>
				<ul>
					<!-- i标签的选用是为了避免与li标签事件的混乱 -->
					<i>
						<ul class="example">
							<h2 style="color: orange;">主题市场</h2>
							<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>
							<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>
							<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>
							<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>
							<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>
					</i>
					<i>
						<ul class="example">
							<h2 style="color: limegreen;">特色市场</h2>
							<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>
							<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>
							<li><a href="#">Outlets</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>
							<li><a href="#">量贩团</a></li>
							<li><a href="#">阿里翻译</a></li>
						</ul>
					</i>
					<i>
						<ul class="example">
							<h2 style="color: blueviolet;">阿里APP</h2>
							<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>
							<li><a href="#">新加坡</a></li>
							<li><a href="#">新西兰</a></li>
							<li><a href="#">加拿大</a></li>
						</ul>
					</i>
					<i>
						<ul class="example">
							<h2 style="color: dodgerblue;">精彩推荐集</h2>
							<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>
							<li><a href="#">新加坡</a></li>
							<li><a href="#">新西兰</a></li>
							<li><a href="#">加拿大</a></li>
						</ul>
					</i>
				</ul>
			</span>
			<div style="clear: both;"></div>
		</nav>
		<!-- <script>
			$(function(){
				$(".header span:nth-child(6)").mouseover(function(){
					$("#header").css('border','none');
				});
				
				$(".header span:nth-child(6)").mouseout(function(){
					$("#header").css('border-bottom','1px solid lavender');
				});
				
			});
		</script> -->
	</body>
</html>

css:

html,
body {
	height: 100%;
	width: 100%;
}

* {
	margin: 0px;
	border: 0px;
}

.header {
	background: lavender;
	border-bottom: 1px solid lavender;
}

a {
	text-decoration: none;
	color: black;
	font-family: "仿宋";
}

/* 必须要设置为absolute,因为css层叠问题,,,
网址https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ */
ul {
	padding: 5px 0;
	margin: 5px 0 0 -6px;
	display: none;
	opacity: 0;
	/* 透明度 */
	background-color: white;
	list-style: none;
	border: 1px solid lavender;
	border-top: none;
	z-index: 1000;
}

ul li {
	margin-top: 10px;
}

ul li:hover {
	background-color: lavender;
}

.header span {
	float: left;
	padding: 5px 15px 5px 5px;
	margin-left: 10px;
}

.header span:nth-child(1)>ul {
	width: 300px;
	height: 250px;
	overflow-y: scroll;
}

/* 图标 */
.Tag::after,
.tag::after {
	position: absolute;
	display: block;
	height: 3px;
	width: 3px;
	margin: -15px 0 0 70px;
	content: "";
	transform: rotateZ(45deg);
	border: 2px solid darkgray;
	border-top: none;
	border-left: none;
}

.Tag::after {
	margin: -15px 0 0 70px;
}

.img {
	position: absolute;
	margin-left: -17px;
}

.header span>a:hover {
	color: orange;
}

.header span:nth-child(1) ul {
	position: absolute;
}

.header span:nth-child(1):hover {
	background-color: white;
}

.header span:nth-child(1):hover ul {
	display: block;
	opacity: 1;
	left: 0px;
	margin: 5px 0 0 9px;
}

.header span:nth-child(2) ul {
	position: absolute;
}

.header span:nth-child(2) a {
	color: orange;
}

.header span:nth-child(2):hover a {}

.header span:nth-child(3) ul {
	position: absolute;
}

.header span:nth-child(3) a:nth-child(1) {}

.header span:nth-child(4) ul {
	position: absolute;
}

.header span:nth-child(4) {
	margin-right: 20%;
}

.header span:nth-child(4) a:nth-child(1) {}

.header span:nth-child(5) ul {
	position: absolute;
}

.header span:nth-child(5) a:nth-child(5) {}

.header span:nth-child(5):hover {
	background-color: white;
}

.header span:nth-child(5):hover ul {
	display: block;
	opacity: 1;
}

.header span:nth-child(6) ul {
	position: absolute;
}

.header span:nth-child(6):hover {}

.header span:nth-child(7) ul {
	position: absolute;
}

.header span:nth-child(7):hover {
	background-color: white;
}

.header span:nth-child(7):hover .img {
	display: none;
}

.header span:nth-child(7):hover ul {
	display: block;
	opacity: 1;
}

.header span:nth-child(8) ul {
	position: absolute;
}

.header span:nth-child(9) ul {
	position: absolute;
}

.header span:nth-child(9):hover {
	background-color: white;
}

.header span:nth-child(9):hover ul {
	display: block;
	opacity: 1;
}

.header span:nth-child(10) ul {
	position: absolute;
}

.header span:nth-child(10):hover {
	background-color: white;
}

.header span:nth-child(10):hover ul {
	display: block;
	opacity: 1;
}

.header span:nth-child(11):hover {
	background-color: white;
}

.header span:nth-child(11)>ul {
	position: absolute;
	left: 2%;
	width: 96%;
	z-index: 1000;
}

.header span:nth-child(11):hover ul {
	display: block;
	opacity: 1;
}

.header span:nth-child(11)>ul>i {
	width: 24%;
	display: inline-block;
}

.header span:nth-child(11):hover>ul li {
	background-color: white;
}

.header span:nth-child(11) i:nth-child(1) a:hover {
	color: orange;
}

.header span:nth-child(11) i:nth-child(2) a:hover {
	color: limegreen;
}

.header span:nth-child(11) i:nth-child(3) a:hover {
	color: blueviolet;
}

.header span:nth-child(11) i:nth-child(4) a:hover {
	color: dodgerblue;
}

/* 消除边距问题 */
.example {
	margin: 0px;
	padding: 0px 15px;
}

.example h2 {
	font-weight: 600;
	font-size: large;
}

.example li {
	display: inline-block;
}

.example:nth-child(1) li {
	padding: 0 10% 0 0;
}

感触：在css中尽量别给“标签选择器”乱加属性以及定位，一旦html中这种标签复用度变高时，总会产生几个不适合你想法的表现，所以“标签选择器”中的“属性”一定要有普遍性。另外关于absolute,和relative的相爱相杀；hover的注意事项;html中堆叠层级关系以及图标库的应用，，，另作记录。。。。
菜鸟爬行中，，，，，，，，，，，，

猜你喜欢

转载自blog.csdn.net/h1234561234561/article/details/85699581
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022