1、齊博CMS：（菜鳥教程）學習制作模板（一）第一個div的建立本教程適合新新手使用，高手或已經知道的請飄過，如果你有心請幫助修正。 教程編寫：toopd 一、首先我們先寫一個div層 <div></div> Html中任何都是相對出現的，所以就成為上面的形式，后面的那一個多一個/。 現在我們知道上面這個層，是沒有任何內容，在網頁中打開也沒有顯示。下一步就是要我們對其進行修飾一下，讓其在網頁中顯示出來。 二、我們為div層加上一個邊框，并設置一下他的寬度 <div style=" border:1px solid #ccc; width:30%;"

2、></div> 說明：上面的樣式的意思是邊框寬度為1px；實線邊框；邊框顏色為灰色（你也可以用具體的顏色） 層的寬度為30% 這樣這個div就有了一個形象的概念顯示在我們的面前了。 三、充實內容，我們為div內添加兩個一上一下的層 <div style="border:1px solid #ccc; width:30%;"> <div></div> <div></div> </div> 四、我們分別為這兩個層添加樣式 <div style="border:1px sol

3、id #ccc; width:30%;"> <div style=" border:1px solid #fff;"></div> <div style="padding:6px;"></div> </div> 我們分別再介紹一下這兩個樣式的含義： 第一個：border:1px solid #fff：這個就不用介紹了，上面已經做了介紹，只不過邊框顏色是白色； 第二個：padding：檢索或設置對象四邊的補丁邊距。你可以分別設置四邊不同的邊距，如padding:2px 3px 6p

4、x 5px（如果提供全部四個參數值，將按上右下左的順序作用于四邊，如果只提供一個，將用于全部的四條邊。），通過設置邊距，在這個層中的內容，將按照你設置的不同的邊距，離邊框產生不同的距離。 五、添加內容，設置內容的字體、顏色、樣式等 復制代碼 1. <div style="border:1px solid #ccc;width:30%;"> 2. <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-heig

5、ht:30px;background-color: #ccc">最新新聞</div> 3. <div style="padding:6px;">php168新版即將發布</div> 4. </div> 說明： color:字體顏色; font-weight:粗體; Padding-left:檢索或設置對象左邊的邊距； height:層的高度; line-height:字體的間距，在這里設置字體的間距是為了讓字體垂直居中，所以取值與層的高度是一致的，他只對只有一行的文字有效; background-color:背

6、景顏色。 通過上面的設置，一個簡單的div層就建立起來了。最終效果： 最新新聞php168新版即將發布齊博CMS：（菜鳥教程）學習制作模板（二）兩個div層并排顯示一、一個div的代碼 復制代碼 1.2. <div style="border:1px solid #ccc;width:30%;"> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color

7、: #ccc">最新新聞</div> <div style="padding:6px;">php168新版即將發布</div> </div>  二、再復制一個 <div style="border:1px solid #ccc;width:30%;"> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line

8、-height:30px;background-color: #ccc">最新新聞</div> <div style="padding:6px;">php168新版即將發布</div> </div> <div style="border:1px solid #ccc;width:30%;"> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height

9、:30px;line-height:30px;background-color: #ccc">最新新聞</div> <div style="padding:6px;">php168新版即將發布</div> </div> 現在上面是兩個豎排的了，下一步是要成為橫排的 三、設置為橫排 <div style="width:100%;"><div style="border:1px solid #ccc;width:49.8%;float: left">

10、<div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color: #ccc">最新新聞</div> <div style="padding:6px;">php168新版即將發布</div> </div> <div style="margin-left: 5px; border:1px soli

11、d #ccc;width:49.8%;float: right "> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color: #ccc">最新新聞（二）</div> <div style="padding:6px;">php168新版即將發布</div> </div> </di

