有過網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)的人應(yīng)該不難明白,如果不知道細(xì)節(jié)的話,通過察看源代碼就能知道,它實(shí)際上是通過在表格中插入事先制作好的作為標(biāo)簽卡的圖片來制作的,標(biāo)簽卡的效果通過顏色來控制,比如上圖中的“YOUR STORE”這張圖片和底下子欄目的顏色一致,背景都為深藍(lán)色,這樣看上就向一張卡片了。
不過,現(xiàn)在網(wǎng)頁設(shè)計(jì)的趨勢(shì)是XHTML+CSS來完成。那么,如果不用圖片加表格的方法,有沒有辦法僅僅利用CSS來制作呢?有的,可以通過項(xiàng)目列表的CSS設(shè)定來做到。
就是利用這種方法來制作的。
下面,我們就分別來學(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>
那是否你曾想到過,項(xiàng)目列表也可以不垂直排列,而是水平分布呢?在Html中無論如何是做不到這點(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)目列表四
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
文章名稱:CSS制作標(biāo)簽卡Tab效果
標(biāo)題網(wǎng)址:http://m.rwnh.cn/news16/318966.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、軟件開發(fā)、微信公眾號(hào)、全網(wǎ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í)需注明來源:
創(chuàng)新互聯(lián)