<CSS基础>导航栏制作教程

最新推荐文章于 2023-02-04 17:21:55 发布

陈小二LittleTwo

最新推荐文章于 2023-02-04 17:21:55 发布

阅读量550

点赞数

分类专栏： css 文章标签： CSS 前端

本文链接：https://blog.csdn.net/chen_dayao/article/details/29362485

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近开始巩固前端知识，所以作为一个渣渣还是来写写博客吧。

这是是写一个横向菜单，比较简单，如图所示，

点击时：

开始写内容，首先是基本包含内容：

<pre name="code" class="html"><span style="white-space:pre">	</span><body>
		<div id="div1">
			<ul>
				<li><a href="http://www.swu.edu.cn">首页</a></li>
				<li><a href="http://www.swu.edu.cn">热点</a></li>
				<li><a href="http://www.swu.edu.cn">订阅中心</a></li>
				<li><a href="http://www.swu.edu.cn">手机客户端</a></li>
				<li><a href="http://www.swu.edu.cn">鲜果</a></li>
				
			</ul>
		</div>
	
	</body>

CSS样式:

<span style="white-space:pre">		</span><pre name="code" class="css">*{
		padding:0;
		margin:0;
	}

*内容是为了避免不同浏览器的不同自带格式。

#div1{
		width:960px;
		height:35px;
		background:#999;
		margin:0 auto;
		margin-top:30px;
	}

设置div1格式，即导航栏看到的外部样式，margin:0 auto为居中显示，

margin-top:30px为距离顶部30px

#div1 ul{
		list-style:none;
}

将列表自带样式去除

#div1 ul li{
		float:left;
		color:#000;
		line-height:35px;
		text-align:center;
		margin-right:1px;
	}

line-height设置为和菜单栏一样大小，可将文字垂直居中.

text-align:center则设置文字水平居中。

li为块状元素，都是一行一行的显示，于是我们设置为float:left

a{
		color:#FFF;
		text-decoration:none;
		font-size:12px;
		height:35px;
		display:block;
		padding:0 10px;
	}

a:hover{
<span style="white-space:pre">		</span>text-decoration:underline;
<span style="white-space:pre">		</span>color:#333;
<span style="white-space:pre">		</span>background-color:#900;
<span style="white-space:pre">	</span>}

为a设置样式，以及点击a时的状态，