12、v> 設置為兩個橫排的，在兩個外面再加上一個div，并設置寬度。 里面兩個div第一個添加樣式float: left（對象浮在左邊），第二個添加樣式為float: right（對象浮在右邊）。 兩個div的寬度設置各為49.8%。 在第二個的樣式加添加margin-left: 5px（檢索或設置對象左邊的外延邊距），以與前一個（也就是左邊的）有5px的間距。 相關教程：最后效果： 最新新聞php168新版即將發布最新新聞（二）php168新版即將發布齊博CMS：（菜鳥教程）學習制作模板（三）將頭部背景顏色改為圖片一、div的代碼 復制代碼 1.2. <div style="

13、;border:1px solid #ccc;width:30%;"> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color: #ccc">最新新聞</div> <div style="padding:6px;">php168新版即將發布</div> </div> 

14、0;   二、將上面代碼中的頭部的背景顏色修改為圖片顯示 <div style="border:1px solid #ccc;width:30%;"> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color: #ccc">最新新聞</div> <div style="padding:6px

15、;">php168新版即將發布</div> </div>   也就是將紅色部分修改為圖片，因為我們是在論壇上，所以就使用論壇上的圖片來添加。 論壇各版塊的頭部圖片的地址是：我們將上面的代碼修改為： <div style="border:1px solid #ccc;width:30%;"> <div style="border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-he

16、ight:30px;background: url( :/bbs.php168 /images/php168/head.gif) repeat-x;">最新新聞</div> <div style="padding:6px;">php168新版即將發布</div> </div>   也就是將上面的background-color: #ccc修改為background: hp168 /images/php168/head.gif) repeat-x。然后在后面添加一個參數，設置是否重復顯示。 說

17、明： 如果圖片地址與模板文件在同一目錄，你可以用相對路徑，即：background: url(head.gif) repeat-x：背景圖像在橫向上平鋪 其它參數說明： repeat : 背景圖像在縱向和橫向上平鋪 no-repeat : 背景圖像不平鋪 repeat-x : 背景圖像在橫向上平鋪 repeat-y : 背景圖像在縱向平鋪 在線語錄吧齊博CMS：（菜鳥教程）學習制作模板（四）初識html前三節，我們認識了div，現在我們將綜合應用一下 先來認識html的結構 復制代碼 1.2.  <!DOCTYPE html PUBLIC "-/W3C/DTD XHT

18、ML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <html xmlns=" :/ /1999/xhtml"> 4. <head> 5. </head> 6. <body> 7. </body> 8. </html> 9.HTML的結構標志向瀏覽器提供了文檔特性的信息，比如文檔的版本，介紹性信息、標題等。結構標志是HTML標志的一部分，但是大部分不在

19、瀏覽器里顯示出來。而是在幕后工作，指示瀏覽器要放上哪些元素和如何顯示出這些元素來，以及告訴瀏覽器如何解釋文檔的重要信息。所有的HTML都應該包括有五個結構標志。如圖所示： 在線語錄吧一、<!DOCTYPE>標志 <!DOCTYPE.>標志向瀏覽器（和驗證服務）說明文檔遵循的HTML版本。HTML3.2和4.0規范都要求文檔輸入此標志。因此需要將其放到所有的網頁文檔中，輸入在文檔的開頭。如： <!DOCTYPE HTML PUBLC "-/W3C/DTD HTML 3.2 FINAL/EN"> 或 <!DOCTYPE HTML PUB

20、LC "-/W3C/DTD HTML 4.0 FINAL/EN"> 二、<html>標志 <HTML>標志表示該文檔為HTML文檔。技術上，這個標志在<!DOCTYPE.>標志之后顯得多余，但對不支持<1DOCTYPE.>標志的舊式瀏覽器，這個標志是必要的。能夠幫助人們閱讀HTML代碼。<HTML>有開始標志與結束標志組成。開始標志位于<IDOCTYPE.>的后面。例如： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML 4.0 FINAL/EN"

