1、學習制作模板（一）一第一個div的建立一、首先我們先寫一個div層<div></div>html 任何都是相對出現的，所以就成為上而的形式，后而的那一個多一個/。現在我們知道上而這個層，是沒有任何內容，在網頁中打開也沒有顯示。下一步就是要我們對其進行修飾一下，讓其在網頁中顯示出來。二、我們為div層加上一個邊框，并設置一下他的寬度<div style二"border: lpx solid #ccc; width:30%;z，x/div>說明：上面的樣式的意思是邊框=寬度為lpx；實線邊框；邊框顏色為灰色（你也可以用具 體的顏色）層的寬度為30%這樣

2、這個div就冇了一個形彖的概念顯示在我們的面前了。三、充實內容，我們為div內添加兩個一上一下的層<div style二"border:lpx solid #ccc; width:30%;<div></div><div></div></div>四、我們分別為這兩個層添加樣式<div style二"border:lpx solid #ccc; width:30%;<div style二"border:lpx solid</div><div style=，/padding:

3、6px;，z></div></div>我們分別再介紹一下這兩個樣式的含義：第一個：border: lpx solid #fff：這個就不用介紹了，上而己經做了介紹，只不過邊框顏 色是白色；第二個：padding：檢索或設置對象四邊的補丁邊距。傷可以分別設置以邊不同的邊距，如 padding:2px 3px 6px 5px （如果提供全部四個參數值，將按上一右一下一左的順序作用于 四邊，如果只提供一個，將用于全部的四條邊。），通過設置邊距，在這個層中的內容，將 按照你設置的不同的邊距，離邊框產生不同的距離。五、添加內容，設置內容的字體、顏色、樣式等<div s

4、tyle二"bordcr: lpx solid #ccc;width:30%;z，><div style二"border:lpx solid #fff;color:#fff;font weight:bold;padding left:15px;height:30px;line height:30px;background colo r: #ccc">最新新聞</div><div style二"padding:6px;">phpl68 新版即將發布</div></div>說明：co

5、lor:字體顏色；font-weight:粗體；padding-left:檢索或設置對象左邊的邊距；height:層的高度;line-height:字體的間距，在這里設置字體的間距是為了讓字體垂有居中，所以取值與層的 高度是一致的，他只對只有一行的文字有效；background-color:背景顏色。通過上面的設置，一個簡單的div層就建立起來了。最終效果：phpl68新版即將發布學習制作模板（二）一兩個div層并排顯示一. 一個div的代碼<div style二"border:lpx solid #ccc;width:30%;"><div style二&

6、quot;border:lpx sol id #fff;color:#fff; font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-colo r: #ccc">最新新聞</div><div style二"padding:6px; ">phpl68 新版即將發布</div></div>二、再復制一個<div style二"border: lpx solid #ccc;width:30%;，z>&

7、lt;div style二"border:lpx solid #fff;color:#fff;font-weight:bold;paddingtcft:15px;height:30px;line-height:30px;background-colo r: #ccc">最新新聞</div><div styl e二padding:6px; ">phpl68 新版即將發布</div></div><div style二"bordcr: lpx solid #ccc;width:30%;z，>&l

8、t;div style二"border:lpx solid #fff;color:#fff;font weight:bold;padding left:15px;height:30px;line height:30px;background colo r: #ccc">最新新聞</div><div style二"padding:6px;">phpl68 新版即將發布</div></div>現在上面是兩個豎排的了，下一步是要成為橫排的三、設置為橫排<div style二"width:10

9、0%;"><div style二"border:lpx solid #ccc;width:49. 8%;float:<div style二"border:lpx solid #fff;color:#fff;font-weight:bold;paddingleft:15px;height:30px;1ine-height:30px;background-colo r: #ccc">最新新聞 </div><div style二"padding:6px; >phpl68 新版即將發布</div&g

10、t;</div><div style二"margin-left: 5px; border:lpx solid #ccc;width:49. 8%;float: right "><div style二"bordcr:lpx solid #fff;color:#fff;font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-colo r: #ccc">最新新聞（二）</div><div style二"p

