久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

網(wǎng)頁(yè)設(shè)計(jì)中如何設(shè)計(jì)圖文展示欄目

之前通過(guò)示例分析過(guò)網(wǎng)頁(yè)設(shè)計(jì)中圖文排版的處理技巧,那么對(duì)于圖文列表信息的處理其實(shí)大同小異,不同的是圖文列表信息的表現(xiàn)方式是將列表內(nèi)容以圖片的形式在頁(yè)面中體現(xiàn),簡(jiǎn)單理解就是圖片列表信息附帶簡(jiǎn)短的文字說(shuō)明。在圖中展示的內(nèi)容主要有列表標(biāo)題、圖片和圖片相關(guān)說(shuō)明的文字。

【操作步驟】

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

第2步,構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。假設(shè)當(dāng)我們?cè)陧?yè)面制作時(shí)拿到了由設(shè)計(jì)師提供的設(shè)計(jì)稿中出現(xiàn)了這樣的一個(gè)圖文列表信息結(jié)構(gòu),能一目了然地看到該效果主次分明,結(jié)構(gòu)清晰。

<div class="pic_list">    

<h3>愛(ài)秀</h3>    

<div class="content">        

<ul>            

<li><a href="#"><img src="images/1245043772194_7521.jpg" alt="美女個(gè)性搞怪自拍" />美女個(gè)性搞怪自拍</a></li>            

<li><a href="#"><img src="images/1245043843485_8207.jpg" alt="絕對(duì)陽(yáng)光的清純小妹" />絕對(duì)陽(yáng)光的清純小妹</a></li>            

<li><a href="#"><img src="images/1245134073454_9288.jpg" alt="漂亮美女的可愛(ài)外拍" />漂亮美女的可愛(ài)外拍</a></li>            

<li><a href="#"><img src="images/1245134177473_9822.jpg" alt="可愛(ài)美女的藝術(shù)照" />可愛(ài)美女的藝術(shù)照</a></li>            

<li><a href="#"><img src="images/1245200548148_5487.jpg" alt="漂亮美女?huà)擅雷耘?quot; />漂亮美女?huà)擅雷耘?lt;/a></li>            

<li><a href="#"><img src="images/1245201554383_4640.jpg" alt="清純迷人的黃毛丫頭" />清純迷人的黃毛丫頭</a></li>        </ul>    

</div>

</div>

對(duì)于在網(wǎng)頁(yè)設(shè)計(jì)時(shí)列表的內(nèi)容已經(jīng)講解的不少了,本例以如下所示結(jié)構(gòu)編寫(xiě)HTML列表結(jié)構(gòu)代碼。

8dd0a0ffbd0844dba3e9a30ac47e8e11.jpg

這樣的結(jié)構(gòu)不僅在HTML代碼中能很好地將頁(yè)面結(jié)構(gòu)層次體現(xiàn),更可以方便后期通過(guò)CSS樣式對(duì)其的利用。圖文列表的排列方式最講究的一個(gè)知識(shí)點(diǎn)就是寬度屬性值的計(jì)算。橫向排列的列表,當(dāng)整體的列表(有序列表ol或者無(wú)序列表ul)橫向空間不足以將所有列表橫向顯示時(shí),瀏覽器會(huì)將列表?yè)Q行顯示。這樣的情況只有在寬度計(jì)算正確時(shí),才足夠?qū)⑺辛斜頇M向排列顯示并且不會(huì)產(chǎn)生空間的浪費(fèi)。

這種情況是必須要避免的,因此在網(wǎng)站建設(shè)時(shí)準(zhǔn)確計(jì)算列表內(nèi)容區(qū)域所需要的空間是有必要的。

我們將要分析例子中,每張圖片的寬度屬性值為134px,左右內(nèi)補(bǔ)丁分別為3px,左右邊框分別為1px寬度的線(xiàn)條,并且圖片列表與圖片列表之間的間距為15px(即右外補(bǔ)丁為15px),根據(jù)盒模型的計(jì)算方式,最終列表li標(biāo)簽的盒模型寬度值為1px+3px+134px+3px+1px+15px=157px,因此圖文列表區(qū)域總寬度值為157px×6=942px。

第3步,在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,定義圖文列表區(qū)域的相關(guān)區(qū)域樣式。

.pic_list .content {    

width:942px;    

height:150px;    

overflow:hidden; /*設(shè)置圖文列表內(nèi)容區(qū)域的寬度和高度,超過(guò)部分隱藏*/    

padding:22px 0 0 15px; /*利用內(nèi)補(bǔ)丁增加圖文列表內(nèi)容區(qū)域與其他元素之間的間距*/}

