六、網頁排版技巧 Part II

6.34 使用絕對定位 / 相對定位 設計版型

• position 預設值是 static

• 想固定在網頁上的右下角的話，可以使用絕對定位

  • 以父元素作為定位點，父元素要先設定 position: relative

  • 子元素設定 position: absolute

  • 之後子元素可根據父元素調整位置 left: 0; bottom: 0;

• 想讓子元素根據父元素的框架來跑的話，可以在父元素用相對定位

  • position: relative;

  • 不然被被設定 position: absolute 的元素，就會根據整個網頁做定位

  • 想根據整個網頁定位，也可以用 position: fixed

• 想並排的話，就用 float

6.35 相對定位、絕對定位元素技巧：z-index, relative, absolute

• 想讓 box 有重疊的效果

• z-index 數值較高，就會排越前面越靠近畫面

6.36 簡報呈現相對定位和絕對定位的技巧

直接用 codepen 做來玩好惹

• https://codepen.io/ayugioh2003/pen/qowmqZ

6.37 使用 ul li 設計產品列表

• 為什麼不用 div 排版？因為這區塊內容是有主題的，是主題式列表，而不是各自獨立的

• 以雅虎商城當例子

6.38 絕對定位設定優惠價

• 蓋在圖片上的優惠

HW6-38 利用絕對定位設計左上角圖案

麻煩老師過目我的 HW6-38 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset)

https://codepen.io/ayugioh2003/pen/dmLREa

在上個章節，還沒有很懂多欄佈局與主題式列表的差異 在這個章節就比較懂了 多欄佈局，像是導覽欄、內容、側邊欄的三欄呈現 主題式列表，像是商品列表

其他同學的練習

• 有上方導覽列、absolute 定位優惠
• 有導覽列、側邊欄、abosulute 定位、fixed 回到上方、商品 hover 增寬度 border
• 菜單、導覽列、側邊欄、absolute、fixed
• pug, sass、字體、absolute、變形、UI 好看
• abosolute、變形

6.39 position: fixed 技巧

• 什麼時候會用到 position: fixed ?

• 右下角購物車提醒

• 回到網頁最上方

• https://codepen.io/ayugioh2003/pen/qowmqZ

第五章測驗

第五章測驗