论坛

标题: 第三节 网页制作流程（附源码） [打印本页]
作者: 有时快乐有时悲伤    时间: 2016-1-9 11:30
标题: 第三节 网页制作流程（附源码）
认真跟着老师的步骤学习完了“第三节 网页制作流程”，对DIV非常不熟悉，DW折腾了一番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>无标题文档</title>
  6. <font color="#8b0000"><style type="text/css">
  7. body {
  8.         margin-top: 0px;
  9.         margin-bottom: 0px;
  10. }
  11. #b_00 {
  12.         height: 2507px;
  13.         width: 1094px;
  14.         margin-top: 0px;
  15.         margin-right: auto;
  16.         margin-bottom: 0px;
  17.         margin-left: auto;
  18. }
  19. #b_01 {
  20.         height: 54px;
  21.         width: 1094px;
  22.         margin-top: 0px;
  23. }
  24. #b_02 {
  25.         height: 59px;
  26.         width: 1094px;
  27. }
  28. #b_03 {
  29.         height: 101px;
  30.         width: 1094px;
  31. }
  32. #b_04 {
  33.         float: left;
  34.         height: 729px;
  35.         width: 307px;
  36. }
  37. #b_05 {
  38.         float: left;
  39.         height: 327px;
  40.         width: 246px;
  41. }
  42. #b_06 {
  43.         float: left;
  44.         height: 327px;
  45.         width: 541px;
  46. }
  47. #b_07 {
  48.         float: left;
  49.         height: 432px;
  50.         width: 787px;
  51. }
  52. #b_080 {
  53.         height: 1023px;
  54.         width: 307px;
  55.         float: none;
  56.         margin-top: -30px;
  57.         clear: left;
  58.         position: relative;
  59. }
  60. #b_09 {
  61.         float: right;
  62.         height: 393px;
  63.         width: 787px;
  64.         margin-top: -1023px;
  65.         position: relative;
  66. }
  67. #b_08 {
  68.         height: 154px;
  69.         width: 307px;
  70. }
  71. #b_12 {
  72.         float: left;
  73.         height: 600px;
  74.         width: 787px;
  75.         position: relative;
  76.         margin-top: -630px;
  77.         margin-left: 307px;
  78. }
  79. #b_14 {
  80.         clear: none;
  81.         height: 146px;
  82.         width: 1094px;
  83.         float: right;
  84.         position: relative;
  85.         margin-left: -1094px;
  86.         margin-top: -30px;
  87. }
  88. #b_10 {
  89.         clear: both;
  90.         height: 269px;
  91.         width: 307px;
  92. }
  93. #b_11 {
  94.         height: 244px;
  95.         width: 307px;
  96. }
  97. #b_13 {
  98.         height: 356px;
  99.         width: auto;
  100. }
  101. #b_15 {
  102.         height: 270px;
  103.         width: 1094px;
  104.         clear: both;
  105. }
  106. #b_16 {
  107.         height: 125px;
  108.         width: 1094px;
  109. }
  110. </style></font>
  111. </head>

  113. <body>
  114. <div id="b_00">
  115.         <div id="b_01"><img src="http://i4.tietuku.com/a7d3f528ece1b4d9.jpg" width="1094" height="54" /></div>
  116.         <div id="b_02"><img src="http://i4.tietuku.com/00334194eb9ac1fb.jpg" width="1094" height="59" /></div>
  117.         <div id="b_03"><img src="http://i4.tietuku.com/81f9e16c1e3b19b4.jpg" width="1094" height="101" /></div>
  118.         <div id="b_04"><img src="http://i4.tietuku.com/ed1d281692f0bd9d.jpg" width="307" height="729" /></div>
  119.         <div id="b_05"><img src="http://i4.tietuku.com/42cf9f8ad0f88ec1.jpg" width="246" height="327" /></div>
  120.         <div id="b_06"><img src="http://i4.tietuku.com/2bf0f9ca4a502e4e.jpg" width="541" height="327" /></div>
  121.         <div id="b_07"><img src="http://i4.tietuku.com/ddbbdbca0052ca7f.jpg" width="787" height="432" /></div>
  122.         <div id="b_080">
  123.                 <div id="b_08"><img src="http://i4.tietuku.com/a338c1f50a1c2d89.jpg" width="307" height="154" /></div>
  124.                 <div id="b_10"><img src="http://i4.tietuku.com/db21be5745eb3a59.jpg" width="307" height="269" /></div>
  125.                 <div id="b_11"><img src="http://i4.tietuku.com/92d10306d5ecf7e1.jpg" width="307" height="244" /></div>
  126.                 <div id="b_13"><img src="http://i4.tietuku.com/d8aea40ad0f520dc.jpg" width="307" height="356" /></div>
  127.         </div>
  128.         <div id="b_09"><img src="http://i4.tietuku.com/74282f0db4ef9121.jpg" width="787" height="393" /></div>
  129.         <div id="b_12"><img src="http://i4.tietuku.com/bc51d1c78b7294e5.jpg" width="787" height="600" /></div>
  130.         <div id="b_14"><img src="http://i4.tietuku.com/e179044407a4d4fd.jpg" width="1094" height="146" /></div>
  131.         <div id="b_15"><img src="http://i4.tietuku.com/2eac3fba410af391.jpg" width="1094" height="270" /></div>
  132.         <div id="b_16"><img src="http://i4.tietuku.com/1ea584b49ec7b419.jpg" width="1094" height="125" /></div>
  133. </div>
  134. </body>
  135. </html>
复制代码
        


作者: yuanxi52028    时间: 2016-1-9 17:54
不错，看得出学习是很认真的。

代码写得很工整。整体也完成得不错。

还会用绝对路经调用外部图片。赞一个。
作者: 猫猫大人    时间: 2016-1-9 19:42
我去。。好厉害的样子，，不明觉厉
作者: 求学女子    时间: 2016-1-25 18:17
请问作业JPG如何保存这么长的图片，跨页，截图截不全



欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1