<optgroup id="t777z"><em id="t777z"><del id="t777z"></del></em></optgroup><strong id="t777z"></strong>

    1. <legend id="t777z"></legend>
      <span id="t777z"></span>

      <optgroup id="t777z"><li id="t777z"><del id="t777z"></del></li></optgroup>
    2. 網頁設計中的段落版式

      • 2019-08-05 14:40:40
      • 閱讀次數:
      • 作者:盈嵐科技小編
      • 來源:http://www.anthonycruises.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日報道,英國史上最大的航母—“伊利莎白女王”級航母的一個關鍵主體模塊已經完成,即將被運往蘇格蘭羅塞斯船廠開始整體組裝?!短枅蟆奋娛掠浾吒ゼ醽啞せ堇杖涨暗玫教貏e授權,參觀了負責該模塊生產的法爾費德船廠,走近了這艘被譽為“海上之城”的巨艦?;堇赵趫蟮篱_篇就激動地描述道:“當8000噸重的模塊從船廠被吊出時,場面就像巨鯨浮上水面一般,這頭由鋼鐵鑄成的龐然大物融合了高新技術,是強大軍事力量的象征?!?lt;/P>        

      <P>法爾費德船廠的項目負責人斯圖爾特·威爾遜表示,這艘航母非常龐大。據悉,有人說它大到被稱為“21世紀的諾亞方舟”,大到英國政府動用全國6大造船基地分別制造船體的主要模塊,大到有上萬名技師參與建造工作?!耙聋惿着酢奔壓侥冈诤芏嘤搜壑械囊饬x僅次于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.anthonycruises.com/news/wzzz/3067.html

      上一篇:設計網頁正文樣式

      下一篇:網頁設計中的單頁圖文混排版式

      網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
      JEALOUSVUE日本水多多_亚洲婷婷五月综合狠狠爱_A级欧美乱理伦片免费入口_99热门精品一区二区