網(wǎng)頁設計中的單頁圖文混排版式

本示例通過網(wǎng)上常見的一則新聞正文頁,介紹如何在制作網(wǎng)頁時設置段落版式樣式的方法,進一步講述CSS段落的排版方法。

【操作步驟】

第1步,構(gòu)建網(wǎng)頁結(jié)構(gòu)。使用<div>標簽,設置container為頁面整體框架,在此框架下分別定義了<h1>標簽、3個<p>標簽,在p標簽中又定義了<span>標簽,目的是為文本添加特殊效果。

<div class="container">    

<h1>人口紅利持續(xù)衰減  “未富先老”考驗中國</h1>    

<p ><span class="sh">過</span>去30多年,伴隨著中共主導的改革開放不斷深化,中國在通往現(xiàn)代化和民族復興的道路上一路“飛奔”。但歷史無法簡單復制。國際金融危機的沖擊,以及日趨老齡化的人口結(jié)構(gòu),中國經(jīng)濟發(fā)展遭遇眾多瓶頸,讓中共意識到轉(zhuǎn)變發(fā)展方式已刻不容緩。中共中央總書記胡錦濤在談及此問題時,曾罕見地連用了50個“加快”。

中國社科院人口與勞動經(jīng)濟研究所副所長張車偉在接受中新社記者采訪時表示,到2025年,中國的人口紅利將徹底消失。要實現(xiàn)經(jīng)濟的騰飛,中國必須力爭在此之前完成發(fā)展方式的轉(zhuǎn)變。否則,就只能停在半路,陷入“中等收入陷阱”。中國國家統(tǒng)計局最新數(shù)據(jù)顯示,目前中國60歲及以上人口占總?cè)丝跀?shù)的13.26%,比 10年前上升了<span class="s1">2.93</span>個百分點。張車偉表示,人口變化趨勢不可逆轉(zhuǎn)。

老齡化加速而來,意味著“人口紅利”將持續(xù)衰減。如今,中國已經(jīng)顯現(xiàn)出“未富先老”特征,其經(jīng)濟發(fā)展將面臨嚴峻的考驗。<img src='images/1.jpg'>      張車偉解釋說,中國人口撫養(yǎng)比自20世紀60年代中期起開始下降,但由于種種因素,中國當時并沒能將潛在人口紅利轉(zhuǎn)變?yōu)楝F(xiàn)實推動力。他指出,改革開放以來,中國之所以能夠創(chuàng)造世界發(fā)展史上的奇跡,很重要的一個原因,就是將經(jīng)濟發(fā)展模式與人口結(jié)構(gòu)特點相結(jié)合,發(fā)揮勞動力資源充沛的優(yōu)勢,通過發(fā)展勞動密集型產(chǎn)業(yè)和出口導向,推動國民經(jīng)濟高速增長。在上述發(fā)展模式的推動下,中國經(jīng)濟從頻臨崩潰邊緣發(fā)展為總量躍居世界第二,人民生活從溫飽不足發(fā)展到總體小康。</p>    

<p>但金融危機后,發(fā)達國家過度消費拉動全球經(jīng)濟增長的需求動力結(jié)構(gòu)正在發(fā)生變化。伴隨著老齡化的加深,中國人口特點顯現(xiàn)出勞動適齡人口下降以及社會總撫養(yǎng)比上升的趨勢。張車偉指出,勞動力供給不再源源不斷,中國經(jīng)濟要繼續(xù)向前邁進,必須將過去那種依靠要素投入刺激經(jīng)濟增長的發(fā)展模式轉(zhuǎn)到依靠生產(chǎn)率提高及技術進步推動的經(jīng)濟增長上來。不過,一個總量近<span class="s2">40萬億元人民幣</span>的經(jīng)濟體要完成轉(zhuǎn)身絕非易事。經(jīng)濟學家吳敬璉回憶說,早在1981年中國國務院就曾提出,要把經(jīng)濟發(fā)展轉(zhuǎn)移到效率提高的基礎上去。但多年來的實踐表明,轉(zhuǎn)型的路上會有著諸多挑戰(zhàn)。在張車偉看來,最大的挑戰(zhàn)在于創(chuàng)新。

他表示,目前,中國經(jīng)濟依靠外部驅(qū)動的特征比較明顯,技術來源于外部,產(chǎn)品銷往外部,這和中國創(chuàng)新能力的不足有密切的關系。未來,必須加強創(chuàng)新能力的培養(yǎng)。擴內(nèi)需也是當務之急。張車偉指出,中國要確保內(nèi)需的增長,需要做好三件事情。首先,加快勞動者工資的增長,至少與勞動生產(chǎn)率的增長同步。其次,健全社會保障體系,避免有錢不敢花錢的現(xiàn)象。再次,要進行完全的城市化。目前進入到城市的人都是年輕的人,農(nóng)村的留守老人生活艱難。今后城市化,要讓老年人也進入到城市當中去。</p>    

<p>此外,政府職能的轉(zhuǎn)變也十分關鍵。張車偉說,中國此前的增長和政府的主導是密不可分的。但今后,政府應該把主要精力從關注經(jīng)濟增長轉(zhuǎn)移到為社會提供公共服務上來。</p></div>

網(wǎng)頁設計中,在整體的container框架下,分別定義了<h1>標簽和3個<p>標簽的文本段落。此時的顯示效果極其簡單,僅僅是簡單的文字和標題,并沒有友好的界面。

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

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步,此時,網(wǎng)頁的基本樣式已經(jīng)初見端倪,但是段落文本還沒有進行設置,接下來對段落添加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;}

網(wǎng)站建設時圖片的相關內(nèi)容在后面會詳細介紹,這里只做一個簡單的敘述,width定義了圖片的寬度,border語句為圖片添加了2px寬的邊框,float:left是對圖片進行左浮動,margin: 10px表示圖片四周補白為10px。

第6步,設置首字下沉效果。首字下沉的效果往往能在第一時間吸引人的眼球。在CSS中,首字下沉的效果是通過對第一個字進行單獨設置樣式來實現(xiàn)的。

.sh{    

font-size:50px;            /*首字的字體大小*/

color:green;               /*首字的字體顏色*/   

float:left;                /*設置左浮動以實現(xiàn)下沉的效果*/    

padding-bottom:2px;        /*首字的底部補白*/    

padding-right:5px;         /*首字的右邊界補白*/    

font-weight:bold;          /*首字的字體粗細*/    

font-family:“黑體”;        /*首字的字體類型*/}

在以上的代碼中,實現(xiàn)首字下沉主要是通過float語句來進行控制的,并且用<span>標簽,對首字進行了單獨的樣式設置,以達到突出顯示的目的。

第7步,為文本段中的數(shù)字設置特殊的顯示效果。在段落中,有兩處數(shù)字,為了突出,把這兩個數(shù)字進行特殊顯示,方法同樣也是通過<span>標簽,對數(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中定義了字體的顏色,并添加了刪除線。

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:0871-63535511(點擊可一鍵撥號)