常用导航布局案例和总结理解

Original 2019-04-09 18:15:53 186
abstract:<!doctype html> <html> <head> <meta charset="utf-8"> <title>导航布局</title> <link rel="stylesheet" type="text/css&qu
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>导航布局</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/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">中国大陆&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">我的淘宝<i class="fa fa-angle-down"></i></a>
				<a href=""><span class="fa fa-cart-plus"></span>&nbsp;&nbsp;购物车</a>
				<a href="" class="header_a"><span class="fa fa-star"></span>&nbsp;&nbsp;收藏夹<i class="fa fa-angle-down"></i></a>
				<a href="">商品分类</a>
				<a href="" class="header_a">卖家中心<i class="fa fa-angle-down"></i></a>
				<a href="" class="header_a">联系客服<i class="fa fa-angle-down"></i></a>
				<a href="" class="header_a">网站导航<i class="fa fa-angle-down"></i></a>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div>
		<p>
			模仿淘宝主页最上方导航条学了导航布局。通过在外部连接CSS文件里写了CSS的一些规则,并添加了font awasome图标字体库,为需要图标的地方添加矢量图标。
		</p>
	</div>
</body>
</html>


Correcting teacher:天蓬老师Correction time:2019-04-10 10:31:53
Teacher's summary:做布局一定要有一个全局, 心中要有一个蓝图, 知道每一行代码的作用, 才能写好

Release Notes

Popular Entries