美化你的網頁 製作精美圓角表格的兩種方法

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

方法一:用圖片製作圓角表格
這是最常用也是最通用的方法,它能很好地適應各種瀏覽器和不同解析度,大部分網頁都使用這種方法。

①先用Photoshop等作圖軟體繪製一個圓角矩形,再用“矩形選框工具”選取左上交的圓角部分(如圖1),複製它。

②不要取消選取,直接建立一副映像,Photoshop會根據選取部分的高度、寬度自動化佈建建立映像的大小。張貼後,儲存為WEB所用格式即可。

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

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

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

方法二:利用VML技術
用VML技術可以更容易地製作一個圓角表格,而且還有投影哦!

①修改表識為

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

③在您要添加圓角表格的地方加入以下代碼:br>



這裡輸入表格中的內容



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

這樣,一個有投影的圓角表格就製作好了(如圖4)。

  這種添加圓角表格的方法雖然很方便,但是它不能很好的適應每個瀏覽器版本,且在設計時是以層的方式現實,不利於版面設計,所以盡量使用第一種方法。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。