<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    melody

    成為最優(yōu)秀的自己
    數據加載中……
    轉 建立 立體表格
     表格是網頁內應用較多的東東,但一般我們只是用它來定位網頁中的模塊和排版文字。其實表格用好了還可以做出很多漂亮的效果,如圖一,承載文字的表格有一種看似立體的感覺。下面就來介紹一下這種立體表格的制作方法。


    圖一

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


    圖二

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


    圖三

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


    圖四

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

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

    <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顏色表)。試著自己改變一下,根據你的需要制作效果。

    posted on 2008-03-20 16:48 meilody 閱讀(139) 評論(0)  編輯  收藏


    只有注冊用戶登錄后才能發(fā)表評論。


    網站導航:
     
    主站蜘蛛池模板: 91视频免费观看高清观看完整| 亚洲精品无码av片| 亚洲国产a∨无码中文777| 亚洲午夜久久久久久噜噜噜| 亚洲精品成人网站在线观看| 精品亚洲AV无码一区二区| 亚洲一区二区三区高清在线观看 | 99热在线免费观看| 国产大片91精品免费看3| 国产成人毛片亚洲精品| 亚洲系列国产精品制服丝袜第| 亚洲综合成人婷婷五月网址| 国产伦精品一区二区免费| 国产h视频在线观看网站免费| 国产男女猛烈无遮档免费视频网站| 亚洲精品中文字幕| 120秒男女动态视频免费| 亚洲男人天堂2020| 亚洲国产日韩视频观看| 香蕉高清免费永久在线视频| 久久综合日韩亚洲精品色| 另类图片亚洲校园小说区| 亚洲精品免费在线观看| 亚洲第一区在线观看| 亚洲www77777| 可以免费观看一级毛片黄a| 国产成人精品日本亚洲专区6| 久久狠狠躁免费观看2020| 亚洲av再在线观看| 国产自国产自愉自愉免费24区| 国产三级免费电影| 亚洲经典千人经典日产| 亚洲色婷婷综合开心网| 97在线视频免费播放| 亚洲午夜免费视频| 两性色午夜免费视频| 亚洲一区二区三区在线观看精品中文 | 亚洲精品午夜国产va久久| 五月婷婷亚洲综合| 亚洲AV成人精品一区二区三区| 曰曰鲁夜夜免费播放视频|