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>