11、adding:6px; ">phpl68 新版即將發布</div></div> </div>設置為兩個橫排的，在兩個外面再加上一個div,并設置寬度。里面兩個div第一個添加樣式float: left（對象浮在左邊），第二個添加樣式為float: right（對象浮在右邊）。兩個div的寬度設置各為49. 8%。在第一個的樣式加添加margin-left: 5px （檢索或設置對彖左邊的外延邊距），以與前一 個（也就是左邊的）有5px的間距。最麻效果:php!68新版即將發布 phpl68新版即將發布學習制作模板（三）一將頭部背景顏色改為圖片

12、一、div的代碼<div style二"bordcr: lpx solid #ccc;width:30%;z，><div style二"border:lpx solid #fff;color:#fff;font weight:bold;padding left:15px;height:30px;line height:30px;background colo r: #ccc">最新新聞</div> <div styl e二"padding:6px;">phpl68 新版即將發布</div&g

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

14、;phpl68 新版即將發布</div></div>也就是將紅色部分修改為圖片，因為我們是在論壇上，所以就使用論壇上的圖片來添加。論壇各版塊的頭部圖片的地址是：i我們將上而的代碼修改為：<div style二"bordcr: lpx solid #ccc;width:30%;z，><div style二"border:lpx solid #fff;color:#fff;font weight:bold;padding left:15px;height:30px;line height:30px;background:url (htt

15、p:/bbs. phpl68. com/images/php 168/head. gif) repeat-x;最新新聞</div><div style二"padding:6px;">phpl68 新版即將發布</div></div>也就是將上曲的 background-color: #ccc 修改為 background:url (http:/bbs. phpl68. com/images/phpl68/head. gif') repeat,-x。然后在后面添加一個參 數，設置是否重復顯示。說明：如果圖片地址與模板文件

16、在同一冃錄，你"j以用相對路徑，即：background: url (head, gif)repeat-x：背景圖像在橫向上平鋪其它參數說明：repeat :背景圖像在縱向和橫向上平鋪no-repeat :背景圖像不平鋪repeat-x :背景圖像在橫向上平鋪repeat-y :背景圖像在縱向平鋪最新新聞phpl68新版即將發布學習制作模板(四)一初識html前三節，我們認識了 div,現在我們將綜合應用一下先來認識html的結構<! doctype html public-/w3c/dtdxhtml 1.0 trans itional/en/z"http:/www.

17、 w3. org/tr/xhtml1/dtd/xhtml1-transi tional. dtd"><html xml ns二"http:/www. w3. org/1999/xhtmt<head></head><body></body></html>html的結構標志向瀏覽器提供了文檔特性的信息，比如文檔的版本，介紹性信息、標題等。 結構標志是html標志的一部分，但是大部分不在瀏覽器里顯示出來。而是在幕后工作，指 示瀏覽器耍放上哪些元素和如何顯示出這些兀素來，以及告訴瀏覽器如何解釋文檔的重要信 息。

18、所冇的html都應該包括冇五個結構標志。如圖所示：<!doctyle. ><html>< head> 區<html>區<head>-</head><body> body區</body>一、<!doctype>標志<! doctype. >標志向瀏覽器（和驗證服務）說明文檔遵循的html版本0 html3. 2和4.0規范都要求文檔輸入此標志。因此需要將其放到所侑的網頁文檔屮，輸入在文檔的開頭。如:<!doctype html publc -/w3c/dtd html 3

19、.2 final/en"或<!doctype html publc -/w3c/dtd html 4.0 final/en"、標/吉<html>標志表示該文檔為html文檔。技術上，這個標志在<!doctype. >標志之麻顯得多余, 但對不支持<1 doctype. >標志的舊式瀏覽器，這個標志是必要的。能夠幫助人們閱讀html 代碼。<html>有開始標志與結束標志組成。開始標志位于<1doctype. >的后而。例如：<!doctype html public "-/w3d/dtd ht

20、ml 4.0 final/en"><html><head»</head><body></body></html>三、<head>標志<head>標志小包含文檔的標題，文檔使用的腳本，樣式定義和文檔名信息。瀏覽器希望從<head>中找到文檔的補充信息。此外，<head>標志還可以包含有搜索工具和索引程序所要的其它信息的標志。<head>位于<html>間。例如：<! doctype html public '-/w3d/

