如何在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)圖文混排列表效果

【操作步驟】

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

第2步,構(gòu)建網(wǎng)頁結(jié)構(gòu)。本例中首先用<div>標(biāo)簽設(shè)置container容器,然后通過<div>標(biāo)簽創(chuàng)建網(wǎng)頁的title和content兩部分,又通過<ul>標(biāo)簽分別創(chuàng)建這兩個(gè)部分的列表。

<div id="container">    

<div class="title">                                       /*title部分*/        

<h3>財(cái)經(jīng)資訊</h3>                                     /*title部分的標(biāo)題*/        

<ul>                                                  /*title部分的新聞欄目*/            

<li><a href="#">最新資訊</a></li>            

<li><a href="#">國際財(cái)經(jīng)</a></li>            

<li><a href="#">汽車房產(chǎn)</a></li>        

</ul>

</div>    <div class="content">                                     /*content部分*/        

<p>                                                   /*content部分的標(biāo)題*/            

<a href="#"><img src="images/1.jpg"/></a>            

<span><a href="#">最新資訊</a></span>        

</p>        

<ul>                                                 /*content部分的新聞內(nèi)容*/            

<li>·<a href="#">諸建芳:中國將繼續(xù)加強(qiáng)“反通縮”明年或降準(zhǔn)2次</a></li>            

<li>·<a href="#">美聯(lián)儲(chǔ)出臺(tái)系統(tǒng)重要性銀行附加資本要求  </a></li>            

<li>·<a href="#">所有省份制定大病保險(xiǎn)實(shí)施方案 北京等全面推開</a></li>

<li>·<a href="#">減持方正證券獲利3.18億元 鄭州煤電有望扭虧  </a></li>            

<li>·<a href="#">牛市“撞腰”不足懼</a></li>        

</ul>    

</div>    

<div class="list_unit" id="2">        

<p> <a href="#"><img src="images/2.jpg">

</a> 

<span><a href="#">國際財(cái)經(jīng)</a></span> 

</p>        

<ul>            

<li>·<a href="#">全球最大集裝箱船“中海環(huán)球”輪首航寧波港</a></li>            

<li>·<a href="#">中國中小企業(yè)全球發(fā)展論壇迎來重量級(jí)嘉賓</a></li>            

<li>·<a href="#">建行龍卡全球支付卡跨境支付更方便</a></li>            

<li>·<a href="#">明年美國經(jīng)濟(jì)增長3.1%</a></li>            

<li>·<a href="#">匯豐:2015年全球十大風(fēng)險(xiǎn)</a></li>

<li>·<a href="#">減持方正證券獲利3.18億元 鄭州煤電有望扭虧  </a></li>            

<li>·<a href="#">牛市“撞腰”不足懼</a></li>        

</ul>    

</div>    

<div class="list_unit" id="2">        

<p> 

<a href="#"><img src="images/2.jpg"></a> <span><a href="#">國際財(cái)經(jīng)</a></span> </p>        

<ul>            

<li>·<a href="#">全球最大集裝箱船“中海環(huán)球”輪首航寧波港</a></li>            

<li>·<a href="#">中國中小企業(yè)全球發(fā)展論壇迎來重量級(jí)嘉賓</a></li>            

<li>·<a href="#">建行龍卡全球支付卡跨境支付更方便</a></li>            

<li>·<a href="#">明年美國經(jīng)濟(jì)增長3.1%</a></li>            

<li>·<a href="#">匯豐:2015年全球十大風(fēng)險(xiǎn)</a></li>

  </ul>    

</div>    

<div class="list_unit" id="3">        

<p> <a href="#"><img src="images/3.jpg"></a> <span><a href="#">汽車房產(chǎn)</a></span> </p>        

<ul>            

<li>·<a href="#">上海:奧迪Q3最高讓利8.6萬元 豪華小型SUV</a></li>            

<li>·<a href="#">上海:路虎發(fā)現(xiàn)4最高降13萬 全國銷售現(xiàn)車充足  </a></li>            

<li>·<a href="#">2015年投產(chǎn) 豐田擴(kuò)大投資提高M(jìn)irai產(chǎn)能  </a></li>            

<li>·<a href="#">北京:新寶來現(xiàn)金優(yōu)惠8500元起 置換另享補(bǔ)貼</a></li>            

<li>·<a href="#">首套房貸利率北京外資銀行能打折</a></li>        

</ul>    

</div>    

<div class="di"></div>                                /*清除浮動(dòng)*/    </div></body>

網(wǎng)頁設(shè)計(jì)中,在整個(gè)container框架下,分別由title和con-tent兩塊組成,在title塊下,又包含了h3和ul兩部分。在content塊下,定義了<p>標(biāo)簽和<ul>標(biāo)簽。

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

