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區之前

步驟2-1:基本CSS美化

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

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

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

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

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

html結構

CSS美化

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

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

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

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

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