六、網頁排版技巧 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 做來玩好惹

6.37 使用 ul li 設計產品列表

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

  • 以雅虎商城當例子

6.38 絕對定位設定優惠價

  • 蓋在圖片上的優惠

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

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

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

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

其他同學的練習

6.39 position: fixed 技巧

第五章測驗

Previous四、網頁排版技巧 Part INext七、切圖技巧

Last updated