21、dtd html 4.0 final/en，z><html><head»</head></html>四、title標志<tttle>是html3.2和4.0規范要求的。它包含文檔的標題。它不顯示在瀏覽器窗口中,只 顯示在瀏覽器標題欄中。在起始標憑（<titlt>）和結束標，忐（/title）間，可以放入簡述 文檔內容的標題。位于<head>標志中，如下例：<!doctype html public -w3d/dtd html 4.0 final/en><html> <he

22、ad»<title>學習 title 標志</title></head></html>五、<b0dy>標志<body>標志中放置了要在訪問者瀏覽器屮顯示信息的所侑標志和屬性。如下例:<!doctype html public -/w3d/dtd html 4. 0 final/en> <html> <head»<title>學習 tttle 標志</title></head><body><font size二"

23、14" color=/greenz，>html 腳本基礎學習</font></b0dy></html>以上為thml瀏覽器的概述和結構說明學習制作模板（五）一外鏈樣式表 通常在網頁中樣式表的調用方法有四種。第一是外鏈,即<1 ink rel二"stylesheet" href = "style. css">的形式；第二是輸入樣式表；第三是在網頁頭部申明,如<hcad> <style type二"text/css">.；最后是直接在對象后寫樣式，即&

24、lt;div style = "width:80%.;">的形式。我們在本節中只講外鏈形式一、先將第一節中的div中的樣式移植出來，并將內綴樣式修改為類形式代碼如下：<div style二"border:lpx solid #ccc;width:30%;"><div style二"bordcr:lpx solid #fff;color:#fff;font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-colo r: #ccc&q

25、uot;>最新新聞</div><div style二"padding:6px; ">phpl68 新版即將發布</div></div>將上面網頁代碼中的樣式(style)修改成類(class)如下：<div class二"div"><div class二"hcad">最新新聞</div><div class=，content，/>phpl68 新版即將發布</div> </div>然后將樣式表記錄整理如下:/&

26、gt;lz>lz siz>lz/彳、t>卜而是最外面的div div border:lpx solid #ccc;width:30%/*a*a* kl*a*«jx*1*a*x* «jx *jx «jxvt st卜'面是頭部的樣式,即“最新新聞”k >lz xx si>lz lz xx >lzkl siz>lz xx siz xx k >ix xx >lz >lz xx siz ix k >lz ix xx >lz ix7 l>7><t|> 彳、1%f>t&

27、gt;z7 t%/ div headborder:lpx solid #fff;color:#fff;font-weight:bold; padding-left:15px; height:30px;1ine height:30px;background-color: #ccc/ >lz xx si>lz lz xx >lzkl siz>lz xx siz xx k >ix xx >lz >lz xx siz ix k >lz ix xx >lz ix xx/7 |>7><t|> 彳、1%f>t>z7 t

28、%卜面是內容處的樣式，即uphpl68新版即將發布”.div contentpadding:6px;說明:下面是內容處的樣式，即“php168新版即將發布”jx kix kj> "kix kj> "w£r%f%f" %fx %l%f /彳、zj"s zts /卜彳.zts彳* r> /卜彳、ztszr 彳.v、"卜 v、zts 彳、v、上而的文字在樣式表中岀現，只起到注釋的作用，而不會對網頁布局有任何影響。二、將上面修改后的網頁代碼添加到網頁中，并保存樣式表，命名為style, css （假設樣式表文件放在image

29、s文件夾中）<! doctype html public -/w3c/dtd xhtml 1.0 transitional/en，/"http:/www. w3. org/tr/xhtmll/dtd/xhtmll-transitional. dtct<html xmlns=z，http:/www. w3. ojrg/1999/xhtml"><head> <link rel=/zstylesheet" type二"text/css" href二"images/style. css">&

30、lt;/head><body><div class二"div><div cl ass二"head"最新新聞</div><div class=，content，>phpl68 新版即將發布</div></div>/body</html>上而"link rel二"stylesheet" type="text/css" href二"images/style. css">",即外鏈樣式表文件的

31、地址，需要添加到head z間。這樣我們就完成了外鏈樣式表的任務。三、外鏈樣式表的好處第一，簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示 的速度，也減少了需要上傳的代碼數量（因為重復設置的格式將被只保存一次）o第二，只要修改保存著網站格式的css樣式表文件就可以改變整個站點的風格特色，在修改 頁而數量龐大的站點時，顯得格外有用。避免了一個一個網頁的修改，大大減少了重復勞動 的工作量。四、說明什么是class： class是設證標簽的類。學習制作模板（六）一樣式表應具備的基本要素前一節，我們學習了外鏈樣式表的方法，但我們的樣式表中還需要添加一些基本的要素，比 如通川

