博客列表 >12月20作业

12月20作业

春天
春天原创
2019年12月22日 22:06:24578浏览

````目前只能作到这样

代码如下
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul li{list-style:none; cursor:hand;}

  1. #tb{float:left}
  2. #ssk{float:left;}
  3. #db{float:left}
  4. #dht{float:left}
  5. .xtb{float:right }
  6. .dht{float:left}
  7. .dh11{float:left }
  8. .dh12{float:left }
  9. .dh13{float:left }
  10. .dh14{float:left }
  11. .dh15{float:left }
  12. .dh16{float:left }
  13. .tbl{float:left; margin-right:10px}
  14. .tbr{float:left }
  15. a:hover{color:#CC0000}
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20. <div id="db">
  21. <div id="tb"><img src="images/logo.png" width="160" height="76" /></div>
  22. <div id="ssk"><form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form> </div>
  23. <div class="xtb">
  24. <a><img src="images/QQ图片20191222164136.png" width="56" height="54" /></a>
  25. <a><img src="images/QQ图片20191222164520.png" width="54" height="54" /></a>
  26. <a><img src="images/QQ图片20191222164509.png" width="50" height="51" /></a>
  27. <a><img src="images/QQ图片20191222164503.png" width="46" height="51" /></a>
  28. <a><img src="images/QQ图片20191222164456.png" width="47" height="52" />></a>
  29. <a><img src="images/QQ图片20191222164436.png" width="50" height="48" /></a>
  30. </div>
  31. </div>
  32. <div id="dht">
  33. <div class="dht">
  34. <div class="dh11"><img src="images/QQ图片20191222164712.png" width="50" height="53" /></div>
  35. <div class="dh12"><p><ul><li>资讯</li><li>学习</li></ul></p></div>
  36. <div class="dh13"><p><ul><li>器材</li><li>大赛</li></ul></p></div>
  37. <div class="dh14"><p><ul><li>大师</li><li>裤子</li></ul></p></div>
  38. <div class="dh15"><p><ul><li>学院</li><li>影视</li></ul></p></div>
  39. <div class="dh16"><p><ul><li>实战</li><li>其他</li></ul></p></div>
  40. </div>
  41. <div class="dh11"><img src="images/QQ图片20191222164706.png" width="56" height="52" /></div>
  42. <div class="dh12"><p><ul><li>爱好</li><li>姐妹</li></ul></p></div>
  43. <div class="dh13"><p><ul><li>有品</li><li>坦克</li></ul></p></div>
  44. <div class="dh14"><p><ul><li>图片</li><li>气球</li></ul></p></div>
  45. <div class="dh15"><p><ul><li>喝水</li><li>毛绒</li></ul></p></div>
  46. <div class="dh16"><p><ul><li>飞机</li><li>其他</li></ul></p></div>
  47. </div>
  48. <div class="dh11"><img src="images/QQ图片20191222164712.png" width="50" height="53" /></div>
  49. <div class="dh12"><p><ul><li>软件</li><li>技能</li></ul></p></div>
  50. <div class="dh13"><p><ul><li>学习</li><li>富强</li></ul></p></div>
  51. <div class="dh14"><p><ul><li>爱国</li><li>互助</li></ul></p></div>
  52. <div class="dh15"><p><ul><li>敬业</li><li>仁义</li></ul></p></div>
  53. <div class="dh16"><p><ul><li>友善</li><li>其他</li></ul></p></div>
  54. </div>
  55. <div class="dh11"><img src="images/QQ图片20191222164717.png" width="51" height="57" /></div>
  56. <div class="dh12"><p><ul><li>编程</li><li>美女</li></ul></p></div>
  57. <div class="dh13"><p><ul><li>吃饭</li><li>上海</li></ul></p></div>
  58. <div class="dh14"><p><ul><li>周易</li><li>杭州</li></ul></p></div>
  59. <div class="dh15"><p><ul><li>黄山</li><li>北京</li></ul></p></div>
  60. <div class="dh16"><p><ul><li>合肥</li><li>其他</li></ul></p></div>
  61. </div>
  62. </div>
  63. <div>
  64. <div class="tbl"><img src="images/2.jpg" width="898" height="320" /></div>
  65. <div class="tbr"><img src="images/banner-right.jpg" width="295" height="320" /></div>
  66. </div>
  67. </div>
  68. </body>
  69. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议