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

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

【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,輸入以下內容:

<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="#">關于我們</a></li>

</ul>

</div>在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義列表樣式。

body {    background: #CCCCCC;                       /*頁面背景色*/}

.container {                                   /*container容器樣式*/    

font-family: Arial, Helvetica, sans-serif;}.container ul {                                /*列表樣式*/    

list-style-type: none;                     /*不顯示項目符號*/    

margin: 0px;

padding: 0px;}

以上代碼中,定義了項目列表樣式。

網(wǎng)站建設中,為了讓列表橫向顯示,在<li>標簽中添加float:left樣式聲明,使各個列表項都水平顯示,并設置<a>標簽的相關屬性,代碼如下:

.container li {    float: left;                    /*左浮動,實現(xiàn)列表項的橫向顯示*/}.container li a {                   /*<a>標簽的樣式*/    

display:

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

padding: 3px 6px;               /*上、下、左、右內邊距*/    

margin: 2px;                    /*四周補白*/

text-decoration: none;          /*無下劃線*/    border: 1px solid #996600;      /*邊框樣式*/    background: #CCFF66;            /*背景顏色*/}以上代碼實現(xiàn)了列表的橫向顯示。

提示:在設計網(wǎng)頁時,display:block語句能夠將超鏈接設置成塊級元素,當鼠標進入該塊的任何部分時都會被激活,而不僅僅是在文字上方才被激活。

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