32、的樣式和鏈接樣式；控制整個網頁的寬度等等。一、通用樣式xxz 7/ sazvazxiz xlz sz kl saz si kiz xizkl jx saz vlx xl %z xaz %ix jx vazkjz xaz xl vlx xi sazxl1% "（、v、"、"ajv、"卜"aj"卜 v、"、夕v、"卜 ，、夕a "卜"aj"卜 v、，、*卜"a 夕b "卜width:網頁寬度margin:網頁外延邊距padding: 0;設置內邊距空隙都為0font-s

33、ize: 12px;沒有鏈接的字體大小color: #333333;沒有鏈接的字體的顏色body width:990px;margin:auto;padding: 0;font-size: 12px;color: #333333;二、通用鏈接樣式saz kiz xix saz sjx xaz sazkl 7/kjz slz 7"、少viz7/ saz、少 kjz xlx viz vjx xl six、7""卜 v、"、夕a jv、"卜"卜 v、"、夕"卜 v、"卜，、v、“a，、夕 a夕 a、"

34、卜 v、font size: 12px;超級鏈接字體大小color:字體顏色text-decoration: none;沒有下畫線.要有下畫線.改none為underlinea為統一超級鏈接，a: link沒有點擊過的超級鏈接樣式a:visited被點擊過的超級鏈接樣式a:hover鼠標指向時的超級鏈接樣式a:active被用戶激活（在鼠標點擊與釋放z間發住的事件）時的樣式少用xlz/j%vj *,、*,、vjj7 彳j彳、7 彳$彳j #,、叫u彳u*,、彳$*4font-size: 12px;a:link text-decoration: none;a:visited text-decor

35、ation: none;color: #333333;a:hover text-decoration: underli ne;color: #4e667b;a:active text-decorati on: none;#headerwidth:990px;三、最后，我們與上節的樣式合并在一起。:*2wjxwjx；、«、夕i、"；、；、；、夕i、«、；、夕i、夕i、"；、；、；、事;、夕s、；、夕i、；、«、夕i、夕s、事;、；、夕i、夕s、；、夕 1、"i、width:網頁寬度margin:網頁外延邊距padding: 0;設置內邊

36、距空隙都為0font size: 12px;沒有鏈接的字體大小color: #333333;沒侑鏈接的字體的顏色klxklx%fx kix %j> kixkix%ix /卜彳、/卜 v、彳、zts彳j/卜 v、"卜彳、v、彳、"卜 v、彳、body width:990px;margin:auto;padding: 0;font-size: 12px;font-size: 12px;超級鏈接字體大小color:字體顏色text-decoration: none;沒有卜畫線.要有卜畫線.改none為underlinea為統一超級鏈接，a:link沒冇點-擊過的超級鏈接樣式

37、a:visited被點擊過的超級鏈接樣式a:hover鼠標指向吋的超級鏈接樣式a:activo被用八激活（在鼠標點擊與釋放之間發工的事件）時的樣式.少用szz vaz 7" xax xazxlxklxvjx xix xaz xzxvazxjzxaz vaz xzx kiz /，、"卜 v、*、夕a jv、"卜7 "、*a、v、"卜*、夕 a "卜v、"、夕a j夕 b "卜 夕夕 b "卜font-size: 12px;a:link color: #333333;text-decorati on: non

38、e;a:visited text-decoration: none;color: #333333;a:hover text-decoration: underline;color: #4e667b;a:active text-decoration: none;#headerwidth:990px;:wjxwjxjx jx；、«、«、夕i、"；、；、；、夕i、«、«、；、夕i、夕i、"；、；、；、«、«、«、"）、事;、夕s、«、；、夕i、；、«、«、夕i、夕s、事;

39、、；、夕i、夕s、«、；、夕 1、"i、卜面是最外面的divsx %lz k!%1z >jx kl %1zkl jzkt %1z k! jx kl sx kl %1z %lz k! jzsx %lzkl %1zx|77 彳、zr%zt #v% 7?> 77 t>7 嚇、 zj% 7 1%t>/ div border:lpx sol id #ccc;width:30%:lz k!%1z >jx kl %1zkl jzkt %1z k! jx kl sx kl %1z %lz k! jzsx %lzkl %1zx| kl/7 t>f>|

