如何在網頁設計中設計圖文混排列表效果

  • 2019-09-12 15:01:27
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

【操作步驟】

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

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

<div id="container">    

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

<h3>財經資訊</h3>                                     /*title部分的標題*/        

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

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

<li><a href="#">國際財經</a></li>            

<li><a href="#">汽車房產</a></li>        

</ul>

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

<p>                                                   /*content部分的標題*/            

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

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

</p>        

<ul>                                                 /*content部分的新聞內容*/            

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

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

<li>·<a href="#">所有省份制定大病保險實施方案 北京等全面推開</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="#">國際財經</a></span> 

</p>        

<ul>            

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

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

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

<li>·<a href="#">明年美國經濟增長3.1%</a></li>            

<li>·<a href="#">匯豐:2015年全球十大風險</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="#">國際財經</a></span> </p>        

<ul>            

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

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

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

<li>·<a href="#">明年美國經濟增長3.1%</a></li>            

<li>·<a href="#">匯豐:2015年全球十大風險</a></li>

  </ul>    

</div>    

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

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

<ul>            

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

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

<li>·<a href="#">2015年投產 豐田擴大投資提高Mirai產能  </a></li>            

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

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

</ul>    

</div>    

<div class="di"></div>                                /*清除浮動*/    </div></body>

網頁設計中,在整個container框架下,分別由title和con-tent兩塊組成,在title塊下,又包含了h3和ul兩部分。在content塊下,定義了<p>標簽和<ul>標簽。

第3步,在<head>標簽內添加<styletype="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,定義網頁基本屬性和wrap樣式。

* {/*網頁中所有標簽的共同樣式*/    

margin:0;                       /*外邊框為0*/    

padding:0;                      /*內邊框為0*/    

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

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

list-style:none;                /*不顯示項目符號*/}a {/*定義網頁中所有的<a>標簽樣式*/   

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

a:hover{    text-decoration:underline;      /*當鼠標經過時顯示下劃線*/}#wrap{/*wrap容器樣式*/    

width:418px;                   /*寬度*/    

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

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

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

第4步,設置title部分樣式。

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

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

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

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

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

float:left;                            /*左浮動*/    

ine-height:32px;                       /*行間距,實現文字垂直居中*/    

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

float:right;                           /*右浮動*/    width:230px;                           /*列表寬度*/}

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

padding:0 5px;                         /*左右補白5px*/}.title ul li a { /*<a>標簽樣式*/        

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

第5步,設置warp樣式。

.warp { /*warp塊樣式*/     

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

margin-left:15px;                     /*左側補白*/     

padding:15px 0 8px 0;                 /*頂部內邊距15px,底部內邊距8px*/     

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

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

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

.warp p { /*warp塊中<p>標簽樣式*/    

float:left;                                         /*左浮動,使<p>標簽下的圖片和標題靠左*/    

width:156px;                                        /* <p>標簽的寬度*/}

.warp p a {                                             /*<a>標簽樣式*/    display:block;                                      /*定義<a>標簽為塊級元素*/}

.warp p a:hover {    border:1px dashed #00f;                             /*當鼠標經過時顯示邊框*/    }

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

line-height:22px;                                   /*文字實現垂直居中*/    text-align:center;                                  /*水平居中*/}.warp span a:hover {                                    /*鼠標經過時的<span>標簽樣式*/      border:0;                                         /*清除邊框*/      

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

在以上代碼中,定義了warp中的<p>標簽樣式,在<p>標簽中分別包含了一幅圖片和一個標題,在這里關鍵是<a>標簽和<span>標簽的樣式設置。其中a和a:hover的樣式是針對圖片的設置,spana和span a:hover是針對標題的樣式,其中bor-der:0是清除邊框,因為在網頁設計時,語句warp pa:hove{ border:1px dashed #00f;}樣式類中定義了<p>標簽下所有的<a>標簽顯示邊框,所以在這里需要清除邊框。

第7步,從圖4.38中可以看到,網頁基本已經完成,最后再給warp中的<ul>標簽進行設置。

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

float:right;              /*右浮動*/    

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

margin:5px 0px;           /*設置上下補白*/}

.warp ul li a:hover{          /*鼠標經過時的li效果*/    

color:red;}.clear {                      /*清除左右浮動*/    clear:both;}

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

當前文章標題:如何在網頁設計中設計圖文混排列表效果

當前URL:http://m.supportcoffeeroasters.com/news/wzzz/3095.html

上一篇:如何在網頁設計中設計列表版式

下一篇:網頁設計中如何設計圖文展示欄目

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)