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

【操作步驟】

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

<div class="news-box">

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

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

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

<div class="info"> 

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

<span class="from">來(lái)源:<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ù)員酒后駕車(chē)等交通安全違法行為將列入年度考核。紀(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)重道路交通安全違法行為主要有：無(wú)駕駛證駕駛機(jī)動(dòng)車(chē)輛，發(fā)生道路交通事故后逃逸、故意破壞現(xiàn)場(chǎng)或者冒名頂替，飲酒后或醉酒駕駛機(jī)動(dòng)車(chē)輛，因抗拒或阻礙道路交通管理而受到行政處罰，因交通安全違法行為受到行政拘留處罰。</p>        

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

<span class="editor">(本文來(lái)源：<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í)所說(shuō)的語(yǔ)義化，可以通過(guò)瀏覽器直接瀏覽未添加CSS樣式的網(wǎng)頁(yè)（即網(wǎng)絡(luò)中所說(shuō)的“裸奔”），這樣可以讓頁(yè)面結(jié)構(gòu)、內(nèi)容層次清晰，即使在無(wú)樣式下都能使他人了解頁(yè)面中哪些信息是代表著什么含義的。

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

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

* {/*清除頁(yè)面中所有元素的內(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 字體就是宋體的英文寫(xiě)法*/        

color:#000000;    

border:1px solid #333333;    

background-color:#F6FAFD;}

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

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

第4步，整體的CSS樣式已經(jīng)差不多完成了，那么就可以開(kāi)始將其從頭到尾的修飾，先將新聞的標(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; 隱藏超過(guò)部分*/    

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ù)辈糠直容^特殊，有屬于其自己的背景色以及邊框，不過(guò)不用擔(dān)心，可以利用CSS樣式來(lái)達(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步，通過(guò)以上的CSS樣式定義，新聞內(nèi)容頁(yè)面已經(jīng)基本上完成了。只能說(shuō)是基本上已經(jīng)完成，有部分細(xì)節(jié)內(nèi)容還需要添加CSS樣式將其美化。部分細(xì)節(jié)主要體現(xiàn)在鏈接的文字顏色，以及部分特殊的文字鏈接樣式。

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

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

color:#1E50A2;}a:hover {/*設(shè)置頁(yè)面中所有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)在通過(guò)瀏覽器查看頁(yè)面效果。