邊框的製作及代碼知識

07-07

一、首先我們先做一個邊框（把這些代碼先複製到源代碼狀態）代碼如下：

切換到編輯欄里看效果：加入內容二、邊框的基本格式及說明：

說明：：表格的起始符。任意一個表格的開始都必須以它開頭，且必須有終止符

。 cellspacing：單元格間距，用來指定表格與各單元格之間的空隙。 cellpadding：用來指定單元格內容與單元格邊界之間的空白距離的大小。 width：表格的寬度。取值從0開始，默認以像素為單位，與顯示器的解析度的像素是一致的。800×600的顯示解析度下，如果表格設置成1000個像素的寬度，那麼，得出的效果將導致IE的橫向滾動條出現，只有通過滑動它才能看到表格最右邊的內容，所以建議在設置表格的寬度時充分考慮顯示解析度問題。width的取值還可以使用百分比，如widht="100%"，這種賦值法有個好處：表格的寬度將根據可顯示的寬度來自我調整寬度。 background：表格的背景圖。其值為一個有效的圖片地址。也有此屬性。同時設置背景色和背景圖不衝突，也建議這麼做，這樣，當圖片不能顯示時，表格的外觀依然是好看的。：表體的起始符。緊跟在之後，表示表體開始。必須有結尾符，放在

之前。：tr的作用是規定表格的行，其中，t是table，r是row（行）。有多少組tr，這張表格就有多少行。緊跟在之後。必須有終止符。：td的作用是規定表格的列，t是table，d可理解為down（向下）。有多少組td，這張表格就有多少列。第一個緊跟在之後。終止符為。td與tr配合構成單元格。以上就第一層邊框的基本要素，現在我們在看看第二層邊框：

其它的全和第一層一樣，但多了這二組： 1：cellSpacing=1 borderColorDark=#0d1737 為暗邊框，邊框寬度為1象素，顏色為0d1737 2： cellpadding：單元格間距。指該單元格里的內容與cellspacing區域的距離，如果cellspacing為0，則表示單元格里的內容與表格周邊邊框的距離。 3：borderColorLight=#24387a 為亮邊框，顏色為0d1737 第三層邊框和第一層一樣，現在我們來看最後一層邊框也就是背景。

它只有背景的寬度width_="網頁寬度"，背景展示的網址：background=背景圖片網址，還多了一個border=0它是什麼意思呢？ border：此屬性定義表格的邊框。比如，border=1，表示表格邊框的粗細為1個像素（默認值），為0表示沒有邊框。三、認識了邊框的結構和代碼後，讓我們自己親自製作一些邊框吧首先我們先選好所需的素材 1、我們先製作一個表格 2、轉換為HTML模式，邊框變為代碼如下：

3、修改邊框顏色代碼: 點擊進入提取顏色代碼代碼： http://www.rqsha.com/Article/ShowArticle.asp?ArticleID=305 代碼如下:

內容

4、添加背景圖片即代碼background，代碼如下：換上代碼background= 及圖片地址，把border=1改為border=0 ，cellSpacing=2 把2修改得大一點，比如20 ，數越大，邊框越寬第一層的全代碼： `

添加內容

5、這是第一層，轉換為「編輯」模式，看一下效果添加內容我們接著做第二層： 1。把第一層的上半部分複製，

我們將圖片地址修改一下 2、然後稍作修改就可以了。

cellSpacing=1 把原來的20改為了1。同樣的方法做第三層第三層的代碼是

不用發出，你轉換一下模式就可以看出效果了前三層全代碼如下：

看看效果：七層邊框：第四層跟第二層一樣，第五層跟第一層一樣，第六層跟第二層還一樣，把原來的代碼依次複製過來就可以了。（圖片還可以自由組合）都複製過來看看效果：

OK，讓我們預覽一下效果：我們做八層邊框，再複製一層代碼過來，然後換上背景地址就OK了。最後一層代碼如下：

內容

讓我們一起看看八層邊框組成的效果吧：內容

內容