如何在網(wǎng)頁設計中設計列表版式

前面的示例展示了在設計網(wǎng)頁用列表制作新聞欄目、菜單等網(wǎng)頁元素,實際上,列表還能在網(wǎng)頁設計中進行簡單的排版,尤其是對圖文的排列,是網(wǎng)絡中經(jīng)常見到的形式,本例以名為“世界十大名車欣賞”的網(wǎng)頁為例,介紹在網(wǎng)站建設時列表排版的應用。

【操作步驟】

第1步,啟動Dreamweaver,新建一個網(wǎng)頁,保存為index.html。

第2步,首先構建網(wǎng)頁結構。在本例中,應用<ul>標簽創(chuàng)建列表,在每一個<li>標簽中添加圖片,從而實現(xiàn)本例效果。

<h3><a href="#/">世界十大名車欣賞</a></h3><ul>    

<li> <a href="#"><img src="images/1.jpg" alt="1"><span>世界十大名車之一:恩佐.法拉利</span></a></li>    

<li> <a href="#"> <img src="images/2.jpg" alt="2"> <span>世界十大名車之二:蘭博基尼</span></a></li>    

<li> <a href="#"> <img src="images/3.jpg" alt="3"> <span>世界十大名車之三:奔馳SLR</span></a></li>    

<li> <a href="#"> <img src="images/4.jpg" alt="4"> <span>世界十大名車之四:布加迪.威龍</span></a></li>    

<li> <a href="#"> <img src="images/5.jpg" alt="5"> <span>世界十大名車之五:福特GT</span></a></li>    

<li> <a href="#"> <img src="images/6.jpg" alt="6"> <span>世界十大名車之六:克萊斯勒ME-Four-Twelve</span> </a></li>    

<li> <a href="#"> <img src="images/7.jpg" alt="6"> <span>世界十大名車之七:阿斯頓.馬丁DB9</span></a></li>    

<li> <a href="#"> <img src="images/8.jpg" alt="6"> <span>世界十大名車之八:保時捷CarreraGT</span></a></li>    

<li> <a href="#"> <img src="images/9.jpg" alt="6"> <span>世界十大名車之九:賓利歐陸 GT</span></a></li>    

<li> <a href="#"> <img src="images/10.jpg" alt="6"> <span>世界十大名車之十:帕格尼—風之子</span></a></li>

 <div style="clear:both;"></div></ul>

此時,網(wǎng)頁的基本結構已經(jīng)創(chuàng)建完成,由于沒有進行CSS控制,所以界面還離我們希望的樣式相差甚遠。

第3步,在<head>標簽內(nèi)添加<styletype="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,定義網(wǎng)頁的基本屬性和標題樣式。

body,h3,ul { /*設置頁面、h3標簽、<ul>標簽的四周補白和內(nèi)邊距都為0*/    

margin:0;    

padding:0;}h3 {/*h3標題樣式*/    

width:800px;                       /*寬度*/    

height:30px;                       /*高度*/    

margin:20px auto 0 auto;     /*設置頂部補白為20px,左右距離為auto,實現(xiàn)h3塊的居中顯示*/    

font-size:20px;                    /*字體大小*/   

text-indent:10px;                  *首行縮進*/    

line-height:30px;                  /*行間距,可實現(xiàn)文字的垂直居中*/    

background:#E4E1D3;                /*背景顏色*/     

text-align:center;                /*h3標簽中文字的居中*/}h3 a {                                 /*標題的鏈接樣式*/    

color:#c00;                        /*字體顏色*/    text-decoration:none;              /*不顯示下劃線*/}

h3 a:hover {                           /*鼠標懸停時標題的樣式*/    

color:#000;                        /*字體顏色*/}

在以上代碼中用body,h3,ul{ mar-gin:0;padding:0;}語句設置了body、h3和<ul>標簽的margin和padding屬性;在a樣式類和a:hover樣式中,分別定義了標題的鏈接樣式和鼠標經(jīng)過時的樣式。

第4步,設置ul樣式類和<li>標簽的樣式,從而實現(xiàn)對網(wǎng)頁中圖文的排版。

ul {/*ul列表樣式*/    width:774px;                   /*ul列表寬度*/    

margin:0 auto;                 /*ul中所有內(nèi)容居中顯示*/    

padding-left:20px;             /*左側內(nèi)邊距*/    

border:3px solid #E4E1D3;      /*邊框樣式*/}  

ul li {/*<li>標簽樣式*/    

float:left;                   /*<li>標簽中的內(nèi)容橫向顯示*/    

margin:5px 10px 3px 0px;      /*四周的外邊距*/    

list-style-type:none;         /*不顯示項目標簽*/}  

ul li a {/*設置li中的<a>標簽樣式*/    

display:block;         /*定義為塊級元素,使鼠標進入塊中任何位置鏈接就被激活*/    

width:370px;                /*寬度*/    

height:175px;               /*高度*/    

text-decoration:none;       /*不顯示下劃線*/

}

以上代碼定義了ul的寬度為774px,邊框樣式為寬3px的實線,774px加兩條3px的邊框恰好和前面定義的h3寬度800px一致。

第5步,設置<li>標簽下的<img>標簽樣式和<span>標簽樣式。

ul li a img {                    /*設置li中圖片樣式*/    

width:370px;                 /*圖片寬度*/    

height:150px;                /*圖片高度*/    

border:1px #000099 solid;    /*1px寬的邊框*/}

ul li a span {                   /*每個圖片標題的樣式*/    

display:block;    width:370px;                 /*寬度是370px*/    

height:23px;                 /*高寬*/

line-height:20px;            /*行間距*/    

font-size:14px;              /*字體大小*/    

text-align:center;          /*文字居中*/   

color:#333;                 /*文字顏色*/

}

在上述代碼中,設置了圖片高度是150px,圖片的上下邊框各1px,圖片標題高寬是23px,三者相加正好是前面講的設置li的高度175px。




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