css

.divli{
    width:500;
    height:300px;
    border:1px solid gray;
    margin-left:100px;

}

.faceul{
    width:400px;
    height:250px;
    border:1px solid red;
    padding-left:5px;
    margin-left:10px;
}
.faceul li{
    list-style-type:none;
    float:left;  /**向上浮動*/
    width:50px;
    height:52px;
    border:1px solid red;
    margin-right:10px;
    margin-top:5px;
}
.faceul li img{
    margin-top:10px;
    width:40px;
    height:40px;    
}
 

html

</div>
<h4>盒子模型二</h4>
<br/>
<!--  divli 在布局起到一個控制整個內容顯示位置-->
<div class="divli">
<!--  ul 在布局起顯示內容是多少-->
<ul class="faceul">
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
<li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
</ul>

</div>
 

css盒子學習記錄