本示例通過(guò)網(wǎng)上常見(jiàn)的一則新聞，介紹了在制作網(wǎng)頁(yè)時(shí)設置段落版式樣式的方法，從而進(jìn)一步講述CSS段落的排版方法。
【操作步驟】
第1步，構建網(wǎng)頁(yè)結構?？紤]到在設計網(wǎng)頁(yè)時(shí)頁(yè)面中有標題和正文兩部分，所以頁(yè)面在結構上分為上下兩部分，分別是header和main，用<div>標簽進(jìn)行分塊。
<div class="container">
<div class="header">
<h1>英國史上最大航母即將組裝 將成英海軍旗艦</h1>
<p class="p1">2014年8月4日11：01 環(huán)球軍事</p>
</div>
<div class="main">
<p>據英國《太陽(yáng)報》7月31日報道，英國史上最大的航母—“伊利莎白女王”級航母的一個(gè)關(guān)鍵主體模塊已經(jīng)完成，即將被運往蘇格蘭羅塞斯船廠(chǎng)開(kāi)始整體組裝?！短?yáng)報》軍事記者弗吉尼亞·惠勒日前得到特別授權，參觀(guān)了負責該模塊生產(chǎn)的法爾費德船廠(chǎng)，走近了這艘被譽(yù)為“海上之城”的巨艦?；堇赵趫蟮篱_(kāi)篇就激動(dòng)地描述道：“當8000噸重的模塊從船廠(chǎng)被吊出時(shí)，場(chǎng)面就像巨鯨浮上水面一般，這頭由鋼鐵鑄成的龐然大物融合了高新技術(shù)，是強大軍事力量的象征?！?lt;/P>
<P>法爾費德船廠(chǎng)的項目負責人斯圖爾特·威爾遜表示，這艘航母非常龐大。據悉，有人說(shuō)它大到被稱(chēng)為“21世紀的諾亞方舟”，大到英國政府動(dòng)用全國6大造船基地分別制造船體的主要模塊，大到有上萬(wàn)名技師參與建造工作?！耙聋惿着酢奔壓侥冈诤芏嘤搜壑械囊饬x僅次于2012年倫敦奧運會(huì )。法爾費德船廠(chǎng)所負責的是3號下層甲板模塊的制造。一支由850名精兵強將組成的團隊從2009年動(dòng)工起，每天三班倒，保證造船工作24小時(shí)不間斷。目前該模塊已制造完畢，共用掉鋼材5600噸、電纜30.3萬(wàn)米、管道1萬(wàn)米，重量接近9000噸。</p>
<p>從這組數字來(lái)看，“伊麗莎白女王”級航母的這一個(gè)模塊就在重量上超過(guò)了號稱(chēng)“歐洲第一艦”的英國“勇敢”級45型驅逐艦，而航母的排水量預計可達到6.5萬(wàn)噸。</P>
<P>一名負責為巨艦編程的英國航空航天系統公司的主管表示：“‘伊麗莎白女王’級航母無(wú)疑會(huì )在未來(lái)的數10年中以英國海軍旗艦的身份出現，她將在英國航海史上樹(shù)立新的里程碑”。由于國防軍費下調和財政資金短缺，英國軍方曾有不少人擔心耗資龐大的航母建造項目會(huì )被叫停。英國審計部門(mén)的官員此前也對這艘巨艦的未來(lái)表示了擔心，稱(chēng)其資金需求可能會(huì )飆升到預算的兩倍。倫敦已經(jīng)考慮為“伊麗莎白女王”級航母購進(jìn)更便宜的裝備，這一變動(dòng)為審計和財政部門(mén)所歡迎，卻為軍方所反對。 </p>
</div> <div class="footer">
<div>
<ul>
<li><a href="#">日《防衛白皮書(shū)》</a></li>
<li><a href="#">安理會(huì )通過(guò)聲明 譴責敘利亞當局對平民用武力</a></li>
<li><a href="#">巴34歲美女外長(cháng)驚艷訪(fǎng)印 打通印巴對話(huà)之門(mén)</a></li>
<li><a href="#">敘利亞局勢緊張 安理會(huì )閉門(mén)磋商</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">美化學(xué)武器庫發(fā)生芥子氣泄漏</a></li>
<li><a href="#">美提高債務(wù)上限同時(shí)提升軍費為確保霸主地位</a></li>
<li><a href="#">加拿大與美國海軍聯(lián)合在北極展開(kāi)軍事使命</a></li>
<li><a href="#">阿富汗和平進(jìn)程疑問(wèn)重重 巴美合作但合力有限</a></li>
</ul>
</div>
</div>
</div>
在整體的container框架下，頁(yè)面分為header和main兩部分。在header下，分別定義了<h1>標簽和<p>標簽。在main下，分別定義3個(gè)<p>標簽的文本段落。
第2步，定義網(wǎng)頁(yè)基本屬性。
body{ background-color:#f1e2d9;
font-family:"宋體";
text-align:center;}.container{
width:800px;
border:2px solid #c1bebc;
margin:0px auto;
background-color:#c0f5ef;}
在以上代碼中，body標簽定義了背景色、字體類(lèi)型和對齊方式等屬性。在container中定義了container容器的寬度為800px，另外使用bor-der:2px solid #c1bebc語(yǔ)句為container容器的四周添加了邊框，在網(wǎng)站建設時(shí)，這種添加邊框的方法是一個(gè)由3個(gè)部分組成的語(yǔ)句：寬度、式樣、顏色。讀者可以試著(zhù)改變它們的值以產(chǎn)生不同的效果。需要特別指出的是，在<body>標簽中定義了text-align:center，在container中定義了margin:0px auto，兩條語(yǔ)句配合使用，目的是使container容器水平居中，而且只有兩條語(yǔ)句配合使用才使網(wǎng)頁(yè)有更強的兼容性。
注意：只在<body>標簽中定義text-align:cen-ter，而不在container中定義mar-gin:0px auto，只能在Firefox瀏覽器中居中顯示，不能兼容IE。只在container中定義margin:0px auto而不在<body>標簽中定義text-align:center，會(huì )使有些低版本IE無(wú)法兼容。
第3步，設置header部分樣式。
.header{
width:800px; /
*header寬度*/
border-bottom:1px solid
#c1bebc; /*下邊框*/}
h1{
font-family:"黑體";
margin-top:50px; /*標題文字上方補白為50px*/}
.headline{
color:#000099;
text-align:center;}
在上方代碼中，首先定義了header容器的樣式，并在容器的下方添加一條寬為1px的邊框。
在<h1>標簽中定義了標題的字體類(lèi)型，以及用mar-gin-top:50px語(yǔ)句定義標題文字上方補白為50px。用headline定義了副標題樣式。
當前文章標題：網(wǎng)頁(yè)設計中的段落版式
當前URL：http://amzcoolest.com/news/wzzz/3067.html
