CSS制作標(biāo)簽卡Tab效果

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

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

就是利用這種方法來(lái)制作的。

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

利用列表元素制作標(biāo)簽卡

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

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

<ul> <li>項(xiàng)目列表一</li> <li>項(xiàng)目列表二</li> <li>項(xiàng)目列表三</li> <li>項(xiàng)目列表四</li> </ul>

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

首先，我們把項(xiàng)目列表放入到div標(biāo)記中，如下：

<div id="horizonlist">

<ul> <li>項(xiàng)目列表一</li> <li>項(xiàng)目列表二</li> <li>項(xiàng)目列表三</li> <li>項(xiàng)目列表四</li> </ul>

</div>

然后，我們?yōu)檫@個(gè)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; } 此樣式作用于所給項(xiàng)目列表的結(jié)果如下：

項(xiàng)目列表一 項(xiàng)目列表二 項(xiàng)目列表三 項(xiàng)目列表四

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

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

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

廣告

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