40、> 7zr t>r%卜面是頭部的樣式，即“最新新聞” div headborder:lpx solid #fff; color:#fff;font-weight:bold;padding eft:15px;hei ght:30px;line-height:30px;background-color: #ccc:wjxwjxjx jx；、«、«、夕i、"；、；、；、夕i、«、«、；、夕i、夕i、"；、；、；、«、«、«、"）、事;、夕s、«、；、夕i、；、«、

41、71;、夕i、夕了、事;、；、夕i、夕s、«、；、夕 1、"i、卜而是內容處的樣式，即“phpl68新版即將發布”sx %lz k!%1z >jx kl %1zklkt %1z k! kl sx kl %1z %lz k!sx %lzkl %1zx|77 彳、zr%zt #v% 7?> 77 嚇、 zj% 7 1%/.div .contentpadding:6px;這樣就組成了一個相對完整的樣式表了，當然還有其它一些通用的樣式，需要你慢慢的添加 完整。學習制作模板（七）一實戰：簡單的三列布局簡單的三列布局，通過以上各節的學習，應該能看明白，和兩個div并列顯示的

42、道理是一樣 的。一、為了能夠說明問題，對照參看，下面樣式采用的是網頁頭部申明形式第一是外鏈，即<link rel="stylesheet" href = "style. css">的形式;第二是輸入樣式表；第三是在網頁頭部申明,如head<style type二"text/css">.；最后是直接在對象后寫樣式,即div style = 'width:80%.;>的形式。即用的第三種形式<!doctype html public -/w3c/dtd html 4. 01/en"ht

43、tp:/www. w3. org/tr/html4/strict. dtd"><html><head><t1tle>簡單的三列布局</tltle><style type二"text/css">body width:800px;margin:auto;div height:150px;.left width:150px;float:left;clear:right;border:lpx solid #ff9900;margin-top:5px; center width:485px;float:1 e

44、ft;clear:right;border:lpx solid #ff9900;margin:5px 5px 0 5px;.right width:150px;float:left;clear:right;border:lpx solid #ff9900;margin-top:5px; head width:100%;clear:both;border:lpx sol id #ff9900;.foot width:100%;clear:both;border:lpx sol id #ff9900;margin-top:5px;</style></head> <b0

45、dy><div class二"head"頭部</div><div class二"left"左側</div><div class二"center"中側</div><div class=z，right">右側</div><div class二"foot"尾部</div></b0dy></html>說明:clear:both;是清除浮動。二、為什么要清除浮動，轉載一篇文章，你看看就明白了

46、在進行浮動布局時，大多數人都深知，在必要的地方進行浮動清理：<divstyle二"clear:both;></div>o例如：<div style二” background:#666;><div style=," float:left; width:30%; height:40px;background:#eee; “somecontent</div></div>此吋預覽此代碼，我們會發現最外層的父元素float container,并沒有顯示。這是因 為子元素因進行了浮動，而脫離了文檔流，導致父元素的hei

47、ght為零。若將代碼修改為：<div style二” background:#666;v ><div style二” float:left; width:30%; height:40px;background:#eee;“somecontent</div><div style二” clear:both, ></div></div>注意，多了一段清理浮動的代碼。這是一種好的css代碼習慣，但是這種方法增加了無 用的元素。這里有一種更好的方法，將html代碼修改為：<div class二” clearfix” style二”

48、background:#666;w ><div style=, float:left; width:30%; height:40px;background:#eee; “somecontent</div></div>定義css類，進行“浮動清理”的控制:code: .clearfix:after content:;clear: both;height: 0;visibility: hidden;display: block;這是對f讓efox進行的處理，因為firefox支持牛:成元素，而ie所有版本都不支持生成元 素.clearfix display: i

49、niine-block;/*這是對mac上的ie瀏覽器進行的處理*/* html . clearfix height: 1%;/*這是對win上的ie瀏覽器進行的處理*/.clearfix display: block;/*這是對display: inline-block;進行的修改，重置為區塊元素*/會發現即使子元索進行了浮動，父元索float container仍然會將其包圍，進行高度白 適應。clear元素的margin-top被重置為零學習制作模板(a) 一實戰：完善三列布局內容上一節屮我們講到了一個簡單的三列布局，木節講如何來完善他。我們知道上一節中簡單的 三列布局可以作為i個網頁基

