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