Ex:Travel3:元素位置排列

範例結果

主題:元素位置排列

  1.  方法1:麻將牌桌法:
    • float
  2. 方法2:父子關係精準定位法:
    • position
  3. 方法3:推來推去擺放法:
    • display:inline-block
    • 結合padding及margin

元素位置排列方法1:float:麻將牌桌法

重要參考連結:

  1. clear解除 float 屬性
  2. overflow 屬性用法讓你掌握控制捲軸效果
  3. 子區塊float造成的困擾

範例結果

練習1:右上角 社交鈕加入

html結構:貼在section區之前

  <header>
    <ul id="social">
      <li><a href="#">facebook</a></li>
      <li><a href="#">google</a></li>
      <li><a href="#">linedin</a></li>
    </ul>
  </header>

步驟2-1:基本CSS美化

/* header區 social ============*/
#social{
  list-style-type: none;
  background: url(../img/social_bg.png) no-repeat;
  width: 200px;
  height: 70px;
  padding-left: 20px;
}

#social li{
  background: green;
  width: 50px;
  height: 70px;
  float: left;
  margin-right: 5px;
}

步驟2-2:a連結,文字隱藏的方法

方法1:text-indent:-9999px;

#social li a{
  /* a為行內樣式,改為區塊樣式*/
  width: 100%;
  height: 100%;
  display: block;

   /* a文字隱藏的方法1 */
  text-indent: -9999px;
}

方法2:不讓行動裝置影響效能的 a連結 文字隱藏的方法

#social li a{
   /* a文字隱藏的方法2:建議作法 */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

步驟2-3:social鈕圖片加入

方法1:利用加元素名稱方法

html結構

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

CSS美化

參考連結:元素優先權討論(本網)、、、

#social #social1{ background: url(../img/social1.png);}
#social #social1:hover{ background: url(../img/social1_hover.png);}
#social #social2{ background: url(../img/social2.png);}
#social #social2:hover{ background: url(../img/social2_hover.png);}
#social #social3{ background: url(../img/social3.png);}
#social #social3:hover{ background: url(../img/social3_hover.png);}

方法2:選取器【nth-*】加入

參考連結:相同元素選取器【nth-*】的呼叫、、、

#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);}

同理練習:h2圖片的改變:sprite零星圖片的管理

section:nth-of-type(2) h2{  background-position: 0 -120px;}
section:nth-of-type(3) h2{  background-position: 0 -240px;}
section:nth-of-type(4) h2{  background-position: 0 -360px;}

同理練習:section1 中【旅遊小叮嚀】:項目清單變化

#intro ul{
  list-style: none;
  padding-left: 50px;
}
#intro ul li{
  /* list-style: url(../img/icon00.png); */

  background: url(../img/icon01.png) no-repeat;
  background-size: auto 30px;
  padding-left: 50px;
  line-height: 40px;
}
/* 奇偶項設定
#intro ul li:nth-child(2n){
  background: url(../img/icon02.png) no-repeat;
  background-size: auto 30px;
}
*/
/* 前三項設定 */
#intro ul li:nth-child(-n+3){
  background: url(../img/icon03.png) no-repeat;
  background-size: auto 30px;
}

/*最後三項設定
#intro ul li:nth-last-child(-n+3){
  background: url(../img/icon02.png) no-repeat;
  background-size: auto 30px;
}
*/