<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          网页设计中的段落版式

          • 2019-08-05 14:40:40
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.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.1c4w.com/news/wzzz/3067.html

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

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

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图