製作三維表格效果

來源:互聯網
上載者:User
曾經有位網友問我:“你首頁帶立體效果左邊菜單是圖片還是用按鈕軟體做的?”
其實它根本不是什麼按鈕工具做圖形,而完全是利用表格(TABLE)標籤的兩個元素屬性borderColorDark、borderColorLight而做出來的,另外還要加上對bgcolor元素屬性以及對色彩的較好把握。
HTML表格帶立體效果的三維表格,是依靠邊線亮度實現的。邊線亮色分明色(Light)和暗色( Dark)兩種,一般使用其預設值即可,但也是可以調整的。調整表格邊框亮度實際上就是指定其明暗兩種顏色,由TABLE元素的borderColorLight、borderColorDark屬性來定義。

1、下例是將邊框明色設為白色,暗色設為紫醬色:
(編者註:為了讓HTML原始碼正常顯示,已將所有“< ”符號的右邊加了一個空格,實際應用時需將該空格去掉。)

代碼:
< table cellspacing=1 border=1 bordercolorlight=white bordercolordark=maroon>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
以上是對bordercolorlight、bordercolordark屬性簡單應用。

2、上面的立體效果是凹下去的,現在讓我們把明暗色對換一下看看效果如何:

代碼:
< table cellspacing=1 border=1 bordercolorlight=white bordercolordark=maroon>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
哇!神了,竟變成凸上來的效果。

3、等等,先別樂,凸上來的效果是有了但好象還缺點什麼似的。加上個表格底色看看。

代碼:
< table cellspacing=1 border=1 bordercolorlight=white bordercolordark=maroon bgcolor=fdc0c0>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
啊!這就是顏色渾然一體的三維表格了,看看是不是比上面那個沒加底色的表格好看多了。

4、最後再看看下面這個樣本:

代碼:
< table cellspacing=1 border=1 borderColorDark=#fdfeff borderColorLight=#99ccff bgColor=#e0f0ff>
< tr>
< th>Food< /th>
< th>Drink< /th>
< th>Sweet< /th>
< tr>
< td>A< /td>
< td>B< /td>
< td>C< /td>
< /tr>
< /table>
有人可能又要問了,三維表格的顏色到底怎麼取才好看呢?這個問題可要專業平面設計人員才能正確回答了。

相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。