盒子模型

最新推荐文章于 2025-12-06 19:48:00 发布

原创最新推荐文章于 2025-12-06 19:48:00 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用CSS进行网页布局的例子，包括一个包含多张图片的列表。通过定义div、ul和li的不同样式属性，实现了特定的视觉效果。

/*div样式*/
.div1{
	border:1px solid red;
	width:300px;
	height:200px;	
	margin-left:150px;
}
/*ul的样式*/
.faceul{
	width:200px;
	height:100px;
	border:1px solid gray;	
	padding-left:5px;
	margin-left:5px;
}
/*li的样式*/
.faceul li{
	list-style-type:none;/*去掉li前的符号*/
	float:left;	/*左浮动*/
	border:1px solid red;
	width:30px;
	height:30px;
	margin-top:5px;
	margin-left:5px;
}
/**/
.faceul img{
	margin-left:3px;
	margin-top:3px;
}

box2.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="box2.css"/>	
</head>	
<body>
<div class="div1">
<ul class="faceul">
<li ><img src="11.png"/></li>	
<li><img src="11.png"/></li>
<li><img src="11.png"/></li>
<li ><img src="11.png"/></li>	
<li><img src="11.png"/></li>
<li><img src="11.png"/></li>
<li ><img src="11.png"/></li>	
<li><img src="11.png"/></li>
</ul>	
</div>	
</body>
</html>