背景圖
1 | /* 圖片滿版 */ |
其他背景圖範例:固定、滿版、置中
background-attachment 是背景固定模式的屬性
註:作為背景的圖片是撑不起元素的,需要額外給 div 新增「寬、高」
圓角
1 | div.circle { |
- 2 個重點:
- 圓的直徑,長寬 一定要等長
- border-radius:50%
參考網址: 圓角詳解、CSS3 技巧之形狀
區塊陰影、文字立體感
1 | /* 外層的陰影 */ |
參考網址: 玩转 box-shadow、文字立體感
a 連結
取消 a 連結下底線
1 | a { |
:hover 移至 a 連結的效果
1 | a:hover { |
註:a 連結 預設 display 為 inline,但為了讓 User 有更好的操作體驗,
會變更成 block,增加「寬、高」範圍,讓 User 較易點擊到目標連結。
斷點
1 | @media (max-width: 768px) { |
新單位:高度 vh、寬度 vw
vh 代表的是 view height,也就是螢幕可視範圍高度的百分比;
vw 表示的是 view width,也就是螢幕可是範圍寬度的百分比。
ul ol list-style
取消樣式
ol,ul {list-style: none;}
設定樣式
list-style: circle;
其他樣式參考:CSS list-style
指定滑鼠游標的型態
cursor: pointer; /*手指圖示,表示超連結*/
參考網址: 游標的型態