div+css盒子模型综合案例

接着上午的我接着做了下个综合案例,先看一下效果图

html代码:

<html>

<head>
<link rel="stylesheet" type="text/css" href="borks2.css"/>
</head>
<body>
<!--div在而已起到一个-->
<div class="div1">
<!--ul在布局中作用是可以控制显示内容的多少-->
<ul class="faceul">
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
<li>
<img src="1.jpg" class="img"/>
</li>
</ul>
</div>
</body>
</html>
    CSS代码:
/*外线*/
.div1{
	width:500px;
	height:300;
	border:1px solid blue; 
	margin-left:200px;
}
/*图片*/
.img{
	width:60;
	height:60;
}
/*内线*/
.faceul{
	width:400px;
	height:270px;
	border:1px solid  red;
	margin-left:25px;
	margin-top:13px;
	padding-left:55px;
}
/*内内线*/
.faceul li{
	list-style-type:none;
	float:left;
	width:80;
	height:80;
	border:1px solid red;
	margin-top:6px;
	margin-right:5px;
}
/*内图*/
.faceul li img{
	margin-left:0px;
	margin-top:0px;
	width:80px;
	height:80px;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注