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