在網(wǎng)頁設(shè)計中,瀏覽器默認(rèn)列表項豎向顯示,有時需要列表項橫向顯示。通過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>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個內(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>標(biāo)簽中添加float:left樣式聲明,使各個列表項都水平顯示,并設(shè)置<a>標(biāo)簽的相關(guān)屬性,代碼如下:
.container li { float: left; /*左浮動,實現(xiàn)列表項的橫向顯示*/}.container li a { /*<a>標(biāo)簽的樣式*/
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è)置成塊級元素,當(dāng)鼠標(biāo)進入該塊的任何部分時都會被激活,而不僅僅是在文字上方才被激活。
當(dāng)前文章標(biāo)題:在網(wǎng)頁設(shè)計中定義列表橫豎顯示
當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3090.html