3-1 header區 > #social

顯示結果：

參考連結：

• float ： 詳本網站【3-7 float : 麻將式 網頁排版】單元
• position ： 詳本網站【3-8 position :自由定位 網頁排版】單元
• 文字屬性列表 ： 詳本網站【4-5 常用文字美化】單元

說明：

• 網頁排版應用：float 及 position 介紹
• 符合SEO 讓 <a> 文字消失方法

步驟

S1：增加 header 區的影響

問題：在第1個 section 之前，加入 header 標籤，導致 各section 背景有誤。

改善方法：CSS 樣式設定其選取器原先 section:nth-child(n) ，更改為 section:nth-of-type(n)

S2：增加 header 區 中右側 #social 區塊

問題： float 浮動排版，父區域高度消失的困擾

S2-1：先設定header背景色彩，以利討論父區域高度消失的困擾

  CSS 美化：          <!-- 針對header區進行美化 -->

  /* header =================================== */
  header{
    background: #fbe6a1;
  }

S2-2：新增 social 區域

  html 結構之下 Emmet寫法：

  ul#social>li*3>a[href="#"]{social$}

  ==================================================================

  html 結構：

  <header>
    <ul id="social">
      <li><a href="#">social1</a></li>
      <li><a href="#">social2</a></li>
      <li><a href="#">social3</a></li>
    </ul>
  </header>

  CSS 美化：

  /* header =================================== */
  /* social ======== */
  #social{
    list-style-type: none;
    background: url(../img/social_bg.png) no-repeat;
    width: 200px;

    /* overflow: hidden;   依子區域內容大小顯示區域，則利用overflow: hidden */
    height: 70px;
  
    padding-left: 20px;
  }
  #social li{
    background: green;        /* 先利用顏色替代旗標圖片 */
    width: 50px;
    height: 70px;
    float: left;
  
    margin-right: 5px;
  }

顯示結果：

S3：#social區塊下<a>設定

參考連結：

• 文字屬性列表 ： 詳本網站【4-5 常用文字美化】單元

  CSS 美化：

  /* social ======== */
  #social li a{
    display: block;          /* 以下3行，讓 a 區塊 可顯示 cursor */
    width: 100%;
    height: 100%;
  
    text-indent: 100%;        /* 以下3行，文字隱藏的方法 */
    white-space: nowrap;
    overflow: hidden;
  }

S4：#social區塊下圖片置換

  CSS 美化：

  /* social ======== */
  #social li:first-child { background: url(../img/social1.png);}
  #social li:first-child:hover { background: url(../img/social1_hover.png);}

  #social li:nth-child(2) { background: url(../img/social2.png);}
  #social li:nth-child(2):hover { background: url(../img/social2_hover.png);}

  #social li:last-child { background: url(../img/social3.png);}
  #social li:last-child:hover { background: url(../img/social3_hover.png);}

S5：#social置於網頁右上角

參考連結：

• position ： 詳本網站【3-8 position :自由定位 網頁排版】單元

  CSS 美化：   <!-- 以下CSS美化，簡化不重要屬性值 -->

  /* header =================================== */
  header{
    position: relative;         /* 因子區域設定position: absolute; ，故父區域設定pos: rel;*/ 
    height: 80px;                /* 因子區域設定 pos: abs; ，父區域高度消失，故設定高度*/ 

    box-shadow: 0 1px 3px #000;
  }

  /* social ======== */
  #social{
    position: absolute;       /* 以下3行，因子區域設定 pos: abs; 方法 */
    right: 0;
    top: 0;
  }

結果

html 結構

  html 結構：

  <header>
  <ul id="social">
    <li><a href="#">social1</a></li>
    <li><a href="#">social2</a></li>
    <li><a href="#">social3</a></li>
  </ul>
  </header>

CSS 美化

  /* header =================================== */
  header{
    background: #fbe6a1;
    position: relative;
    height: 80px;
    box-shadow: 0 1px 3px #000;
  }
  /* social ======== */
  #social{
    list-style-type: none;
    background: url(../img/social_bg.png) no-repeat;
    width: 200px;
    height: 70px;
    padding-left: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }
  #social li{
    width: 50px;
    height: 70px;
    float: left;
    margin-right: 5px;
  }
  #social li a{
    display: block;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  #social li:first-child{background: url(../img/social1.png);}
  #social li:first-child:hover{background: url(../img/social1_hover.png);}
  #social li:nth-child(2){background: url(../img/social2.png);}
  #social li:nth-child(2):hover{background: url(../img/social2_hover.png);}
  #social li:last-child{background: url(../img/social3.png);}
  #social li:last-child:hover{background: url(../img/social3_hover.png);}