DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 制作精美圓角表格兩種方法
制作精美圓角表格兩種方法
編輯:CSS進階教程     



做網頁時候為了美化網頁,常常把表格邊框的拐角處做成圓角,這樣可以避免直接使用表格直角的生硬,使得網頁整體更加美觀。下面就給大家介紹兩種制作圓角表格的常用的辦法。

  方法一:用圖片制作圓角表格

  這是最常用也是最通用的方法,它能很好地適應各種浏覽器和不同分辨率,大部分網頁都使用這種方法。

  ①先用Photoshop等作圖軟件繪制一個圓角矩形,再用“矩形選框工具”選取左上交的圓角部分(如圖1),復制它。  
  ②不要取消選取,直接新建一副圖像,Photoshop會根據選取部分的高度、寬度自動設置新建圖像的大小。張貼後,保存為WEB所用格式即可。

  ③重復步驟②,分別用“水平翻轉”工具和“垂直翻轉”工具,保存另外三個方向的圓角。(如圖2)

  ④打開網頁制作軟件,這裡以Dreamweaver為例。插入一個一行三列的表格,設置其CellPad、CellSpace和Border屬性值都為0。在第一列插入圖片1.gif,第三列插入圖片3.gif,並設置單元格的高度和寬度與圖片一致。設置第二列的背景顏色為與圓角圖片一致的顏色,設置寬度為整個表格的寬度減去兩個圖片的寬度,並打開源代碼察看器,刪除這列中的字符” ”(Dreamweaver會自動在每個單元格中插入此字符,若不刪除會撐大表格)。依葫蘆畫瓢,做好下半部分的圓角。

  ⑤再已插入的兩個表格中間再插入一個一行三列同寬的的表格,CellPad、CellSpace和Border屬性值都為0,寬度為100%。設置第一列和第三列背景顏色為與圓角圖片一致的顏色,寬度為1像素,並打開源代碼察看器,刪除這兩列中的字符” ”。到這,一個圓角表格就做好了,您可以在第二列中添加您想要的內容。(如圖3)

 


 

  方法二:利用VML技術

  用VML技術可以更容易地制作一個圓角表格,而且還有投影哦!

  ①修改<html>表識為<html xmlns:v>

  ②在<head>區域添加如下代碼:
  <style>〈br>v\:* {behavior: url(#default#VML);}〈br〉</style>

  ③在您要添加圓角表格的地方加入以下代碼:<v:RoundRect style="position:relative;width:200;height:100px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">

這裡輸入表格中的內容
</v:textbox>
</v:RoundRect>

您可以在上面的代碼中設置圓角表格的寬度、高度、投影顏色等。


  這樣,一個有投影的圓角表格就制作好了(如圖4)。  
  這種添加圓角表格的方法雖然很方便,但是它不能很好的適應每個浏覽器版本,且在設計時是以層的方式現實,不利於版面設計,所以盡量使用第一種方法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved