[关闭]
@mdjsjdq 2015-09-29T01:14:05.000000Z 字数 1903 阅读 1937

动态页面快速设计

HTML 编程


DIV 是网页设计设计的核心

DIV标签

DIV元素:是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字、图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。

iPad Air

01

DIV 代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>DIV</title>
  6. </head>
  7. <body style="background:#FF9">
  8. <div style="width:40px;height:40px;margin-bottom:10px;background:#00F" >
  9. </div>
  10. <div style="width:40px;height:40px;margin-bottom:10px;background:#F00">
  11. </div>
  12. <div style="width:40px;height:40px;margin-bottom:10px;background:#0F0">
  13. </div>
  14. <!--默认的HTML代码是block的,现在我们要它浮动起来,现在他们是占据了一整行而不会换行-->
  15. <hr />
  16. <div style="width:80px;height:80px;margin-right:10px;background:#00F;float:left;overflow:hidden">
  17. </div>
  18. <div style="width:80px;height:80px;margin-right:10px;background:#F00;float:left;overflow:hidden">
  19. </div>
  20. <div style="width:80px;height:80px;margin-right:10px;background:#0F0;float:none;overflow:hidden">
  21. </div>
  22. <!--现在往里面添加图片-->
  23. <hr />
  24. <div style="width:80px;height:80px;margin-right:10px;background:#00F;float:left;overflow:hidden">
  25. <img src="http://img3.imgtn.bdimg.com/it/u=423290804,2569925989&fm=21&gp=0.jpg" alt="Picture" />
  26. </div>
  27. <div style="width:80px;height:80px;margin-right:10px;background:#F00;float:left;overflow:hidden">
  28. <img src="http://img5.imgtn.bdimg.com/it/u=3053840139,4109911854&fm=21&gp=0.jpg" alt="Picture" />
  29. </div>
  30. <div style="width:80px;height:80px;margin-right:10px;background:#0F0;float:none;overflow:hidden">
  31. <img src="http://img5.imgtn.bdimg.com/it/u=2919540825,2281022748&fm=21&gp=0.jpg" alt="Picture" />
  32. </div>
  33. <hr />
  34. <img src="http://img4.imgtn.bdimg.com/it/u=4051518179,3328976343&fm=21&gp=0.jpg" width="1366" />
  35. <img src="1.jpg" width="1366">
  36. </body>
  37. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注