立體視覺 讓您的網頁“靚”起來

來源:互聯網
上載者:User
立體|網頁   表格是網頁內應用較多的東東,但一般我們只是用它來定位網頁中的模組和排版文字。其實表格用好了還可以做出很多漂亮的效果,如圖一,承載文字的表格有一種看似立體的感覺。下面就來介紹一下這種立體表格的製作方法。


圖一

  表格有立體的感覺的全是因為在表格的右邊和下邊有淺黑色的陰影。所以我們只要實現了陰影就可以實現這種效果。現在我們就開始具體講述製作過程。在Frontpage2000中建立一個表格,選擇菜單“表格”-“屬性”-“表格”,在視窗內將表格的寬度設定為150象素;高度設定為200象素;邊框粗細設定為0;將儲存格邊距設定為0,而儲存格間距為1,如圖二所示。


圖二

  完成以上設定後將表格的背景色設定為黑色,但表格內的儲存格的背景色設定為白色,完成以後就回出現如圖三所示的單象素黑色邊框效果。


圖三

  接下來的工作就是要為右邊和下邊的黑色邊框製作陰影,我們使用CSS樣式的功能來實現。在圖二所示的選項視窗內點擊“樣式”按鈕繼續選擇“格式”-“邊框”。在邊框與陰影選項框內,分別將樣式選擇為“實線”;顏色選擇為“灰色”;並在預覽選項內將下邊和右邊的邊框應用按鈕選中,如圖四所示。


圖四

  點擊“預覽”,你要的立體表格效果就出來了。(註明:我們在製作出來的最終效果可能和圖一所示略有出入,這是因為我們首先製作出了如圖三的單象素黑色邊框,這樣做的效果會更明顯,更有立體感。)

  在這裡我們還給出在Dreamweaver內定義的樣式代碼,因為Frontpage和Dreamweaver的代碼機制有差別,相對之下Dreamweaver對樣式代碼寫得更規範更合理。表格代碼如下:

<TABLE width="150" height="200" cellpadding="0" cellspacing="1" bgcolor="#000000" style="border-right-width:2px;border-bottom-width :2px;border-right-style : solid;border-bottom-style : solid;border-right-color : #a7a7a7;border-bottom-color : #a7a7a7;">

  其中style以後的為樣式代碼“border-right-width”和“border-bottom-width”以後的2px代表陰影邊框的寬度為2象素,border-right-color和border-bottom-color以後的#a7a7a7代表陰影線框的顏色代碼,你也可以使用其他的顏色代碼替換(具體請參照HTML顏色表)。試著自己改變一下,根據你的需要製作效果。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

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