50、本的人框架，然后我們在這個大框架小填充我們需要的內容, 這就是本節要講的問題，如何完善網頁，豐富網頁內容。一、先來看一下“簡單的三列布局”<!doctype html public -/w3c/dtd html 4. 01/enhttp:/www. w3. org/tr/htm!4/strict. dtd"><html> <head><tttle>簡單的三列布局</tttle><style type二tcxt/css>body width:800px;margin:auto;div height:150px;.l

51、eft width:150px;float:left;clear:right;border:lpx solid #ff9900;margin-top:5px; center width:485px;float:left;cl ear:right;border:lpx solid #ff9900;margin:5px 5px 0 5px;-right width:150px;float:1 eft;clear:right;border:lpx solid #ff9900;margin-top:5px;.head width:100%;clear:both;border:lpx solid #ff

52、9900;.foot width:100%;clear:both;border:lpx solid #ff9900;margin top:5px;</style></head><b0dy><div cl ass二"head"頭部</div><div class二"left"左側</div><div class二"center"中側</div><div class二":right"右側</div><div

53、 class二"foot"尾部</div></b0dy></html>有了上面的基本框架，以此為基礎，做一下規劃，首先，我們將上而的代碼修改一 2<! doctyle html public -/w3c/dtd html4. 01/en" http:/www. w3. org/tr/html4/strict. dtd"><html><head><t1tle>簡單的三列布局</tltle>style type=z，tcxt/css，z>body width

54、:800px;margin:auto;height:100%;.left width:180px;clear:right;border:lpx solid#ff9900;margin-top:5px; center width:400px;fl oat:left;clear:right;border:lpx solid#ff9900;margin:5px 5px 05px;.right width:206px;float:left;clear:right;border:lpx solid#ff9900;margin top:5px head width:100%;clear:both;bord

55、er:lpx solid #ff9900;!.foot width:100%;clear:both;border:lpx solid #ff9900;margin-top:5px;</style></head><b0dy><div class二"head"頭部</div><div class二"left"左側</div><div class二"center"中側</div><div class二"right"右側<

56、/div><div class二"foot"尾部</div></b0dy></html>1、修改一下div的簡度為100%,目的是讓他根據內容自由伸展。2、調整左、中、右的寬度，讓其美觀一下。3、因為三列布局是一個基木的大框架，起到一個控制網頁的作用，所以他的線框，可以將其去掉（即上面藍色部分）。4、下一步就是充實綠色部分了。二、充實內容，豐富網頁<!doctype html public -/w3c/dtd html 401/en"z，http:/www. w3. org/tr/html4/strict. d

57、td"><html><head> <t1tle>簡單的三列布局/t1tle><style type二text/css>body width:800px;margin:aulo;div height:100%;.left width:180px;float:left;cl ear:right;margin-top:5px; center width:400px;float:left;clear:right;margin:5px 5px 0 5px;-right width:206px;float:1 eft;clear:rig

58、ht;margin-top:5px; head width:100%;clear:both;.foot width:100%; clear:both;margin-top:5px;</style></head> <b0dy> <div class二hesd>頭部</div><div class二"left"左側</div><div class二"center"中側</div><div class=，right">右側</div>

59、;<div class二"foot"尾部</div></b0dy></html>上而是經過修改后的代碼，下一步就是充實了，我們找到第一節中制作的div代碼:<div class="div> <div class二"head"最新新聞</div><div class二"content"phpl68 新版即將發布</div></div>css樣式表：下面是最外面的div/彳、zts /卜彳.zts彳*/卜彳、zts彳.v、&qu

60、ot;卜 v、zts 彳、v、.div border:lpx solid #ccc;width:30%卜而是頭部的樣式，即“最新新聞”kiz7" sazvaz 7*xaz saz » viz sjz %lz±x az vjx %x xaz xxx xjx u" vaz xjx kz xaz sax klx xiz vaz ；=、"a、"卜 v、7> "、"a、斗、"卜"a、"卜 斗、xy% "、"“、"卜 斗、"卜"丫、=、*、"卜"“、"a、"卜 斗、xy% =、*> y%卜"a <y 夕 div headborder:lpx solid #fff;color:#fff;font-weight:bo