在網(wǎng)頁設(shè)計(jì)中定義列表橫豎顯示

網(wǎng)頁設(shè)計(jì)中,瀏覽器默認(rèn)列表項(xiàng)豎向顯示,有時(shí)需要列表項(xiàng)橫向顯示。通過CSS控制,可以輕松實(shí)現(xiàn)項(xiàng)目列表的橫豎轉(zhuǎn)換。

【示例】啟動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)目符號*/    

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;                    /*左浮動,實(shí)現(xiàn)列表項(xiàng)的橫向顯示*/}.container li a {                   /*<a>標(biāo)簽的樣式*/    

display:

block;                 /*定義為塊級元素*/    

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è)置成塊級元素,當(dāng)鼠標(biāo)進(jìn)入該塊的任何部分時(shí)都會被激活,而不僅僅是在文字上方才被激活。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)