網(wǎng)頁設(shè)計(jì)中的新聞內(nèi)容主要包含了新聞標(biāo)題、新聞?wù)?、新聞發(fā)布相關(guān)信息、新聞內(nèi)容以及相關(guān)討論等內(nèi)容。在網(wǎng)頁設(shè)計(jì)時(shí)，在HTML代碼中相對(duì)應(yīng)地采用可以相關(guān)聯(lián)的HTML標(biāo)簽，使HTML代碼結(jié)構(gòu)相對(duì)性地更具有語義化。

【操作步驟】

第1步，構(gòu)建網(wǎng)頁結(jié)構(gòu)。根據(jù)圖2.74的結(jié)構(gòu)分析，可以將新聞內(nèi)容頁的內(nèi)容區(qū)域在HTML代碼中的結(jié)構(gòu)表示如下：

<div class="news-box">

 <!--新聞標(biāo)題S-->    <h1>上海市將公務(wù)員酒后駕車列入年度考核</h1>    

<!--新聞標(biāo)題E-->    

<!--新聞相關(guān)信息S-->    

<div class="info"> 

<span class="date">2014-05-23 19:05:37</span> 

<span class="from">來源:<a href="#">新華網(wǎng)</a>

</span> 

<a href="#" class="comments_num">跟貼 23 條</a> 

<a href="#">手機(jī)看新聞</a> 

</div>    

<!--新聞相關(guān)信息E-->    

<!--新聞?wù)猄-->    

<div class="summary">        

<h2>新聞?wù)?lt;/h2>        

<p>核心提示：上海市日前規(guī)定，公務(wù)員酒后駕車等交通安全違法行為將列入年度考核。紀(jì)委給予交通違法人相應(yīng)處分、誡勉談話或通報(bào)批評(píng)。</p>    

</div>    

< !-- 新聞?wù)?nbsp; E -->

 <!-- 新聞內(nèi)容  S -->    

<div class="content">        

<h2>新聞內(nèi)容：</h2>        

<p><strong>新華網(wǎng) 5 月 23 日電</strong> 上海市紀(jì)委、組織部、公安局、監(jiān)察局日前聯(lián)合作出規(guī)定：機(jī)關(guān)、事業(yè)單位工作人員嚴(yán)重道路交通安全違法行為，向當(dāng)事人所在單位抄告，并列入干部年度考核的依據(jù)之一。</p>        

<p>上海市紀(jì)委認(rèn)定的嚴(yán)重道路交通安全違法行為主要有：無駕駛證駕駛機(jī)動(dòng)車輛，發(fā)生道路交通事故后逃逸、故意破壞現(xiàn)場(chǎng)或者冒名頂替，飲酒后或醉酒駕駛機(jī)動(dòng)車輛，因抗拒或阻礙道路交通管理而受到行政處罰，因交通安全違法行為受到行政拘留處罰。</p>        

<p>省略部分內(nèi)容，信息來源于網(wǎng)絡(luò)！

<span class="editor">(本文來源：<a href="#">新華網(wǎng)</a> 作者：張和平)</span></p>    

</div>

<!--新聞內(nèi)容E-->    

<!--新聞評(píng)論S-->    

<div class="comments"><a href="#">【已有<em>23</em>位網(wǎng)友發(fā)表了看法，點(diǎn)擊查看?！?lt;/a></div>    

<!--新聞評(píng)論E-->

</div>

為了能在網(wǎng)站建設(shè)時(shí)體現(xiàn)剛剛在分析結(jié)構(gòu)時(shí)所說的語義化，可以通過瀏覽器直接瀏覽未添加CSS樣式的網(wǎng)頁（即網(wǎng)絡(luò)中所說的“裸奔”），這樣可以讓頁面結(jié)構(gòu)、內(nèi)容層次清晰，即使在無樣式下都能使他人了解頁面中哪些信息是代表著什么含義的。

第2步，但最終一個(gè)頁面是需要通過CSS樣式的美化才能更漂亮，因此需要根據(jù)設(shè)計(jì)稿將頁面美化。

首先，將頁面中所有元素的內(nèi)外補(bǔ)丁全部清零，并將.news-box這個(gè)容器設(shè)置寬度、文字大小、背景色等樣式。

* {/*清除頁面中所有元素的內(nèi)外補(bǔ)丁*/    margin:0;

 padding:0;}

