網(wǎng)頁設(shè)計(jì)中的段落版式

  • 2019-08-05 14:40:40
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

本示例通過網(wǎng)上常見的一則新聞,介紹了在制作網(wǎng)頁時(shí)設(shè)置段落版式樣式的方法,從而進(jìn)一步講述CSS段落的排版方法。

【操作步驟】

第1步,構(gòu)建網(wǎng)頁結(jié)構(gòu)??紤]到在設(shè)計(jì)網(wǎng)頁時(shí)頁面中有標(biāo)題和正文兩部分,所以頁面在結(jié)構(gòu)上分為上下兩部分,分別是header和main,用<div>標(biāo)簽進(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>據(jù)英國《太陽報(bào)》7月31日?qǐng)?bào)道,英國史上最大的航母—“伊利莎白女王”級(jí)航母的一個(gè)關(guān)鍵主體模塊已經(jīng)完成,即將被運(yùn)往蘇格蘭羅塞斯船廠開始整體組裝?!短枅?bào)》軍事記者弗吉尼亞·惠勒日前得到特別授權(quán),參觀了負(fù)責(zé)該模塊生產(chǎn)的法爾費(fèi)德船廠,走近了這艘被譽(yù)為“海上之城”的巨艦。惠勒在報(bào)道開篇就激動(dòng)地描述道:“當(dāng)8000噸重的模塊從船廠被吊出時(shí),場(chǎng)面就像巨鯨浮上水面一般,這頭由鋼鐵鑄成的龐然大物融合了高新技術(shù),是強(qiáng)大軍事力量的象征?!?lt;/P>        

<P>法爾費(fèi)德船廠的項(xiàng)目負(fù)責(zé)人斯圖爾特·威爾遜表示,這艘航母非常龐大。據(jù)悉,有人說它大到被稱為“21世紀(jì)的諾亞方舟”,大到英國政府動(dòng)用全國6大造船基地分別制造船體的主要模塊,大到有上萬名技師參與建造工作。“伊麗莎白女王”級(jí)航母在很多英國人眼中的意義僅次于2012年倫敦奧運(yùn)會(huì)。法爾費(fèi)德船廠所負(fù)責(zé)的是3號(hào)下層甲板模塊的制造。一支由850名精兵強(qiáng)將組成的團(tuán)隊(duì)從2009年動(dòng)工起,每天三班倒,保證造船工作24小時(shí)不間斷。目前該模塊已制造完畢,共用掉鋼材5600噸、電纜30.3萬米、管道1萬米,重量接近9000噸。</p>        

<p>從這組數(shù)字來看,“伊麗莎白女王”級(jí)航母的這一個(gè)模塊就在重量上超過了號(hào)稱“歐洲第一艦”的英國“勇敢”級(jí)45型驅(qū)逐艦,而航母的排水量預(yù)計(jì)可達(dá)到6.5萬噸。</P>        

<P>一名負(fù)責(zé)為巨艦編程的英國航空航天系統(tǒng)公司的主管表示:“‘伊麗莎白女王’級(jí)航母無疑會(huì)在未來的數(shù)10年中以英國海軍旗艦的身份出現(xiàn),她將在英國航海史上樹立新的里程碑”。由于國防軍費(fèi)下調(diào)和財(cái)政資金短缺,英國軍方曾有不少人擔(dān)心耗資龐大的航母建造項(xiàng)目會(huì)被叫停。英國審計(jì)部門的官員此前也對(duì)這艘巨艦的未來表示了擔(dān)心,稱其資金需求可能會(huì)飆升到預(yù)算的兩倍。倫敦已經(jīng)考慮為“伊麗莎白女王”級(jí)航母購進(jìn)更便宜的裝備,這一變動(dòng)為審計(jì)和財(cái)政部門所歡迎,卻為軍方所反對(duì)。 </p>    

</div>    <div class="footer">        

<div>            

<ul>                

<li><a href="#">日《防衛(wèi)白皮書》</a></li>                

<li><a href="#">安理會(huì)通過聲明 譴責(zé)敘利亞當(dāng)局對(duì)平民用武力</a></li>

<li><a href="#">巴34歲美女外長驚艷訪印 打通印巴對(duì)話之門</a></li>                

<li><a href="#">敘利亞局勢(shì)緊張 安理會(huì)閉門磋商</a></li>            

</ul>        

</div>        

<div>            

<ul>                

<li><a href="#">美化學(xué)武器庫發(fā)生芥子氣泄漏</a></li>                

<li><a href="#">美提高債務(wù)上限同時(shí)提升軍費(fèi)為確保霸主地位</a></li>                

<li><a href="#">加拿大與美國海軍聯(lián)合在北極展開軍事使命</a></li>                

<li><a href="#">阿富汗和平進(jìn)程疑問重重 巴美合作但合力有限</a></li>            

</ul>        

</div>    

</div>

</div>

在整體的container框架下,頁面分為header和main兩部分。在header下,分別定義了<h1>標(biāo)簽和<p>標(biāo)簽。在main下,分別定義3個(gè)<p>標(biāo)簽的文本段落。

第2步,定義網(wǎng)頁基本屬性。

body{     background-color:#f1e2d9;

 font-family:"宋體";    

 text-align:center;}.container{     

width:800px;     

border:2px solid #c1bebc;     

margin:0px auto;     

background-color:#c0f5ef;}

在以上代碼中,body標(biāo)簽定義了背景色、字體類型和對(duì)齊方式等屬性。在container中定義了container容器的寬度為800px,另外使用bor-der:2px solid #c1bebc語句為container容器的四周添加了邊框,在網(wǎng)站建設(shè)時(shí),這種添加邊框的方法是一個(gè)由3個(gè)部分組成的語句:寬度、式樣、顏色。讀者可以試著改變它們的值以產(chǎn)生不同的效果。需要特別指出的是,在<body>標(biāo)簽中定義了text-align:center,在container中定義了margin:0px auto,兩條語句配合使用,目的是使container容器水平居中,而且只有兩條語句配合使用才使網(wǎng)頁有更強(qiáng)的兼容性。

注意:只在<body>標(biāo)簽中定義text-align:cen-ter,而不在container中定義mar-gin:0px auto,只能在Firefox瀏覽器中居中顯示,不能兼容IE。只在container中定義margin:0px auto而不在<body>標(biāo)簽中定義text-align:center,會(huì)使有些低版本IE無法兼容。

第3步,設(shè)置header部分樣式。

.header{    

width:800px;                             /

*header寬度*/    

border-bottom:1px solid 

#c1bebc;         /*下邊框*/}

h1{    

font-family:"黑體";    

margin-top:50px;                         /*標(biāo)題文字上方補(bǔ)白為50px*/}

.headline{    

color:#000099;    

text-align:center;}

在上方代碼中,首先定義了header容器的樣式,并在容器的下方添加一條寬為1px的邊框。

在<h1>標(biāo)簽中定義了標(biāo)題的字體類型,以及用mar-gin-top:50px語句定義標(biāo)題文字上方補(bǔ)白為50px。用headline定義了副標(biāo)題樣式。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的段落版式

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

上一篇:設(shè)計(jì)網(wǎng)頁正文樣式

下一篇:網(wǎng)頁設(shè)計(jì)中的單頁圖文混排版式

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