HTML第四章:初識CSS3 課後做業:

1.製做圖4.35所示的北大青鳥總裁致辭頁面,頁面要求以下。
>標題使用標題標籤實現,字體大小爲18px。
>致辭正文字體大小爲12px,頁面中的數字均爲加粗、紅色字體。
>頁面中的年份斜體顯示,字體大小爲16px.字體顏色爲藍色。
>使用外部樣式表建立頁面樣式,頁面樣式體現高級選擇器的應用
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>總裁致辭頁面</title>
    <link rel="stylesheet" href="CSS/Css3.css" type="text/css"/>
</head>
<body>
<h2>總裁致辭</h2>
     <h3>來源:北大青鳥</h3>
           <hr/>
       <p><img src="images/icon.jpg" alt=""/></p>
       <p>目前北大青鳥IT教育全體系員工<strong>10000</strong>餘名、受權培訓中心<strong >180</strong>餘家、合做院校<strong>500</strong>餘所、覆蓋全國<strong>90</strong>餘座城市,市場佔有率達到<strong>39.8%</strong>。</p>
       <p>做爲IT職業教育的先行者,北大青鳥IT教育創新的職業教育理念和業務經營模式獲得了社
           會的普遍承認:國家人力資源和社會保障部與北大青鳥IT教育實施課程聯合認證制度;公
           司兩度入選中華人民共和國商務部評選的「中國連鎖經營百強企業」,是迄今爲止教育培
           訓領域惟一上榜品牌。公司連續兩年榮獲 「中國服務業十大優秀特許品牌」稱號,並得到
           中國特許經營協會頒發的中國連鎖經營百強和中國特許經營年度大獎;得到新浪頒發的「中
           國教育傑出貢獻獎」和「中國十大品牌教育集團」稱號;並贏得 「中國IT公衆認知企業金獎」
           、「本土最具知名度認證獎」、「最佳就業認同獎」、「質量放心用戶滿意雙優品牌」、「最佳實
           用課程獎」等數十個獎項。人民日報、光明日報、經濟日報、解放日報、中國青年報、中國計算機報
           等幾十家權威媒體對公司進行了多方面的報道。

          <p> <em>2000年</em>,北大青鳥IT教育創造性地將特許經營模式引入到IT職業教育領域,在全國創建「北大青鳥APTECH
           計算機受權培訓中心」。全部中心實行統一經營管理、嚴格保證教學質量,受到社會和業界的高度承認。
           發展速度之快、經營規模之大、學員人數之多,在全國衆多IT職業培訓機構中一枝獨秀。成立至今,北大青
           鳥IT教育前後培養45萬名學員進入IT行業。
     </p>
</body>
</html>

/*標籤選擇器*/
h2{
    font-size: 18px;
}
    p{
    font-size: 12px;
}
/*後代選擇器*/
p strong{
    color: red;
}
/*結構仿類選擇器*/
 p:nth-of-type(4){
    font-size: 16px;
    color: blue;
}

 
2.製做圖436所示的員工團隊風采頁面頁面要求以下。
>標題使用標題標籤實現字體大小爲18px第一個標題的字體顏色爲紅色第二個標題:字體顏色爲綠色。
>頁面字體大小爲14px.>第一個標題下面的兩張圖片寬度爲300px高度爲200px。
>最後一段文字的顏色爲藍色。
>"聯繫咱們"等內容字體大小爲14px顏色爲#640000.
>cSS 樣式體現標籤選擇器。類選擇器、ID選擇器、層次選擇器結構僞類選擇器屬性選擇器。
>使用外部樣式表創是頁面樣式。完整頁面顯示效果請參考素材文件裏的效果圖。
 
 
 
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>員工團隊風采頁面</title>
        <link rel="stylesheet" href="CSS/Css.css" type="text/css"/>
</head>
<body>
      <P><img src="images/recruit-01.jpg" alt=""/>
      <img src="images/recruit-02.jpg" alt=""/></P>
    <p>北大青鳥始終以人才做爲企業的核心資本。爲了吸引、激勵和保留優秀人才, 公司爲員工提供完善的培訓與發展體系,
        關注員工成長,同時在兼顧市場競 爭力和內部公平的基礎上爲員工提供全面、富有競爭力的薪酬福利體系。良好
        的企業發展前景、 廣闊的我的發展平臺、快樂向上的工做環境,是青鳥人一直秉承的核心要素</p>
        <h4>咱們的管理團隊</h4>
          <p><img src="images/recruit-03.jpg" alt=""/>
              <img src="images/recruit-04.jpg" alt=""/></p>
       <p>北大青鳥始終以人才做爲企業的核心資本。爲了吸引、激勵和保留優秀人才,公司爲員工提供完善的培訓與發展體系,
           關注員工成長,同時在兼顧市場競爭力和內部公平的基礎上爲員工提供全面、富有競爭力的薪酬福利體系。良好的企
           業發展前景、 廣闊的我的發展平臺、快樂向上的</p>
        <h4 id="zt1">咱們部門的風采</h4>
        <p class="active"><img src="images/recruit-05.jpg" alt=""/> </p>
          <p>北大青鳥始終以人才做爲企業的核心資本。爲了吸引、激勵和保留優秀人才,公司爲員工提供完善的培訓與發展體系,
              關注員工成長,同時在兼顧市場競爭力和內部公平的基礎上爲員工提供全面、富有競爭力的薪酬福利體系。良好的企業
              發展前景、 廣闊的我的發展空間。</p>
      <ul>
        <li><a href="">聯繫咱們</a></li>
        <li><a href="">關於咱們</a></li>
        <li><a href="">版權聲明</a></li>
        <li><a href="">招商加盟</a></li>
      </ul>
</body>
</html>

<!--Css3樣式 -->
  /*標籤選擇器*/
        h4{
            font-size: 18px;
            color: red;
        }
        /*id選擇器*/
        #zt1{
            font-size: 18px;
            color: green;
        }

        /*標籤選擇器*/
        p{
            font-size: 14px;
        }

        /*類選擇器*/
        /*.xs{*/
        /*width: 300px;*/
        /*height: 200px;*/
        /*}*/

         /*屬性選擇器*/
        img[src$=jpg]{
            width: 300px;
            height: 200px;
        }

        /*結構僞類選擇器*/
          /*body p:last-of-type{*/
            /*color: blue;*/
        /*}*/

          /*後代選擇器*/
            .active~p{
              color: blue;
          }

        /*屬性選擇器*/
         a[href]{
            font-size: 14px;
            color: #640000;
        }