.news-box {/*設(shè)置新聞內(nèi)容區(qū)域的寬度，并設(shè)置文字大小、顏色等樣式*/    

width:580px;    

padding:10px;    

font:normal 14px/1.5em simsun, Verdana,Lucida, Arial, Helvetica, sans-serif; /*simsun 字體就是宋體的英文寫法*/        

color:#000000;    

border:1px solid #333333;    

background-color:#F6FAFD;}

第3步，根據(jù)設(shè)計(jì)稿所示，HTML結(jié)構(gòu)中的“新聞?wù)焙汀靶侣剝?nèi)容”是不需要顯示在頁面中，因此可以在CSS樣式中將其隱藏。

.news-box h2 { /*隱藏新聞內(nèi)容區(qū)域中不需要的標(biāo)題*/    display:none;}

第4步，整體的CSS樣式已經(jīng)差不多完成了，那么就可以開始將其從頭到尾的修飾，先將新聞的標(biāo)題h1標(biāo)簽中的文字樣式修飾一下。

.news-box h1 {/*設(shè)置新聞標(biāo)題的樣式高度為30px，寬度為默認(rèn)值auto，并添加行高以及設(shè)置文字大小*/    

height:20px;    

padding:5px 0;    

line-height:26px;   

 overflow:hidden; /*行高比高度屬性值大，設(shè)置overflow:hidden; 隱藏超過部分*/    

font-size:20px;}

第5步，對(duì)“新聞相關(guān)信息”文字添加CSS樣式進(jìn)行美化。

.news-box .info {/*設(shè)置新聞相關(guān)信息樣式，添加外補(bǔ)丁，使其與內(nèi)容信息產(chǎn)生間距*/    

height:20px;    

margin-bottom:15px;

  font-size:12px;}

第6步，“新聞?wù)辈糠直容^特殊，有屬于其自己的背景色以及邊框，不過不用擔(dān)心，可以利用CSS樣式來達(dá)到效果。

.news-box .summary { /*設(shè)置新聞?wù)獌?nèi)容區(qū)域的樣式*/    

padding:5px;    

margin-bottom:10px;    

text-indent:2em; /*首行縮進(jìn)2個(gè)漢字的寬度*/    

border:1px solid #DCDDDD;    

background-color:#FFFFFF;}

第7步，“新聞內(nèi)容”區(qū)域的文字信息都是存在段落p標(biāo)簽中的，其中的strong加強(qiáng)標(biāo)簽代表著該處內(nèi)容是“新聞內(nèi)容”區(qū)域中需要強(qiáng)調(diào)的部分，將每個(gè)段落的行間距加大，并設(shè)置首行縮進(jìn)。

.news-box .content p {/*新聞內(nèi)容區(qū)域的每個(gè)段落加大行間距（行高），并首行縮進(jìn)，段落與段落之間存在一點(diǎn)間距*/    

margin-bottom:10px;    

line-height:22px;    

text-indent:2em;}

第8步，最后一個(gè)“相關(guān)討論”區(qū)域的內(nèi)容也要將其用CSS樣式美化，主要體現(xiàn)就是背景色以及上下兩邊的邊框樣式，還有高度的屬性。

.news-box .comments {/*設(shè)置討論區(qū)域上下邊框樣式為虛線的灰色，背景色為白色*/    

height:30px;    

padding:0 5px;    

line-height:30px; /*行高屬性值與高度屬性值相同，可將單行文字垂直居中顯示*/    

border-top:1px dashed #AFAFB0;    

border-bottom:1px dashed #AFAFB0;    

background-color:#FFFFFF;}

第9步，通過以上的CSS樣式定義，新聞內(nèi)容頁面已經(jīng)基本上完成了。只能說是基本上已經(jīng)完成，有部分細(xì)節(jié)內(nèi)容還需要添加CSS樣式將其美化。部分細(xì)節(jié)主要體現(xiàn)在鏈接的文字顏色，以及部分特殊的文字鏈接樣式。

那么最后需要做的事情就是將文檔中文字鏈接的樣式美化一下。

a {/*設(shè)置頁面中所有a鏈接的顏色*/    

color:#1E50A2;}a:hover {/*設(shè)置頁面中所有a鏈接被觸發(fā)時(shí)的顏色以及下劃線消失*/    

color:#BA2636;    

text-decoration:none;}

a.comments_num {/*設(shè)置新聞相關(guān)信息處的跟帖信息鏈接的文字顏色*/    

color:#BA2636;}

.comments a em {/*設(shè)置新聞評(píng)論處的評(píng)論數(shù)據(jù)文字樣式非傾斜*/    

font-style:normal;}

第10步，細(xì)節(jié)部分修飾完畢，現(xiàn)在通過瀏覽器查看頁面效果。