网页设计中的段落版式-盈岚科技

网页设计中的段落版式

2019-08-05 14:40:40
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

本示例通过网上常见的一则新闻，介绍了在制作网页时设置段落版式样式的方法，从而进一步讲述CSS段落的排版方法。

【操作步骤】

第1步，构建网页结构。考虑到在设计网页时页面中有标题和正文两部分，所以页面在结构上分为上下两部分，分别是header和main，用<div>标签进行分块。

<h1>英国史上最大航母即将组装将成英海军旗舰</h1>

</div>

<p>据英国《太阳报》7月31日报道，英国史上最大的航母—“伊利莎白女王”级航母的一个关键主体模块已经完成，即将被运往苏格兰罗塞斯船厂开始整体组装。《太阳报》军事记者弗吉尼亚·惠勒日前得到特别授权，参观了负责该模块生产的法尔费德船厂，走近了这艘被誉为“海上之城”的巨舰。惠勒在报道开篇就激动地描述道：“当8000吨重的模块从船厂被吊出时，场面就像巨鲸浮上水面一般，这头由钢铁铸成的庞然大物融合了高新技术，是强大军事力量的象征。”</P>

<P>法尔费德船厂的项目负责人斯图尔特·威尔逊表示，这艘航母非常庞大。据悉，有人说它大到被称为“21世纪的诺亚方舟”，大到英国政府动用全国6大造船基地分别制造船体的主要模块，大到有上万名技师参与建造工作。“伊丽莎白女王”级航母在很多英国人眼中的意义仅次于2012年伦敦奥运会。法尔费德船厂所负责的是3号下层甲板模块的制造。一支由850名精兵强将组成的团队从2009年动工起，每天三班倒，保证造船工作24小时不间断。目前该模块已制造完毕，共用掉钢材5600吨、电缆30.3万米、管道1万米，重量接近9000吨。</p>

<p>从这组数字来看，“伊丽莎白女王”级航母的这一个模块就在重量上超过了号称“欧洲第一舰”的英国“勇敢”级45型驱逐舰，而航母的排水量预计可达到6.5万吨。</P>

<P>一名负责为巨舰编程的英国航空航天系统公司的主管表示：“‘伊丽莎白女王’级航母无疑会在未来的数10年中以英国海军旗舰的身份出现，她将在英国航海史上树立新的里程碑”。由于国防军费下调和财政资金短缺，英国军方曾有不少人担心耗资庞大的航母建造项目会被叫停。英国审计部门的官员此前也对这艘巨舰的未来表示了担心，称其资金需求可能会飙升到预算的两倍。伦敦已经考虑为“伊丽莎白女王”级航母购进更便宜的装备，这一变动为审计和财政部门所欢迎，却为军方所反对。 </p>

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

<div>

<ul>

<li><a href="#">日《防卫白皮书》</a></li>

<li><a href="#">安理会通过声明谴责叙利亚当局对平民用武力</a></li>

<li><a href="#">巴34岁美女外长惊艳访印打通印巴对话之门</a></li>

<li><a href="#">叙利亚局势紧张安理会闭门磋商</a></li>

</ul>

</div>

<div>

<ul>

<li><a href="#">美化学武器库发生芥子气泄漏</a></li>

<li><a href="#">美提高债务上限同时提升军费为确保霸主地位</a></li>

<li><a href="#">加拿大与美国海军联合在北极展开军事使命</a></li>

<li><a href="#">阿富汗和平进程疑问重重巴美合作但合力有限</a></li>

</ul>

</div>

在整体的container框架下，页面分为header和main两部分。在header下，分别定义了<h1>标签和<p>标签。在main下，分别定义3个<p>标签的文本段落。

第2步，定义网页基本属性。

body{ background-color:#f1e2d9;

font-family:"宋体";

text-align:center;}.container{

width:800px;

border:2px solid #c1bebc;

margin:0px auto;

background-color:#c0f5ef;}

在以上代码中，body标签定义了背景色、字体类型和对齐方式等属性。在container中定义了container容器的宽度为800px，另外使用bor-der:2px solid #c1bebc语句为container容器的四周添加了边框，在网站建设时，这种添加边框的方法是一个由3个部分组成的语句：宽度、式样、颜色。读者可以试着改变它们的值以产生不同的效果。需要特别指出的是，在<body>标签中定义了text-align:center，在container中定义了margin:0px auto，两条语句配合使用，目的是使container容器水平居中，而且只有两条语句配合使用才使网页有更强的兼容性。

注意：只在<body>标签中定义text-align:cen-ter，而不在container中定义mar-gin:0px auto，只能在Firefox浏览器中居中显示，不能兼容IE。只在container中定义margin:0px auto而不在<body>标签中定义text-align:center，会使有些低版本IE无法兼容。

第3步，设置header部分样式。

.header{

width:800px; /

*header宽度*/

border-bottom:1px solid

#c1bebc; /*下边框*/}

h1{

font-family:"黑体";

margin-top:50px; /*标题文字上方补白为50px*/}

.headline{

color:#000099;

text-align:center;}