导航栏布局篇(一、纯css布局)

原创2019-07-10 17:44:2613
摘要:<!DOCTYPE html> <html> <head> <title>导航栏常用布局</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decorati
<!DOCTYPE html>
<html>
<head>
	<title>导航栏常用布局</title>
</head>
<style type="text/css">
	*{margin: 0;padding: 0;}
	a{text-decoration:none;padding:auto 5px;}
	i{border: solid black;border-width: 0 1px 1px 0;display: inline-block;padding: 3px;margin:0 5px 5px 5px;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
	body{width: 100%;height:23px;}
	nav{width: 1280px;height:23px; margin: auto ;background-color: yellow;}
	ul{list-style:none;}
	li{display: inline;margin:0;}
	hr{width: 2px;line-height: 10px;color: pink;margin:2px auto;padding:3px 2px ;display: inline;text-align: center;}
	.left{width: 40%;line-height:22px;background-color: ;float: left;}
	.right{width: 58%;line-height:22px;float: right;text-align: right;}
	a:hover{color:#ff5000;}
	.clear{clear: both;}
</style>
<body>
	<nav>
		<ul class="left">
			<li><a href="#">中国大陆&nbsp;&nbsp;<i></i>&nbsp;</a></li>
			<li><a href="#">亲,请登录</a>&nbsp;</li>
			<li><a href="#">免费注册</a>&nbsp;</li>
			<li><a href="#">手机逛淘宝</a></li>
		</ul>
		<ul class="right">
			<li><a href="#">我的淘宝<i></i></a></li>
			<li><a href="#">购物车<i></i></a></li>
			<li><a href="#">收藏夹<i></i></a></li>
			<li><a href="#">商品分类</a></li>
			<li>&nbsp;<hr>&nbsp;</li>
			<li><a href="#">卖家中心<i></i></a></li>
			<li><a href="#">联系客服<i></i></a></li>
			<li><a href="#">网站导航<i></i></a></li>
		</ul>
	</nav>
	<div class="clear"></div>
</body>
</html>

这里写了一个基本的导航栏布局,难点主要是在于两个,一个是如何把hr标签给竖起来,另一个就是i标签的向下箭头的样式调整,这两个标签的调整着实费了点事。

批改老师:欧阳克批改时间:2019-07-11 13:28:07
老师总结:完成的不错。很多写好的样式,可以保存下来,留着以后用。继续加油。

发布手记

热门词条

第九期线上培训班