.pic_list .content li {float:left;    

width:142px;    

margin-right:15px; /*列表li標(biāo)簽設(shè)置浮動(dòng)后,所有列表將根據(jù)盒模型的計(jì)算方式計(jì)算列表寬度,并且并排顯示*/    display:inline; /*設(shè)置浮動(dòng)后并且增加了左右外補(bǔ)丁,IE6會(huì)產(chǎn)生雙倍間距的Bug,利用該屬性解決*/}

.pic-list .content作為圖文列表內(nèi)容區(qū)域,增加相應(yīng)的內(nèi)補(bǔ)丁使其與整體之間有空間感,這個(gè)是視覺(jué)效果中必然會(huì)處理的一個(gè)問(wèn)題。

.pic-list .content li因?yàn)榫哂懈?dòng)屬性,并且有左右外補(bǔ)丁中其中一個(gè)外補(bǔ)丁屬性,在IE6瀏覽器中會(huì)產(chǎn)生雙倍間距的Bug問(wèn)題。而神奇的是添加display:inline可以解決該問(wèn)題,并且不會(huì)對(duì)其他瀏覽器產(chǎn)生任何影響。

第4步,主要內(nèi)容設(shè)置成功之后,就可以對(duì)圖文列表的整體效果做CSS樣式的修飾,例如圖文列表的背景和邊框以及圖文列表標(biāo)題的高度、文字樣式和背景等。

.pic_list {    width:960px; /*設(shè)置圖文列表整體的寬度*/    border:1px solid #D9E5F5; /*添加圖文列表的邊框*/    background:url(images/wrap.jpg) repeat-x 0 0; /*添加圖文列表整體的背景圖片*/}.pic_list * {/*重置圖文列表內(nèi)部所有基本樣式*/    margin:0;    

padding:0;    

list-style:none;    

font:normal 12px/1.5em "宋體", Verdana,Lucida, Arial, Helvetica, sans-serif;}.pic_list h3 { /*設(shè)置圖文列表的標(biāo)題的高度、行高、文字樣式和背景圖片*/

height:34px;    

line-height:34px;    

font-size:14px;    

text-indent:12px;    

font-weight:bold;    

color:#223A6D;    

background:url(images/h3bg.jpg) no-repeat 0 0;}

第5步,需要調(diào)整內(nèi)容則是對(duì)圖文列表信息細(xì)節(jié)以及用戶(hù)體驗(yàn)的把握。例如圖片的邊框、背景和文字的顏色等,并且還要考慮當(dāng)用戶(hù)在鼠標(biāo)經(jīng)過(guò)圖片時(shí),為了能更好地體現(xiàn)視覺(jué)效果,給用戶(hù)一個(gè)全新的體驗(yàn),我們還要添加當(dāng)鼠標(biāo)經(jīng)過(guò)圖片列表信息時(shí)圖片以及文字的樣式變化。

.pic_list .content li a {    display:block;                              /*將內(nèi)聯(lián)元素a標(biāo)簽轉(zhuǎn)換為塊元素使其具備寬高屬性*/

width:142px;                                /*設(shè)置轉(zhuǎn)換為塊元素后的a標(biāo)簽的寬度*/    

text-align:center;                          /*文本居中顯示*/    

text-decoration:none;                       /*文本下劃線(xiàn)*/    

color:#333333;                              /*文本的顏色 */}

.pic_list .content li a img {    display:block; /*當(dāng)圖片設(shè)置為塊元素時(shí),可以解決IE6中圖片底部幾個(gè)空白像素的bug*/   

width:134px;    

height:101px;    

padding:3px; /*設(shè)置圖片的寬高屬性以及內(nèi)補(bǔ)丁屬性*/    margin-bottom:8px; /*將圖片的底部外補(bǔ)丁設(shè)置為8px,使其與文字之間產(chǎn)生一定間距*/    

border:1px solid #CCCCCC;    

background-color:#FFFFFF; /*背景顏色將通過(guò)內(nèi)補(bǔ)丁的空間顯示*/}

.pic_list .content li a:hover {    text-decoration:underline;    

color:#CC0000; /*當(dāng)鼠標(biāo)經(jīng)過(guò)圖文列表時(shí),文字有下劃線(xiàn)并且改變顏色*/}

.pic_list .content li a:hover img {    background-color:#22407E; /*當(dāng)鼠標(biāo)經(jīng)過(guò)圖文列表時(shí),圖片的背景顏色改變*/}

第6步,設(shè)計(jì)完成,漂亮的圖文列表信息經(jīng)過(guò)簡(jiǎn)單的CSS樣式處理后就會(huì)完美地呈現(xiàn)出來(lái)。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):0871-63535511(點(diǎn)擊可一鍵撥號(hào))