免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

CSS制作標簽卡Tab效果

2024-02-26    分類： 網站建設

有過網頁設計經驗的人應該不難明白，如果不知道細節的話，通過察看源代碼就能知道，它實際上是通過在表格中插入事先制作好的作為標簽卡的圖片來制作的，標簽卡的效果通過顏色來控制，比如上圖中的“YOUR STORE”這張圖片和底下子欄目的顏色一致，背景都為深藍色，這樣看上就向一張卡片了。

不過，現在網頁設計的趨勢是XHTML+CSS來完成。那么，如果不用圖片加表格的方法，有沒有辦法僅僅利用CSS來制作呢？有的，可以通過項目列表的CSS設定來做到。

就是利用這種方法來制作的。

下面，我們就分別來學習CSS的標簽卡制作。

利用列表元素制作標簽卡

通常情況下，項目列表的排列方式是垂直的，并在前頭帶有特定的項目符號，如下：

項目列表一 項目列表二 項目列表三 項目列表四 它所對應的HTML代碼是這個樣子：

<ul> <li>項目列表一</li> <li>項目列表二</li> <li>項目列表三</li> <li>項目列表四</li> </ul>

那是否你曾想到過，項目列表也可以不垂直排列，而是水平分布呢？在Html中無論如何是做不到這點的。可是CSS卻提供了這種方法。

首先，我們把項目列表放入到div標記中，如下：

<div id="horizonlist">

<ul> <li>項目列表一</li> <li>項目列表二</li> <li>項目列表三</li> <li>項目列表四</li> </ul>

</div>

然后，我們為這個id為horizonlist的Div設定如下樣式：

#horizonlist {//*設定div的Box屬性*// border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif; }

#horizonlist ul, #horizonlist li {//*設定限制于horizonlist的div內的ul和li的屬性*// display: inline; margin: 0; padding: 0; color: #339; font-weight: bold; } 此樣式作用于所給項目列表的結果如下：

項目列表一 項目列表二 項目列表三 項目列表四

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

文章名稱：CSS制作標簽卡Tab效果
標題網址：http://m.newbst.com/news16/318966.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、品牌網站建設、用戶體驗、軟件開發、微信公眾號、全網營銷推廣

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都網站建設公司