在網(wǎng)頁設(shè)計(jì)中，瀏覽器默認(rèn)列表項(xiàng)豎向顯示，有時(shí)需要列表項(xiàng)橫向顯示。通過CSS控制，可以輕松實(shí)現(xiàn)項(xiàng)目列表的橫豎轉(zhuǎn)換。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁，保存為test.html，輸入以下內(nèi)容：
<div class="container">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">公司新聞</a></li>
<li><a href="#">公司產(chǎn)品</a></li>
<li><a href="#">公司圖片</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，用來定義列表樣式。
body { background: #CCCCCC; /*頁面背景色*/}
.container { /*container容器樣式*/
font-family: Arial, Helvetica, sans-serif;}.container ul { /*列表樣式*/
list-style-type: none; /*不顯示項(xiàng)目符號(hào)*/
margin: 0px;
padding: 0px;}
以上代碼中，定義了項(xiàng)目列表樣式。
在網(wǎng)站建設(shè)中，為了讓列表橫向顯示，在<li>標(biāo)簽中添加float:left樣式聲明，使各個(gè)列表項(xiàng)都水平顯示，并設(shè)置<a>標(biāo)簽的相關(guān)屬性，代碼如下：
.container li { float: left; /*左浮動(dòng)，實(shí)現(xiàn)列表項(xiàng)的橫向顯示*/}.container li a { /*<a>標(biāo)簽的樣式*/
display:
block; /*定義為塊級(jí)元素*/
padding: 3px 6px; /*上、下、左、右內(nèi)邊距*/
margin: 2px; /*四周補(bǔ)白*/
text-decoration: none; /*無下劃線*/ border: 1px solid #996600; /*邊框樣式*/ background: #CCFF66; /*背景顏色*/}以上代碼實(shí)現(xiàn)了列表的橫向顯示。
提示：在設(shè)計(jì)網(wǎng)頁時(shí)，display:block語句能夠?qū)⒊溄釉O(shè)置成塊級(jí)元素，當(dāng)鼠標(biāo)進(jìn)入該塊的任何部分時(shí)都會(huì)被激活，而不僅僅是在文字上方才被激活。
當(dāng)前文章標(biāo)題：在網(wǎng)頁設(shè)計(jì)中定義列表橫豎顯示
當(dāng)前URL：http://mnamateurbaseball.com/news/wzzz/3090.html
