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