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

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

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

下面，我們就分別來學(xué)習(xí)CSS的標簽卡制作。

利用列表元素制作標簽卡

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

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

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

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

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

<div id="horizonlist">

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

</div>

然后，我們?yōu)檫@個id為horizonlist的Div設(shè)定如下樣式：

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

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

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

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章名稱：CSS制作標簽卡Tab效果
標題網(wǎng)址：http://aaarwkj.com/news16/318966.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、用戶體驗、軟件開發(fā)、微信公眾號、全網(wǎng)營銷推廣

廣告

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