21、;> <HTML> <HEAD>> </HEAD> <BODY> </BODY> </HTML> 三、<HEAD>標志 <HEAD>標志中包含文檔的標題，文檔使用的腳本，樣式定義和文檔名信息。瀏覽器希望從<HEAD>中找到文檔的補充信息。此外，<HEAD>標志還可以包含有搜索工具和索引程序所要的其它信息的標志。<HEAD>位于<HTML>間。例如： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML

22、4.0 FINAL/EN"> <HTML> <HEAD>> </HEAD> </HTML> 四、TITLE>標志 <TITLE>是HTML3.2和4.0規范要求的。它包含文檔的標題。它不顯示在瀏覽器窗口中，只顯示在瀏覽器標題欄中。在起始標志（<TITLT>）和結束標志(</TITLE>)間，可以放入簡述文檔內容的標題。位于<HEAD>標志中，如下例： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML 4.0 FINAL/EN&qu

23、ot;> <HTML> <HEAD>> <title>學習TITLE標志</title> </HEAD> </HTML> 五、<BODY>標志 <BODY>標志中放置了要在訪問者瀏覽器中顯示信息的所有標志和屬性。如下例： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML 4.0 FINAL/EN"> <HTML> <HEAD>> <title>學習TITLE標志</title>

24、 </HEAD> <BODY> <font size="14" color="green">HTML腳本基礎學習</font> </BODY> </HTML> 以上為THML瀏覽器的概述和結構說明齊博CMS：（菜鳥教程）學習制作模板（五）外鏈樣式表通常在網頁中樣式表的調用方法有四種。 第一是外鏈，即<link rel="StyleSheet" href = "style.css">的形式； 第二是輸入樣式表； 第三是在網頁頭部申明，

25、如<head> <style type="text/css">.； 最后是直接在對象后寫樣式，即<div style = "width:80%.;">的形式。 我們在本節中只講外鏈形式 一、先將第一節中的div中的樣式移植出來，并將內綴樣式修改為類形式 代碼如下： 復制代碼 1.2. <div style="border:1px solid #ccc;width:30%;"> 3. <div style="border:1px solid #fff;color:#fff;

26、 font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color: #ccc">最新新聞</div> 4. <div style="padding:6px;">php168新版即將發布</div> 5. </div>   將上面網頁代碼中的樣式（style）修改成類（class）如下： 引用 <div class="div"> <div class="hea

27、d">最新新聞</div> <div class="content">php168新版即將發布</div> </div> 然后將樣式表記錄整理如下： 引用 /* 下面是最外面的div */  .div     border:1px solid #ccc;     width:30% /* 下面是頭部的樣式，即“最新新聞” */  .div .head     border:1px solid

28、#fff;     color:#fff;     font-weight:bold;     padding-left:15px;     height:30px;     line-height:30px;     background-color: #ccc   /* 下面是內容處的樣式，即“php168新版即將發布” */  .div .content    

29、 padding:6px; 說明： /* 下面是內容處的樣式，即“php168新版即將發布” */  上面的文字在樣式表中出現，只起到注釋的作用，而不會對網頁布局有任何影響。 二、將上面修改后的網頁代碼添加到網頁中，并保存樣式表，命名為style.css（假設樣式表文件放在images文件夾中） 引用   <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

30、t;> <html xmlns=" :/ /1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="images/style.css"> </head> <body> <div class="div"> <div class="head">最新新聞</div> <div class=&

31、quot;content">php168新版即將發布</div> </div> </body> </html> 上面“<link rel="stylesheet" type="text/css" href="images/style.css">”，即外鏈樣式表文件的地址，需要添加到head之間。這樣我們就完成了外鏈樣式表的任務。 三、外鏈樣式表的好處 第一，簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼

