html+css作业2

原创 2018-11-08 15:52:30 301
摘要:<!doctype html> <html> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="css\font-awes
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" href="css\font-awesome-4.7.0\css\font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css\index.css">
</head>
<body>
	<div class="header">
		<div class="header_content">
			<div class="header_left">
				<a href="" class="header_a" >中国大陆&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
				<a href="" style="color: #ff5000">亲,请登录!</a>
				<a href="" >免费注册</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: #ff5000"></i>&nbsp;&nbsp;购物车</a>
				<a href="" class="header_a"><i class="fa fa-star" ></i>&nbsp;&nbsp;收藏夹&nbsp;&nbsp; <i class="fa fa-angle-down"></i></a>
				<a href="">商品分类</a>
				<a style="color: #ccc">&nbsp;&nbsp;|</a>
				<a href="" class="header_a">卖家中心 &nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
				<a href="" class="header_a">联系客服 &nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
				<a href="" class="header_a"><i class="fa fa-align-justify" style="color: #ff5000"></i>&nbsp;&nbsp;网站导航 <i class="fa fa-angle-down"></i></a>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>
*{
	margin:0px;padding: 0px;
}
a{
	text-decoration: none;
	color: #6c6c6c;
	font-size: 13px;
 }	
 li{
 	list-style: none;
 	}
.clear{
			clear: both;
	  }
.header{
	         width: 100%;
	         background-color: #f5f5f5f5;
	   }
.header_top{
				width: 100%;
				height: 40px;
				margin: 0px auto;
				background-color: #fc0f3d;
			}
.header_top_content{
						width: 1200px;
						height: 40px;
						margin: 0px auto;
						background-color: #fc0f3d;
					}
.header_content{
	               	width: 1200px;
	               	/*height: 40px;*/
	               	margin: 0px auto;
	               	line-height: 40px;
      		   }	   
.header_left{
			
				height: 40px;	
				float: left;
			}
.header_left a{
				margin-right: 5px;
              }		
.header_content a:hover{
						color: #ff5000;	
						}              	
.header_right{
				
				height: 40px;
				float: right;
			}	
.header_a{
			display: inline-block;
			height: 40px;
			width: 90px;
			text-align: center;
			position: relative;
		 }					
.header_a:hover{
					background-color: #fff;
				}		 
.header_a ul{
				border: 1px solid #f5f5f5f5;
				display: none;
				border-top: none;
			}
.header_a:hover ul{
					display: block;
					position: absolute;
					width: 100px
				}
.header_a ul li:hover{
						background-color: #f5f5f5f5;
					 }
.header_a ul li{
					color: #6c6c6c;
					line-height: 30px;
					text-align: left;
					padding: 0px 3px;
					margin: 5px 0px;
				}


批改老师:灭绝师太批改时间:2018-11-08 15:57:27
老师总结:还是那句话,要找点小案例做做哦……有问题及时反馈到工单

发布手记

热门词条