学习笔记(5)：DIV+CSS 经典盒子模型 积累

盒子模型的效果：

调整faceul的宽，可以调整每一排摆放的数目，调整div1的margin值，可以改变整体的位置，这是很有用的布局模式

===========================================================

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="demo1.css"/>

  </head>

  <body>
      <div class="div1"> <!--起到控制总体位置的作用-->
         <ul class="faceul"> <!--可以控制显示内容的多少-->
            <li><img src="1.jpg"/></li>
            <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>

           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>

           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>
           <li><img src="1.jpg"/></li>
      </ul>
   </div>
</body>
</html>

================================================

CSS代码：

*{
margin:0px;
padding:0px;
}
.div1{
width:500px;
height:300px;
border:1px solid gray;
}

.faceul{
width:420px;
height:250px;
border:1px solid red;
}

.faceul li{
list-style-type:none;
float:left;
width:70px;
height:50px;
border:1px solid red;
margin-left:5px;
margin-top:5px;
}

.faceul img{
width:60px;
height:40px;
margin-left:5px;
margin-top:5px;
}

 

posted on 2013-06-15 09:56  Creater  阅读(226)  评论(0)    收藏  举报

导航