32、數量(因為重復設置的格式將被只保存一次)。  第二，只要修改保存著網站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。避免了一個一個網頁的修改，大大減少了重復勞動的工作量。 四、說明 什么是class：class是設置標簽的類。 齊博CMS：（菜鳥教程）學習制作模板（六）樣式表應具備的基本要素前一節，我們學習了外鏈樣式表的方法，但我們的樣式表中還需要添加一些基本的要素，比如通用的樣式和鏈接樣式；控制整個網頁的寬度等等。 一、通用樣式 復制代碼 1.2.3. /* 4. width:網頁寬度 5. margin:網頁外延邊距 6. padd

33、ing: 0;設置內邊距空隙都為0 7. font-size: 12px;沒有鏈接的字體大小 8. color: #333333;沒有鏈接的字體的顏色 9. */ 10. body 11.     width:990px; 12.     margin:auto; 13.     padding: 0; 14.     font-size: 12px; 15.     color: #333333; 16. 17.二、通用鏈接樣式 復制代碼 1.

34、2.  /* 3. font-size: 12px;超級鏈接字體大小 4. color:字體顏色 5. text-decoration: none;沒有下畫線.要有下畫線.改none為underline 6. a 為統一超級鏈接, 7. a:link沒有點擊過的超級鏈接樣式 8. a:visited 被點擊過的超級鏈接樣式 9. a:hover 鼠標指向時的超級鏈接樣式 10. a:active 被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式.少用 11. */ 12. a 13.  font-size: 12px; 14. 15. a:link 16.  

35、color: #333333; 17.  text-decoration: none; 18. 19. a:visited 20.  text-decoration: none; 21.  color: #333333; 22. 23. a:hover 24.  text-decoration: underline; 25.  color: #4E667B; 26. 27. a:active 28.  text-decoration: none; 29. 30. #header 31.  width:990px; 32. 三

36、、最后，我們與上節的樣式合并在一起。 復制代碼 1.2.  /* 3. width:網頁寬度 4. margin:網頁外延邊距 5. padding: 0;設置內邊距空隙都為0 6. font-size: 12px;沒有鏈接的字體大小 7. color: #333333;沒有鏈接的字體的顏色 8. */ 9. body 10.     width:990px; 11.     margin:auto; 12.     padding: 0; 13.     font

37、-size: 12px; 14.     color: #333333; 15. 16.  /* 17. font-size: 12px;超級鏈接字體大小 18. color:字體顏色 19. text-decoration: none;沒有下畫線.要有下畫線.改none為underline 20. a 為統一超級鏈接, 21. a:link沒有點擊過的超級鏈接樣式 22. a:visited 被點擊過的超級鏈接樣式 23. a:hover 鼠標指向時的超級鏈接樣式 24. a:active 被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式.少用 2

38、5. */ 26. a 27.  font-size: 12px; 28. 29. a:link 30.  color: #333333; 31.  text-decoration: none; 32. 33. a:visited 34.  text-decoration: none; 35.  color: #333333; 36. 37. a:hover 38.  text-decoration: underline; 39.  color: #4E667B; 40. 41. a:active 42.  tex

39、t-decoration: none; 43. 44. #header 45.  width:990px; 46. 47. /* 48. 下面是最外面的div 49. */ 50. .div 51.     border:1px solid #ccc; 52.     width:30% 53. 54. /* 55. 下面是頭部的樣式，即“最新新聞” 56. */ 57. .div .head 58.     border:1px solid #fff; 59.   

40、0; color:#fff; 60.     font-weight:bold; 61.     padding-left:15px; 62.     height:30px; 63.     line-height:30px; 64.     background-color: #ccc 65. 66.   67. /* 68. 下面是內容處的樣式，即“php168新版即將發布” 69. */ 70. .div .content 71

41、.     padding:6px; 72. 這樣就組成了一個相對完整的樣式表了，當然還有其它一些通用的樣式，需要你慢慢的添加完整。 齊博CMS：（菜鳥教程）學習制作模板（七）實戰：簡單的三列布局簡單的三列布局，通過以上各節的學習，應該能看明白，和兩個DIV并列顯示的道理是一樣的。 一、為了能夠說明問題，對照參看，下面樣式采用的是網頁頭部申明形式 第一是外鏈，即<link rel="StyleSheet" href = "style.css">的形式； 第二是輸入樣式表； 第三是在網頁頭部申明，如<head