* {/*網(wǎng)頁中所有標(biāo)簽的共同樣式*/    

margin:0;                       /*外邊框?yàn)?*/    

padding:0;                      /*內(nèi)邊框?yàn)?*/    

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

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

list-style:none;                /*不顯示項(xiàng)目符號(hào)*/}a {/*定義網(wǎng)頁中所有的<a>標(biāo)簽樣式*/   

color:#03c;    text-decoration:none;           /*不顯示下劃線*/}

a:hover{    text-decoration:underline;      /*當(dāng)鼠標(biāo)經(jīng)過時(shí)顯示下劃線*/}#wrap{/*wrap容器樣式*/    

width:418px;                   /*寬度*/    

margin:30px auto;              /*上下補(bǔ)白是30px,左右為auto,顯示為居中的效果*/    

border:1px solid #999;         /*邊框樣式*/}

在以上代碼中,首先定義了網(wǎng)頁基本屬性;wrap容器樣式類中定義了容器寬度和居中對(duì)齊等屬性。

第4步,設(shè)置title部分樣式。

.title { /*定義title樣式*/   

 width:418px;                           /*title塊的寬度*/    

height:32px;                           /*title塊的高寬*/    

border-bottom:1px solid #999;          /*添加底部邊框*/    

background:#f2f9fd;                    /*背景顏色*/}.title h3 { /*定義title部分*/    

float:left;                            /*左浮動(dòng)*/    

ine-height:32px;                       /*行間距,實(shí)現(xiàn)文字垂直居中*/    

padding-left:20px;                     /*左側(cè)內(nèi)間距*/}.title ul { /*title中列表樣式*/    

float:right;                           /*右浮動(dòng)*/    width:230px;                           /*列表寬度*/}

.title ul li { /*<li>標(biāo)簽樣式*/    float:left;    line-height:32px;                      /*行間距*/    

padding:0 5px;                         /*左右補(bǔ)白5px*/}.title ul li a { /*<a>標(biāo)簽樣式*/        

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

第5步,設(shè)置warp樣式。

.warp { /*warp塊樣式*/     

height:100px;                         /*塊高寬*/     

margin-left:15px;                     /*左側(cè)補(bǔ)白*/     

padding:15px 0 8px 0;                 /*頂部內(nèi)邊距15px,底部內(nèi)邊距8px*/     

border-bottom:1px dotted #9AC4E9;     /*底部邊框*/}

第6步,完成warp塊中<p>標(biāo)簽樣式的設(shè)置,在<p>標(biāo)簽中,包含了<a>標(biāo)簽、<img>標(biāo)簽和<span>標(biāo)簽,分別定義了新聞欄目的圖片和欄目標(biāo)題。

在<p>標(biāo)簽中,包含了<a>標(biāo)簽、<img>標(biāo)簽和<span>標(biāo)簽,分別定義了新聞欄目的圖片和欄目標(biāo)題。

.warp p { /*warp塊中<p>標(biāo)簽樣式*/    

float:left;                                         /*左浮動(dòng),使<p>標(biāo)簽下的圖片和標(biāo)題靠左*/    

width:156px;                                        /* <p>標(biāo)簽的寬度*/}

.warp p a {                                             /*<a>標(biāo)簽樣式*/    display:block;                                      /*定義<a>標(biāo)簽為塊級(jí)元素*/}

.warp p a:hover {    border:1px dashed #00f;                             /*當(dāng)鼠標(biāo)經(jīng)過時(shí)顯示邊框*/    }

.warp span a { /*warp塊下的<span>標(biāo)簽樣式也就是標(biāo)題樣式*/    height:22px;                                        /*高寬*/    

line-height:22px;                                   /*文字實(shí)現(xiàn)垂直居中*/    text-align:center;                                  /*水平居中*/}.warp span a:hover {                                    /*鼠標(biāo)經(jīng)過時(shí)的<span>標(biāo)簽樣式*/      border:0;                                         /*清除邊框*/      

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

在以上代碼中,定義了warp中的<p>標(biāo)簽樣式,在<p>標(biāo)簽中分別包含了一幅圖片和一個(gè)標(biāo)題,在這里關(guān)鍵是<a>標(biāo)簽和<span>標(biāo)簽的樣式設(shè)置。其中a和a:hover的樣式是針對(duì)圖片的設(shè)置,spana和span a:hover是針對(duì)標(biāo)題的樣式,其中bor-der:0是清除邊框,因?yàn)樵?a href="http://m.iy5y368.cn" target="_self" title="昆明網(wǎng)站制作">網(wǎng)頁設(shè)計(jì)時(shí),語句warp pa:hove{ border:1px dashed #00f;}樣式類中定義了<p>標(biāo)簽下所有的<a>標(biāo)簽顯示邊框,所以在這里需要清除邊框。

第7步,從圖4.38中可以看到,網(wǎng)頁基本已經(jīng)完成,最后再給warp中的<ul>標(biāo)簽進(jìn)行設(shè)置。

.warp ul {                    /*warp中ul樣式*/    

float:right;              /*右浮動(dòng)*/    

width:216px;              /*ul寬度*/

margin:5px 0px;           /*設(shè)置上下補(bǔ)白*/}

.warp ul li a:hover{          /*鼠標(biāo)經(jīng)過時(shí)的li效果*/    

color:red;}.clear {                      /*清除左右浮動(dòng)*/    clear:both;}

以上代碼設(shè)置了網(wǎng)站建設(shè)時(shí)warp中ul列表樣式,此時(shí)網(wǎng)頁完全創(chuàng)建完成。

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