简单的头部导航练习

abstract：<!DOCTYPE html> <html> <head> <title>头部导航练习</title> <style type="text/css"> *{margin: 0px;padding: 0px;} li{list-style: no

<!DOCTYPE html>
<html>
<head>
	<title>头部导航练习</title>

	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		li{list-style: none;}
		a{text-decoration: none;color: #ccc;cursor: pointer;}
		.clear{clear: both;}

		/*浮动:将div向右浮动,然后将div里面的元素向左浮动;不然里面的队列只会向反方向浮动排列的;*/
		/*头部样式*/
		.header{background: #333;width: 100%;height: 40px;}
		.menu{width: 1200px;height: 40px;margin: 0 auto;;line-height: 40px;font-size: 12px;}
		.header_left li{float:left;line-height: 40px; font-size: 13px;}
		.header_right{float: right;}
		.header_right li{float: left;line-height: 40px;font-size: 13px;}
		.menu li span{margin: 0px 10px; color: #6d6c69}
		.header_left a:hover{color:red; }
		.header_right_li{width: 120px;height: 40px;text-align: center;background:#424242;color:#aaa;margin-left: 10px;position: relative;}
		.header_right_li div{position: absolute;width: 270px;height: 80px;background: #fff;right: 0px;display: none;z-index: 2;}
		.header_right_li:hover div{display: block;}
		.header_right_li:hover{background: #fff;}
		.header_right_li:hover a{color: #ff6a00;}
		.header_right li a[href="#"]:hover{color: red;}
	</style>
</head>
<body>
	<div class="header">
		<div class="menu">
			<ul class="header_left">
				<li><a>小米商城</a><span>|</span></li>
				<li><a>MIU</a><span>|</span></li>
				<li><a>IOT</a><span>|</span></li>
				<li><a>云服务</a><span>|</span></li>
				<li><a>小爱分享平台</a><span>|</span></li>
				<li><a>金融</a><span>|</span></li>
				<li><a>有品</a><span>|</span></li>
				<li><a>企业服务</a><span>|</span></li>
				<li><a>SelectRegion</a></li>
			</ul>
			<div class="header_right">
				<ul>
					<li><a href="#">登录</a><span>|</span></li>
	                <li><a href="#">注册</a><span>|</span></li>
	                <li><a href="#">我的订单</a></li>
	                <li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i>&nbsp; 购物车 ( 0 )</a> 
						<div>购物车中还没有商品，赶紧选购吧！</div>
					</li>

				</ul>
			</div>
		</div>
	</div>
</body>
</html>

Correcting teacher：查无此人Correction time：2019-04-16 09:56:01
Teacher's summary：完成的不错。可以把常用的样式，写成公用文件。跟前端框架一样。继续加油。

简单的头部导航练习

Popular Entries