本示例通過(guò)網(wǎng)上常見(jiàn)的一則新聞?wù)捻?yè)，介紹如何在制作網(wǎng)頁(yè)時(shí)設(shè)置段落版式樣式的方法，進(jìn)一步講述CSS段落的排版方法。
【操作步驟】
第1步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。使用<div>標(biāo)簽，設(shè)置container為頁(yè)面整體框架，在此框架下分別定義了<h1>標(biāo)簽、3個(gè)<p>標(biāo)簽，在p標(biāo)簽中又定義了<span>標(biāo)簽，目的是為文本添加特殊效果。
<div class="container">
<h1>人口紅利持續(xù)衰減 “未富先老”考驗(yàn)中國(guó)</h1>
<p ><span class="sh">過(guò)</span>去30多年，伴隨著中共主導(dǎo)的改革開(kāi)放不斷深化，中國(guó)在通往現(xiàn)代化和民族復(fù)興的道路上一路“飛奔”。但歷史無(wú)法簡(jiǎn)單復(fù)制。國(guó)際金融危機(jī)的沖擊，以及日趨老齡化的人口結(jié)構(gòu)，中國(guó)經(jīng)濟(jì)發(fā)展遭遇眾多瓶頸，讓中共意識(shí)到轉(zhuǎn)變發(fā)展方式已刻不容緩。中共中央總書(shū)記胡錦濤在談及此問(wèn)題時(shí)，曾罕見(jiàn)地連用了50個(gè)“加快”。
中國(guó)社科院人口與勞動(dòng)經(jīng)濟(jì)研究所副所長(zhǎng)張車(chē)偉在接受中新社記者采訪時(shí)表示，到2025年，中國(guó)的人口紅利將徹底消失。要實(shí)現(xiàn)經(jīng)濟(jì)的騰飛，中國(guó)必須力爭(zhēng)在此之前完成發(fā)展方式的轉(zhuǎn)變。否則，就只能停在半路，陷入“中等收入陷阱”。中國(guó)國(guó)家統(tǒng)計(jì)局最新數(shù)據(jù)顯示，目前中國(guó)60歲及以上人口占總?cè)丝跀?shù)的13.26%，比 10年前上升了<span class="s1">2.93</span>個(gè)百分點(diǎn)。張車(chē)偉表示，人口變化趨勢(shì)不可逆轉(zhuǎn)。
老齡化加速而來(lái)，意味著“人口紅利”將持續(xù)衰減。如今，中國(guó)已經(jīng)顯現(xiàn)出“未富先老”特征，其經(jīng)濟(jì)發(fā)展將面臨嚴(yán)峻的考驗(yàn)。<img src='images/1.jpg'> 張車(chē)偉解釋說(shuō)，中國(guó)人口撫養(yǎng)比自20世紀(jì)60年代中期起開(kāi)始下降，但由于種種因素，中國(guó)當(dāng)時(shí)并沒(méi)能將潛在人口紅利轉(zhuǎn)變?yōu)楝F(xiàn)實(shí)推動(dòng)力。他指出，改革開(kāi)放以來(lái)，中國(guó)之所以能夠創(chuàng)造世界發(fā)展史上的奇跡，很重要的一個(gè)原因，就是將經(jīng)濟(jì)發(fā)展模式與人口結(jié)構(gòu)特點(diǎn)相結(jié)合，發(fā)揮勞動(dòng)力資源充沛的優(yōu)勢(shì)，通過(guò)發(fā)展勞動(dòng)密集型產(chǎn)業(yè)和出口導(dǎo)向，推動(dòng)國(guó)民經(jīng)濟(jì)高速增長(zhǎng)。在上述發(fā)展模式的推動(dòng)下，中國(guó)經(jīng)濟(jì)從頻臨崩潰邊緣發(fā)展為總量躍居世界第二，人民生活從溫飽不足發(fā)展到總體小康。</p>
<p>但金融危機(jī)后，發(fā)達(dá)國(guó)家過(guò)度消費(fèi)拉動(dòng)全球經(jīng)濟(jì)增長(zhǎng)的需求動(dòng)力結(jié)構(gòu)正在發(fā)生變化。伴隨著老齡化的加深，中國(guó)人口特點(diǎn)顯現(xiàn)出勞動(dòng)適齡人口下降以及社會(huì)總撫養(yǎng)比上升的趨勢(shì)。張車(chē)偉指出，勞動(dòng)力供給不再源源不斷，中國(guó)經(jīng)濟(jì)要繼續(xù)向前邁進(jìn)，必須將過(guò)去那種依靠要素投入刺激經(jīng)濟(jì)增長(zhǎng)的發(fā)展模式轉(zhuǎn)到依靠生產(chǎn)率提高及技術(shù)進(jìn)步推動(dòng)的經(jīng)濟(jì)增長(zhǎng)上來(lái)。不過(guò)，一個(gè)總量近<span class="s2">40萬(wàn)億元人民幣</span>的經(jīng)濟(jì)體要完成轉(zhuǎn)身絕非易事。經(jīng)濟(jì)學(xué)家吳敬璉回憶說(shuō)，早在1981年中國(guó)國(guó)務(wù)院就曾提出，要把經(jīng)濟(jì)發(fā)展轉(zhuǎn)移到效率提高的基礎(chǔ)上去。但多年來(lái)的實(shí)踐表明，轉(zhuǎn)型的路上會(huì)有著諸多挑戰(zhàn)。在張車(chē)偉看來(lái)，最大的挑戰(zhàn)在于創(chuàng)新。
他表示，目前，中國(guó)經(jīng)濟(jì)依靠外部驅(qū)動(dòng)的特征比較明顯，技術(shù)來(lái)源于外部，產(chǎn)品銷(xiāo)往外部，這和中國(guó)創(chuàng)新能力的不足有密切的關(guān)系。未來(lái)，必須加強(qiáng)創(chuàng)新能力的培養(yǎng)。擴(kuò)內(nèi)需也是當(dāng)務(wù)之急。張車(chē)偉指出，中國(guó)要確保內(nèi)需的增長(zhǎng)，需要做好三件事情。首先，加快勞動(dòng)者工資的增長(zhǎng)，至少與勞動(dòng)生產(chǎn)率的增長(zhǎng)同步。其次，健全社會(huì)保障體系，避免有錢(qián)不敢花錢(qián)的現(xiàn)象。再次，要進(jìn)行完全的城市化。目前進(jìn)入到城市的人都是年輕的人，農(nóng)村的留守老人生活艱難。今后城市化，要讓老年人也進(jìn)入到城市當(dāng)中去。</p>
<p>此外，政府職能的轉(zhuǎn)變也十分關(guān)鍵。張車(chē)偉說(shuō)，中國(guó)此前的增長(zhǎng)和政府的主導(dǎo)是密不可分的。但今后，政府應(yīng)該把主要精力從關(guān)注經(jīng)濟(jì)增長(zhǎng)轉(zhuǎn)移到為社會(huì)提供公共服務(wù)上來(lái)。</p></div>
網(wǎng)頁(yè)設(shè)計(jì)中，在整體的container框架下，分別定義了<h1>標(biāo)簽和3個(gè)<p>標(biāo)簽的文本段落。此時(shí)的顯示效果極其簡(jiǎn)單，僅僅是簡(jiǎn)單的文字和標(biāo)題，并沒(méi)有友好的界面。
第2步，定義網(wǎng)頁(yè)基本屬性。
body{ font-family:"宋體";
text-align:center;
background-color:#445545;}.container{
width:850px;
border:1px solid #66CCFF;
margin:0px auto;
padding:40px 40px 80px 40px;
background-color:#CCCCCC;
在以上代碼中，body標(biāo)簽定義了背景色、字體類(lèi)型和對(duì)齊方式等屬性。在container中定義了container容器的寬度為850px，另外使用border語(yǔ)句為container容器的四周添加了邊框。，在<body>標(biāo)簽中定義了text-align:center，在container中定義了margin:0pxauto，兩條語(yǔ)句配合使用，目的是使container容器水平居中。
第3步，設(shè)置標(biāo)題樣式。
h1{
font-weight:bold;
color:#000066;
margin:20px auto; /*標(biāo)題文字上邊界和下邊界為20px*/}
在上方代碼中，首先定義了標(biāo)題的字體粗細(xì)為bold，用margin:20px auto語(yǔ)句定義標(biāo)題文字上邊界和下邊界為20px，左右邊界為瀏覽器自動(dòng)適應(yīng)寬度。
第4步，此時(shí)，網(wǎng)頁(yè)的基本樣式已經(jīng)初見(jiàn)端倪，但是段落文本還沒(méi)有進(jìn)行設(shè)置，接下來(lái)對(duì)段落添加CSS樣式控制。
.container p{
font-size:14px;
text-align:left;
margin:0;
padding:0;
line-height:1.8em;}
.p1{ text-indent:2em;}
在以上代碼中，p標(biāo)簽定義了所有段落的樣式，包括字體大小、對(duì)齊方式、行間距等，用margin:0和padding:0來(lái)定義段落之間的間距為0。在p1中設(shè)置了首行縮進(jìn)，這一設(shè)置專門(mén)針對(duì)的是第二個(gè)<p>標(biāo)簽和第三個(gè)<p>標(biāo)簽，因?yàn)榈谝粋€(gè)<p>標(biāo)簽有一個(gè)首字下沉的效果，所以不需要進(jìn)行首行縮進(jìn)的設(shè)置。
第5步，設(shè)置圖片樣式。
img{
width:200px;
border:#339999 2px solid;
float:left;
margin:10px;}
在網(wǎng)站建設(shè)時(shí)圖片的相關(guān)內(nèi)容在后面會(huì)詳細(xì)介紹，這里只做一個(gè)簡(jiǎn)單的敘述，width定義了圖片的寬度，border語(yǔ)句為圖片添加了2px寬的邊框，float:left是對(duì)圖片進(jìn)行左浮動(dòng)，margin: 10px表示圖片四周補(bǔ)白為10px。
第6步，設(shè)置首字下沉效果。首字下沉的效果往往能在第一時(shí)間吸引人的眼球。在CSS中，首字下沉的效果是通過(guò)對(duì)第一個(gè)字進(jìn)行單獨(dú)設(shè)置樣式來(lái)實(shí)現(xiàn)的。
.sh{
font-size:50px; /*首字的字體大小*/
color:green; /*首字的字體顏色*/
float:left; /*設(shè)置左浮動(dòng)以實(shí)現(xiàn)下沉的效果*/
padding-bottom:2px; /*首字的底部補(bǔ)白*/
padding-right:5px; /*首字的右邊界補(bǔ)白*/
font-weight:bold; /*首字的字體粗細(xì)*/
font-family:“黑體”; /*首字的字體類(lèi)型*/}
在以上的代碼中，實(shí)現(xiàn)首字下沉主要是通過(guò)float語(yǔ)句來(lái)進(jìn)行控制的，并且用<span>標(biāo)簽，對(duì)首字進(jìn)行了單獨(dú)的樣式設(shè)置，以達(dá)到突出顯示的目的。
第7步，為文本段中的數(shù)字設(shè)置特殊的顯示效果。在段落中，有兩處數(shù)字，為了突出，把這兩個(gè)數(shù)字進(jìn)行特殊顯示，方法同樣也是通過(guò)<span>標(biāo)簽，對(duì)數(shù)字進(jìn)行了單獨(dú)的樣式設(shè)置。
.s1{
font-size:20px;
font-style:italic;
text-decoration:underline;
color:#FF0000;}
.s2{
font-size:20px;
text-decoration:line-through;
color:#CC0000;}
在s1中定義了字體為斜體，為字體添加了下劃線。在s2中定義了字體的顏色，并添加了刪除線。
當(dāng)前文章標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)中的單頁(yè)圖文混排版式
當(dāng)前URL：http://www.iy5y368.cn/news/wzzz/3068.html