42、> <style type="text/css">.； 最后是直接在對象后寫樣式，即<div style = "width:80%.;">的形式。 即用的第三種形式 復制代碼 1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> 2. <HTML> 3. <HEAD> 4. <TITLE>簡單的三列布局</T

43、ITLE> 5. <style type="text/css"> 6. body 7. width:800px; 8. margin:auto; 9. 10. div 11.  height:150px; 12. 13. .left 14. width:150px; 15. float:left; 16. clear:right; 17. border:1px solid #ff9900; 18. margin-top:5px; 19. 20. .center 21. width:485px; 22. float:left; 23. clear:

44、right; 24. border:1px solid #ff9900; 25. margin:5px 5px 0 5px; 26. 27. .right 28. width:150px; 29. float:left; 30. clear:right; 31. border:1px solid #ff9900; 32. margin-top:5px; 33. 34. .head 35. width:100%; 36. clear:both; 37. border:1px solid #ff9900;  38.    39. .foot 40. width:100

45、%; 41. clear:both; 42. border:1px solid #ff9900; 43. margin-top:5px; 44. 45. </style> 46. </HEAD> 47. <BODY> 48. <div class="head">頭部</div> 49. <div class="left">左側</div> 50. <div class="center">中側</div> 51. <div

46、class="right">右側</div> 52. <div class="foot">尾部</div> 53. </BODY> 54. </HTML> 說明：clear:both; 是清除浮動。 二、為什么要清除浮動，轉載一篇文章，你看看就明白了 引用 在進行浮動布局時，大多數人都深知，在必要的地方進行浮動清理：<div style=”clear:both;”></div>。 例如： <div style=”background:#666;”> &#

47、160;     <div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div> </div> 此時預覽此代碼，我們會發現最外層的父元素float container,并沒有顯示。這是因為子元素因進行了浮動，而脫離了文檔流，導致父元素的height為零。 若將代碼修改為： <div style=”background:#666;”> <div style=”float:left; width:30

48、%; height:40px;background:#EEE; “>Some Content</div> <div style=”clear:both”></div> </div> 注意，多了一段清理浮動的代碼。這是一種好的CSS代碼習慣，但是這種方法增加了無用的元素。這里有一種更好的方法，將HTML代碼修改為： <div  class=”clearfix” style=”background:#666;”> <div style=”float:left; width:30%; height:40px;backg

49、round:#EEE; “>Some Content</div> </div> 定義CSS類，進行“浮動清理”的控制： Code: .clearfix:after   content: “.”;   clear: both;   height: 0;   visibility: hidden;   display: block; 這是對Firefox進行的處理，因為Firefox支持生成元素，而IE所有版本都不支持生成元素 .clearfix   display: inline-block; &

50、#160;                 /* 這是對 Mac 上的IE瀏覽器進行的處理 */ * html .clearfix height: 1%;       /* 這是對 win 上的IE瀏覽器進行的處理 */ .clearfix display: block;       /* 這是對display: inline-

51、block;進行的修改，重置為區塊元素*/ 會發現即使子元素進行了浮動，父元素float container仍然會將其包圍，進行高度自適應。 clear元素的margin-top被重置為零 齊博CMS：（菜鳥教程）學習制作模板（八）實戰：完善三列布局內容上一節中我們講到了一個簡單的三列布局，本節講如何來完善他。我們知道上一節中簡單的三列布局可以作為一個網頁基本的大框架，然后我們在這個大框架中填充我們需要的內容，這就是本節要講的問題，如何完善網頁，豐富網頁內容。 在線語錄吧一、先來看一下“簡單的三列布局” 復制代碼 1.2. <!DOCTYPE HTML PUBLIC "-/W3

