• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    网页设计中的段落版式

    • 2019-08-05 14:40:40
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

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

    【操作步骤】

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

    <div class="container">    

    <div class="header">

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

    <p class="p1">2014年8月4日11:01   环球军事</p>    

    </div>    

    <div class="main">        

    <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>    

    </div>

    </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;}

    在上方代码中,首先定义了header容器的样式,并在容器的下方添加一条宽为1px的边框。

    在<h1>标签中定义了标题的字体类型,以及用mar-gin-top:50px语句定义标题文字上方补白为50px。用headline定义了副标题样式。

    当前文章标题:网页设计中的段落版式

    当前URL:http://www.0737dz.com/news/wzzz/3067.html

    上一篇:设计网页正文样式

    下一篇:网页设计中的单页图文混排版式

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图