本示例通过网上常见的一则新闻正文页，介绍如何在制作网页时设置段落版式样式的方法，进一步讲述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.lyjtt.cn/news/wzzz/3068.html
上一篇：网页设计中的段落版式
下一篇：网页设计中的设计新闻内容页
