html文件：
<html>
<head>
<title>盒子模型</title>
<link rel="stylesheet" type="text/css" href="box.css"/>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
<li><img src="mowenwei.jpg"/></li>
</ul>
</div>
</body>
</html>
css文件：
.div1{
/*控制灰色边框*/
width:775px;
height:450px;
border:1px solid gray;
}
.faceul{
/*控制红色边框*/
width:725px;
height:400px;
border:1px solid red;
padding-left:0px;
/*默认ul语句会在左边空出一部分*/
margin-left:25px;
margin-top:25px;
}
.faceul li{
/*控制蓝色边框*/
list-style-type:none;
/*去掉li语句前面的小圆圈*/
float:left;
/*li语句默认纵向排列，使其横向排列*/
width:100px;
height:100px;
border:1px solid blue;
margin-left:15px;
margin-top:15px;
}
.faceul li img{
/*控制图片*/
margin-left:10px;
margin-top:10px;
width:80px;
height:80px;
}
显示效果：
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
