在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)新聞列表

  • 2019-09-06 15:21:15
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

前面詳細(xì)介紹了CSS可設(shè)置的列表樣式,本節(jié)通過在網(wǎng)頁設(shè)計(jì)中新聞欄目實(shí)例練習(xí)CSS設(shè)置列表的方法,以及列表在網(wǎng)頁中的應(yīng)用。

【操作步驟】

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

第2步,構(gòu)建網(wǎng)頁結(jié)構(gòu)。在本示例中首先用3個(gè)<div>標(biāo)簽設(shè)置了新聞欄目的容器,在每一個(gè)<div>塊中分別用<ul>標(biāo)簽和<li>標(biāo)簽定義了新聞欄目和新聞標(biāo)題。

<div class="junshi">

<h2>軍事新聞<span>more...</span></h2>    

<ul>        

<li><a href="#">中國為何不怕美國 英國人一句話道出真相。</a> </li>        

<li><a href="#">日本記者南沙回來很感慨:終于領(lǐng)略中國的強(qiáng)大。</a></li>        

<li><a href="#">外媒:運(yùn)載馬航MH17殘骸卡車抵達(dá)荷蘭境內(nèi)。</a> </li>        

<li><a href="#">揭秘藏在中國的軍事間諜:自稱“軍迷”搜集資料。</a></li>    

</ul>

</div>

<div class="caijing">    

<h2>財(cái)經(jīng)資訊<span>more...</span>

</h2>    <ol>        <li><a href="#">莫迪亞諾小說年底密集上市 國內(nèi)出版商爭(zhēng)搶版權(quán)。</a> </li>        

<li> <a href="#">銀行間外匯市場(chǎng)事前準(zhǔn)入許可明年取消。  </a></li>        

<li><a href="#">華潤萬家花椒粉鉛超標(biāo)兩倍 稱是“土地”惹的禍。  </a></li>

<li> <a href="#">人民幣即期匯率兩天暴跌逾500點(diǎn)。</a></li>    

</ol>

</div><div class="yule">    

<h2>娛樂資訊<span>more...</span></h2>    

<ul>

<li><a href="#">林志玲張柏芝范冰冰章子怡 夜店性感狂野銷魂。</a> </li>        

<li><a href="#"> 《匆匆那年》熱映 歡樂六人行特輯爆主演趣事。  </a></li>        

<li><a href="#">杜德偉曝關(guān)之琳將結(jié)婚 指王菲嘉玲生日玩快閃。</a> </li>        

<li><a href="#">李晨鄧超Angelababy 細(xì)數(shù)《奔跑吧兄弟》嘉賓。</a></li>    

</ul>

</div>

此時(shí)網(wǎng)頁的基本結(jié)構(gòu)已經(jīng)搭建好了,但是由于在設(shè)計(jì)網(wǎng)頁時(shí)沒有進(jìn)行CSS樣式設(shè)置,界面中只是把文字內(nèi)容羅列起來,沒有任何修飾。

第3步,在網(wǎng)站建設(shè)中,在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,定義網(wǎng)頁基本屬性、新聞欄目的樣式以及文字“more…”樣式。

body {                                             /*網(wǎng)頁基本屬性*/   

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

font-family: "黑體";                           /*字體樣式*/    

margin: 0px;                                   /*清除頁邊距*/    

padding: 0px;                                  /*清除頁邊距*/    

background:url(images/bg.png) no-repeat;       /*模擬新聞欄目頁面效果*/}

h2 {                                               /*新聞欄目的文本樣式*/    margin: 24px 0 0 5px;                          /*新聞欄目文字上下補(bǔ)白*/    

color: #006699;    font-size: 16px;}

h2 span {                                          /*文字“more…”的顯示樣式*/    

color: #999;    float: right;                                  /*右對(duì)齊*/}

以上代碼中,設(shè)置了頁面的基本屬性,<h2>標(biāo)簽的內(nèi)容是新聞的欄目,設(shè)置了其字體顏色、大小等屬性。<span>標(biāo)簽的內(nèi)容是文字“more…”,

第4步,定義網(wǎng)頁<div>塊,也就是新聞欄目塊的共有屬性。

div{                       /*每一個(gè)新聞欄目塊的樣式*/    

line-height:16pt;      /*行間距*/    

width:400px;           /*塊的寬度*/    

margin:10px 0 0 10px;  /*各個(gè)新聞塊之間距離*/}

第5步,為列表<ul>和<ol>添加CSS樣式。

.part1 ul{                            /*第一個(gè)新聞塊的列表樣式*/     

margin-left:40px;                /*文字左側(cè)離邊框的距離*/     

list-style-type:upper-alpha;     /*項(xiàng)目符號(hào)是大寫字母*/}.part2 ol {                           /*第二個(gè)新聞塊的列表樣式*/    

margin-left:40px;    

list-style-type: upper-roman;     /*項(xiàng)目符號(hào)是大寫羅馬字母*/}.part3 ul {                           /*第三個(gè)新聞塊的列表樣式*/    

margin-left:40px;    

list-style-type: circle;          /*項(xiàng)目符號(hào)是空心圓*/}

以上代碼中,分別設(shè)置了3個(gè)新聞欄目的列表樣式。可以看到,項(xiàng)目符號(hào)和編號(hào)按設(shè)置的樣式進(jìn)得了顯示。

第6步,從圖4.17中可以看出,網(wǎng)頁已初見效果,最后定義<li>標(biāo)簽和<a>標(biāo)簽的樣式。

li { /*<li>標(biāo)簽樣式,也就是新聞標(biāo)題樣式*/    

margin:5px 0 5px 0;      /*每條新聞標(biāo)題之間間隔*/}a { /*鏈接樣式*/    

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

color:#000;}此時(shí)新聞欄目示例設(shè)計(jì)完成。

當(dāng)前文章標(biāo)題:在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)新聞列表

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3091.html

上一篇:在網(wǎng)頁設(shè)計(jì)中定義列表橫豎顯示

下一篇:網(wǎng)頁設(shè)計(jì)中的導(dǎo)航列表

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