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

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

  • 2019-09-12 15:01:27
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://mnamateurbaseball.com

【操作步驟】

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

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

<div id="container">    

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

<h3>財經(jīng)資訊</h3>                                     /*title部分的標題*/        

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

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

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

<li><a href="#">汽車房產(chǎn)</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部分的新聞內(nèi)容*/            

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

<li>·<a href="#">美聯(lián)儲出臺系統(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="#">國際財經(jīng)</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="#">明年美國經(jīng)濟增長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="#">國際財經(jīng)</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="#">明年美國經(jīng)濟增長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="#">汽車房產(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) 豐田擴大投資提高Mirai產(chǎn)能  </a></li>            

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

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

</ul>    

</div>    

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

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

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

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

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

padding:0;                      /*內(nèi)邊框為0*/    

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

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

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

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

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

width:418px;                   /*寬度*/    

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

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

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

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

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

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

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

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

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

float:left;                            /*左浮動*/    

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

padding-left:20px;                     /*左側(cè)內(nèi)間距*/}.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步,設(shè)置warp樣式。

.warp { /*warp塊樣式*/     

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

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

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

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

第6步,完成warp塊中<p>標簽樣式的設(shè)置,在<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;                             /*當鼠標經(jīng)過時顯示邊框*/    }

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

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

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

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

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

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

float:right;              /*右浮動*/    

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

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

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

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

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

當前文章標題:如何在網(wǎng)頁設(shè)計中設(shè)計圖文混排列表效果

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

上一篇:如何在網(wǎng)頁設(shè)計中設(shè)計列表版式

下一篇:網(wǎng)頁設(shè)計中如何設(shè)計圖文展示欄目

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)