css笔记17：盒子模型加强版的案例

1.先看看经典案例效果图，导出思路：

分析：思路

基本结构

<div>

<ul>

…………

</ul>

</div>

2.案例演示：

（1）box2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型加强</title>
<link rel="stylesheet" type="text/css" href="box2.css" />
</head>

<body>
<div class="div1">
<!--ul在布局中可以控制显示内容的多少-->
<ul class="faceul">

<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
</ul>

</div>
</body>
</html>

（2）box2.css

@charset "utf-8";
/* CSS Document */

.div1 {
    width:500px;
    height:600px;
    border:1px solid gray;
}

.faceul{
    width:400px;
    height:550px;
    border:1px solid red;
    padding:5px;
    margin:10px;
}

.faceul li {
    list-style-type:none;
    float:left;/*左浮动*/
    width:55px;
    height:55px;
    border:1px solid red;
    margin-right:5px;
    margin-top:5px;
}

.faceul li img {
    width:50px;
    height:50px;
    margin-left:5px;
    margin-top:5px;
}

效果图：

这时候我们再次回顾当初盒子模型图，印象就更深了：