52、C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> 3. <HTML> 4. <HEAD> 5. <TITLE>簡單的三列布局</TITLE> 6. <style type="text/css"> 7. body 8. width:800px; 9. margin:auto; 10. 11. div 12.  height:150px; 13. 14. .left 15. width:150px; 16

53、. float:left; 17. clear:right; 18. border:1px solid #ff9900; 19. margin-top:5px; 20. 21. .center 22. width:485px; 23. float:left; 24. clear:right; 25. border:1px solid #ff9900; 26. margin:5px 5px 0 5px; 27. 28. .right 29. width:150px; 30. float:left; 31. clear:right; 32. border:1px solid #ff9900; 33

54、. margin-top:5px; 34. 35. .head 36. width:100%; 37. clear:both; 38. border:1px solid #ff9900;  39.    40. .foot 41. width:100%; 42. clear:both; 43. border:1px solid #ff9900; 44. margin-top:5px; 45. 46. </style> 47. </HEAD> 48. <BODY> 49. <div class="head"

55、;>頭部</div> 50. <div class="left">左側</div> 51. <div class="center">中側</div> 52. <div class="right">右側</div> 53. <div class="foot">尾部</div> 54. </BODY> 55. </HTML>   有了上面的基本框架，以此為基礎，做

56、一下規劃，首先，我們將上面的代碼修改一下： <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>簡單的三列布局</TITLE> <style type="text/css"> body width:800px; margin:auto; div  height:100%; .left widt

57、h:180px; float:left; clear:right; border:1px solid #ff9900; margin-top:5px; .center width:400px; float:left; clear:right; border:1px solid #ff9900; margin:5px 5px 0 5px; .right width:206px; float:left; clear:right; border:1px solid #ff9900; margin-top:5px; .head width:100%; clear:both; border:1px so

58、lid #ff9900;     .foot width:100%; clear:both; border:1px solid #ff9900; margin-top:5px; </style> </HEAD> <BODY> <div class="head">頭部</div> <div class="left">左側</div> <div class="center">中側</div> <d

59、iv class="right">右側</div> <div class="foot">尾部</div> </BODY> </HTML> 在線語錄吧1、修改一下div的高度為100%，目的是讓他根據內容自由伸展。 2、調整左、中、右的寬度，讓其美觀一下。 3、因為三列布局是一個基本的大框架，起到一個控制網頁的作用，所以他的線框，可以將其去掉（即上面藍色部分）。 4、下一步就是充實綠色部分了。 二、充實內容，豐富網頁 復制代碼 1. <!DOCTYPE HTML PUBLIC &quo

60、t;-/W3C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> 2. <HTML> 3. <HEAD> 4. <TITLE>簡單的三列布局</TITLE> 5. <style type="text/css"> 6. body 7. width:800px; 8. margin:auto; 9. 10. div 11.  height:100%; 12. 13. .left 14. width:180px

61、; 15. float:left; 16. clear:right; 17. margin-top:5px; 18. 19. .center 20. width:400px; 21. float:left; 22. clear:right;  23. margin:5px 5px 0 5px; 24. 25. .right 26. width:206px; 27. float:left; 28. clear:right;  29. margin-top:5px; 30. 31. .head 32. width:100%; 33. clear:both;  34.

62、   35. .foot 36. width:100%; 37. clear:both; 38. margin-top:5px; 39. 40. </style> 41. </HEAD> 42. <BODY> 43. <div class="head">頭部</div> 44. <div class="left">左側</div> 45. <div class="center">中側</div> 46. &l

63、t;div class="right">右側</div> 47. <div class="foot">尾部</div> 48. </BODY> 49. </HTML> 上面是經過修改后的代碼，下一步就是充實了，我們找到第一節中制作的div代碼： 復制代碼 1.2. <div class="div"> 3. <div class="head">最新新聞</div> 4. <div class="content"