div+css初步探索（2)

最新推荐文章于 2024-09-25 16:29:08 发布

czk_love_wyq

最新推荐文章于 2024-09-25 16:29:08 发布

阅读量439

点赞数

分类专栏： div+css

本文链接：https://blog.csdn.net/czk_love_wyq/article/details/41944617

版权

div+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为35px，位于页面水平正中，与浏览器顶部癿距离是30px；),这个容器就是放置我们的导航的盒子

就像以下这样

<html>
<head>
<style type="text/css">
	#nav{
		 width:960px;
		 height:35px;
		 background:#808080;
		 margin:0 auto;
		 margin-top:30px;
		 text-align:center
		 }	
</style>
</head>
<body>
<div id="nav"></div>
</body>
</html>

效果

在div中添加内容

<html>
<head>
<style type="text/css">
	#nav{
		 width:965px;
		 height:35px;
		 background:#808080;
		 margin:0 auto;
		 margin-top:30px;
		 }	
</style>
</head>
<body>
<div id="nav">
	<ul>
		<li>课程1</li>
		<li>课程2</li>
		<li>课程3</li>
		<li>课程4</li>
		<li>课程5</li>
		<li>课程6</li>
	</ul>
</div>
</body>
</html>

效果

在IE中

在火狐中

设置ul的高端和宽度以及li的横向排列

#nav ul{ 
width:960px; 
height:35px; 
}

#nav ul li{
<span style="white-space:pre">	</span>float:left
}

效果

在IE中

在火狐中

可以看到即使设定了ul的宽度，和横向排列后，IE和火狐显示效果还是不一样的。我们加入列表的样式设置（list-style）和垂直居中（line-height）

<html>
<head>
<style type="text/css">
	body,div,ul,li{
		margin:0;
		padding:0;
	}
	#nav{
		 width:965px;
		 height:35px;
		 background:#808080;
		 margin:0 auto;
		 margin-top:30px;
		 }	
	#nav ul{
		width:965px;
		height:35px;
		list-style:none;
	}
	#nav ul li{
		width:100px;
		float:left;
		line-height:35px;
		text-align:center
	}
</style>
</head>
<body>
<div id="nav">
	<ul>
		<li>课程1</li>
		<li>课程2</li>
		<li>课程3</li>
		<li>课程4</li>
		<li>课程5</li>
		<li>课程6</li>
	</ul>
</div>
</body>
</html>

效果

加上超链接设置字体样式大小（font-size）,默认标准文本（text-decoration),并且设置a标签的hover

<html>
<head>
<style type="text/css">
	body,div,ul,li{
		margin:0;
		padding:0;
	}

	#nav{
		 width:965px;
		 height:35px;
		 background:#808080;
		 margin:0 auto;
		 margin-top:30px;
		 }	
	#nav ul{
		width:965px;
		height:35px;
		list-style:none;
	}
	#nav ul li{
		width:100px;
		float:left;
		line-height:35px;
		text-align:center
	}
	#nav ul li a:hover{
		font-size:12px;
		color:#FF4040; 
		text-decoration:none;
	} 
</style>
</head>
<body>
<div id="nav">
	<ul>
		<li><a href="#">课程1</a></li>
		<li><a href="#">课程2</a></li>
		<li><a href="#">课程3</a></li>
		<li><a href="#">课程4</a></li>
		<li><a href="#">课程5</a></li>
		<li><a href="#">课程6</a></li>
	</ul>
</div>
</body>
</html>

效果

之前我们设置了li的宽度100px，但是假设我们的链接很长，那么就会超出宽度，这个时候我们可以去除li的属性width，但是可以设置padding来添加分割

最后我们在设置为标签背景效果

可以看到这样不怎么美观，可以把A标签设置成块状元素，设置和ul同等高度

附上完整代码

<html>
<head>
<style type="text/css">
	body,div,ul,li{
		margin:0;
		padding:0;
	}

	#nav{
		 width:965px;
		 height:35px;
		 background:#808080;
		 margin:0 auto;
		 margin-top:30px;
		 }	
	#nav ul{
		width:965px;
		height:35px;
		list-style:none;
	}
	#nav ul li{
		width:100px;
		float:left;
		line-height:35px;
		text-align:center
	}
	#nav ul li a:hover{
		font-size:12px;
		display:block;
		height:35px;
	} 
	#nav ul li a:hover{
		color:white; 
		text-decoration:none;
		background:black;
	} 
</style>
</head>
<body>
<div id="nav">
	<ul>
		<li><a href="#">课程1</a></li>
		<li><a href="#">课程2</a></li>
		<li><a href="#">课程3</a></li>
		<li><a href="#">课程4</a></li>
		<li><a href="#">课程5</a></li>
		<li><a href="#">课程6</a></li>
	</ul>
</div>
</body>
</html>