以前都要用套件去更改卷軸的顏色、寬度,現在 CSS 已經可以支援自訂卷軸顏色樣式囉!但,還是一樣,有瀏覽器的支援限制。俗話說的好,有好有壞麻~(這麼老派)
這個語法支援 webkit 瀏覽器,也就是最多人用的 Google 瀏覽器。這樣一來也算是支援到非常大多數的人囉! 以下分享語法使用:
利用 padding-bottom 和 margin-bottom 負值推回的特性去做視覺上等高的效果
外包父元素必須加入 overflow: hidden; 屬性去裁切掉 padding 多餘的部分 實際上三個 box 的高度都因為 padding-bottom 多出許多 此方式算是一種障眼法,並不是最好的做法 最漂亮的做法也許是 display: table; 或乾脆以 javascript 去判斷等高 以下為 demo: z-index 屬性是 position 的家人,當區塊元素設定了 position 之後,z-index 則可以設定其層級
有點像是 photoshop 的圖層概念,可以讓 position 的屬性堆疊層次 當區塊元素設定了 position 後並沒有特別宣告 z-index 時,z-index 皆預設為 0 此時層級則由 html 順序決定前後,越先出現的區塊在越下 (也就是後出現則在上) 這裡指的是 iOS 系統中使用 Safari 可以將此網站在桌面建立捷徑,設定後顯示的 icon 設計手機版網站時設計師可替此網站設計一個桌面 icon (同 App icon 規格,請使用大於 200x200 尺寸規格) 將圖片上傳至網路空間 (亦可使用網站圖檔相對路徑) 於 <head> 之間加入: HTML
CSS 排版中,除了最常使用的 float 屬性之外,另一個常使用到的即是 position (位置) 的設定
可指定元素的位置跳出原父元素框架中設定至指定位置 搭配屬性為:left、right;top、bottom (左右擇一、上下擇一) 以下各種 position 設定說明: 將圖片設定透明度時使用的 CSS 設定 (或是某個區塊整體透明度) 常用於 hover 前後的效果 設定如下: CSS
filter 的設定為 IE8 以下 brower 用,opacity 則目前各大主流瀏覽器皆相容
opacity 的部分透明度值設定為 1.0 = 100% 透明度 遂 0.4 = 40% 透明度 |
|