css3下拉菜单效果

原创 2018-12-07 15:04:03 238
摘要:<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>常用布局导航案例</title> <link rel="shortcun icon" type="image
<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用布局导航案例</title>
		<link rel="shortcun icon" type="image/x-icon" href="images/tao.png">
		<link rel="stylesheet" type="text/css" href="css/daohang.css">
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
	</head>
	<body>
		<div class="header">
			<div class="header_content">
				<div class="header_left">
					<a href="" class="header_a" style="color:black">中国大陆&nbsp;&nbsp;<i class=" fa fa-angle-down"></i></a>
					<a href="" style="color:#F22E00">亲,请登录</a>
					<a href="">免费注册&nbsp;&nbsp;&nbsp;</a>
					<a href="">手机逛淘宝</a>
				</div>
				<div class="header_right">
					<a href="" class="header_a">我的淘宝&nbsp;&nbsp;<i class="fa fa-angle-down"></i>
						<ul>
							<li>已买到的宝贝</li>
							<li>我的足迹</li>
						</ul>
					</a>
					<a href=""><i class="fa fa-cart-plus" style="color:#F22E00"></i>&nbsp;购物车&nbsp;<span class="fa fa-angle-down"></span></a>
					<a href="" class="header_a">&nbsp;<i class="fa fa-star"></i>&nbsp;收藏夹&nbsp;<span class="fa fa-angle-down"></span>&nbsp;
						<ul>
							<li>收藏的宝贝</li>
							<li>收藏的店铺</li>
						</ul>
					</a>
					<a href="">&nbsp;&nbsp;商品分类
						<div class="shuxian"></div>
					</a>
					<a href="" class="header_a">卖家中心&nbsp;<span class="fa fa-angle-down">&nbsp;</span>
						<ul>
							<li>免费开店</li>
							<li>已卖出的宝贝</li>
							<li>出售中的宝贝</li>
							<li>卖家服务市场</li>
						</ul>
					</a>
					<a href="" class="header_a">联系客服&nbsp;<span class="fa fa-angle-down"></span></a>
					<a href="" class="header_a"><i class="fa fa-reorder" style="color:#F22E00">&nbsp;</i>网站导航&nbsp;<span class="fa fa-angle-down"></span>
						<div class="table_1">
							<div class="table_1_1">
								<table>
									<tr>
										<td colspan="4" style="color:red; font-size:20px">主题市场</td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
									<tr>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
										<td><a href="">女装</a></td>
									</tr>
								</table>
							</div>
							<div class="table_1_1"></div>
							<div class="table_1_1"></div>
							<div class="table_1_1"></div>
					    </div>
					    <div class="clear"></div>
					</a>
				</div>
			</div>
			<div class="clear">
			</div>
		</div>
	</body>
</html>
*{margin:0px; padding:0px;}
a{text-decoration:none; color:#6C6C6C; font-size:13px; line-height:36px;}
li{list-style:none;}
.table_1{display:none;}
.clear{clear:both;}
.header{width:100%; background-color:#F5F5F5;}
.header_content{width:1200px; margin: 0px auto;}
.header_left{height:36px; float:left;}
.header_left a{margin-left:5px;}
.header_content a:hover{color:#FF4400;}
.header_right{height:36px; float:right;}
.header_a{display:inline-block; width:80px; height:36px; text-align:center; position:relative;}
.shuxian{display:inline-block; width:13px; height:13px; border-right:1px solid #DEDEE3;}
.header_a:hover{background-color:#FFFFFF;}
.header_a ul{border:1px solid #F5F5F5;display:none; border-top:none;}
.header_a:hover ul{display:block; position:absolute;width:90px; }
.header_a ul li:hover{background-color:#F5F5F5;}
.header_a ul li{height:27px; line-height:27px; color:#6C6C6C; text-align:left; padding:0px 3px; margin:5px 0px;}
.table_1{width:1195px; height:305px; position:absolute; right:0px;}
.header_a:hover .table_1{display:block;}
.table_1_1{width:296.75px; height:305px; border:1px solid #F5F5F5; margin:0px; float:left; border-top:none;}
.table_1_1 table{width:296.75px;  height:305px;padding:0px 10px;}
.table_1_1 a{display:inline-block;width:30px; height:25px; line-height:25px; }
.table_1_1 a:hover{background:#FF5500; color:#FFFFFF;}

不知道是我基础掌握的不好的原因吗,总想不起来什么地方该用什么方式来实现效果,只会按部就班的按老师的课程走

批改老师:灭绝师太批改时间:2018-12-07 15:17:36
老师总结:其实知识点运用的不错,就是布局的时候对于标签的运用不是很熟练,关于案例不要着急,后面有大案例等着你

发布手记

热门词条