查看: 474|回复: 0

[HTML代码] css盒子学习记录

发表于 2018-4-5 08:00:01

css盒子学习记录

css

  1. .divli{
  2. width:500;
  3. height:300px;
  4. border:1px solid gray;
  5. margin-left:100px;
  6. }
  7. .faceul{
  8. width:400px;
  9. height:250px;
  10. border:1px solid red;
  11. padding-left:5px;
  12. margin-left:10px;
  13. }
  14. .faceul li{
  15. list-style-type:none;
  16. float:left; /**向上浮动*/
  17. width:50px;
  18. height:52px;
  19. border:1px solid red;
  20. margin-right:10px;
  21. margin-top:5px;
  22. }
  23. .faceul li img{
  24. margin-top:10px;
  25. width:40px;
  26. height:40px;
  27. }
复制代码

html

  1. </div>
  2. <h4>盒子模型二</h4>
  3. <br/>
  4. <!-- divli 在布局起到一个控制整个内容显示位置-->
  5. <div class="divli">
  6. <!-- ul 在布局起显示内容是多少-->
  7. <ul class="faceul">
  8. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
  9. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
  10. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
  11. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
  12. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
  13. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
  14. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
  15. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
  16. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
  17. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
  18. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/4.jpg"/>
  19. <li><img width="100px" high="100px" src="C:/Users/lw/Pictures/1.jpg"/>
  20. </ul>
  21. </div>
复制代码


回复

使用道具 举报