利用CSS样式调整列表布局

在实际的前端网页开发中，以列表的形式显示内容是一门必修的功课。特别是以uI控件嵌套多个li控件成为列表显示的标配。为了让读者由浅入深地了解列表显示的界面优化，我们首先不添加任何CSS样式，直接输入下方的代码。每一个项目中应包含图片、标题及具体内容。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>下拉列表测试</title>
</head>
<body>
	<ul>
		<li>
			<div>
				<img alt="项目1" src="images/bigben200.png">
				<p>项目1</p>
			</div>
			<div><p>我家的花瓶</p></div>
		</li>
		<li>
			<div>
				<img alt="项目2" src="images/colosseum200.png">
				<p>项目2</p>
			</div>
			<div><p>谁的眼泪在飞</p></div>
		</li>
		<li>
			<div>
				<img alt="项目1" src="images/egypt200.png">
				<p>项目3</p>
			</div>
			<div><p>主要内容</p></div>
		</li>
		<li>
			<div>
				<img alt="项目4" src="images/eiffel200.png">
				<p>项目4</p>
			</div>
			<div><p>家庭聚会</p></div>
		</li>
		<li>
			<div>
				<img alt="项目5" src="images/liberty200.png">
				<p>项目5</p>
			</div>
			<div><p>维也纳新年音乐会</p></div>
		</li>
	</ul>
</body>
</html>

当读者参照上述的代码进行编写之后，在浏览器上的显示效果如下：

从上图的网页运行结果可以看出，列表都靠左显示，且该列表中的每一个项目都有默认的项目符号。这样的显示非常不美观，尤其是对网页审美要求极高的客户。因此，首先通过CSS样式去掉左边的项目符号。

li {
    list-style-type: none;
}

其次为列表中的每个项目设置背景颜色和宽度、高度等，并使项目能够横向显示。

li {
    list-style-type: none; /*不显示项目符号*/
    width: 300px; /*设置宽度为300px*/
    height: 300px; /*设置高度为300px*/
    float: left; /*为了使列表中的各个项目能够横向显示，CSS中的float设为left*/
    border-radius: 10px; /*圆角矩形半径为10px*/
    background: linear-gradient(#eeeeee, #f3f3f3);/*设置背景颜色*/
    margin-right: 10px; /*设置项目的右边缘为10px*/
    margin-bottom: 10px; /*设置项目的下边缘为10px*/
    text-align: center; /*使项目中的图片、文字能居中显示*/
}

添加了CSS后，网页的效果如下图：

假如我们要实现这样一个效果：当鼠标移动到每一个项目时，该项目会自动切换到其简介上来。因此，首先，我们有必要对一些div标签进行归类。假设鼠标移动前和鼠标移动后的标签分别为div1和div2。

<ul>
	<li>
		<div class="div1">
			<img alt="项目1" src="images/bigben200.png">
			<p>项目1</p>
		</div>
		<div class="div2"><p>我家的花瓶</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目2" src="images/colosseum200.png">
			<p>项目2</p>
		</div>
		<div class="div2"><p>谁的眼泪在飞</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目1" src="images/egypt200.png">
			<p>项目3</p>
		</div>
		<div class="div2"><p>主要内容</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目4" src="images/eiffel200.png">
			<p>项目4</p>
		</div>
		<div class="div2"><p>家庭聚会</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目5" src="images/liberty200.png">
			<p>项目5</p>
		</div>
		<div class="div2"><p>维也纳新年音乐会</p></div>
	</li>
</ul>

修改网页中的CSS样式如下：

li {
    list-style-type: none; /*不显示项目符号*/
    width: 300px; /*设置宽度为300px*/
    height: 300px; /*设置高度为300px*/
    float: left; /*为了使列表中的各个项目能够横向显示，CSS中的float设为left*/
    border-radius: 10px; /*圆角矩形半径为10px*/
    background: linear-gradient(#eeeeee, #f3f3f3);/*设置背景颜色*/
    margin-right: 10px; /*设置项目的右边缘为10px*/
    margin-bottom: 10px; /*设置项目的下边缘为10px*/
    text-align: center; /*使项目中的图片、文字能居中显示*/
    position: relative; /* 这是div2的父组件，目的是使div2下方具有绝对位置的子组件都能相对于此显示 */
}

.div2 {
	position: absolute; /* 使div能相对于li显示 */
	background: linear-gradient(#eeeeee, #f3f3f3);
	width: 100%;
	height: 100%;
	border-radius: 10px;
	left: 0px;
	top: 0px;
        opacity: 0; /*不透明度为0*/
}

li:hover .div2 {  /*div2类必须是li的子组件*/
	opacity: 1;
}

以上代码参考了利用纯CSS实现下拉菜单的代码，相信有前端开发基础的人一定会读懂其中的含义。如果你对前端开发一窍不通，那么你得从头到尾敲以上代码，这样才能达到熟能生巧的目的。

利用CSS样式调整列表布局

猜你喜欢