網(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ù)員酒后駕車列入年度考核</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ù)員酒后駕車等交通安全違法行為將列入年度考核。紀(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)車輛，發(fā)生道路交通事故后逃逸、故意破壞現(xiàn)場(chǎng)或者冒名頂替，飲酒后或醉酒駕駛機(jī)動(dòng)車輛，因抗拒或阻礙道路交通管理而受到行政處罰，因交通安全違法行為受到行政拘留處罰。</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è)面效果。
當(dāng)前文章標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)中的設(shè)計(jì)新聞內(nèi)容頁(yè)
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/3069.html
