iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
Modern Web

從0到有做出一個商家網頁系列 第 22

Day22:學習編輯「主要區域」與「側邊欄」的CSS語法

  • 分享至 

  • xImage
  •  

今天要學習編輯「主要區域」與「側邊欄」的CSS語法

1.<div>~</div>:使用於把多的區塊變成群組的情況會產生區塊元素

2.<span>~</span>:使用於在部分文字套用樣式的情況會產生行內元素

3.box-shadow:~;:在值輸入陰影的位置、模糊量、擴大量、顏色等
box-shadow的寫法:box-shadow: 10px(X軸(水平)位置) 10px(Y軸(垂直)位置) 20px(模糊) 12px(擴大量) #dddddd(陰影顏色) inset(只在內側加上陰影時才要設定) ;

4.list-style-type:~;:條列項目之前的符號稱作項目符號,在值輸入顯示項目符號種類的關鍵字
項目符號種類:disc、circle、square、decimal、none

5.height:~;:設定元素高度,在值輸入含單位的數值

6.overflow:~;:設定超出範圍的內容該如何顯示,輸入顯示方法的關鍵字
overflow屬性顯示設定:visible(超出範圍扔會顯示)、hidden(隱藏)、scroll(可以捲動)、auto(依照瀏覽器顯示)

7.background-repeat:~;:設定背景影像重複方法,在值輸入呈現重複方法的關鍵字

8.background-position:~;:設定背景影像位置,在值設定含有單位的數值或顯示位置的關鍵字
要設定背景影像的位置時,可以利用水平位置(left、center、right)與垂直位置(top、center、bottom)的關鍵字組合來指定

9.inline-height:~;:設定行高,用來調整行距,在值輸入代表高度的數值

今天先到這裡明天再繼續!


上一篇
Day21:學習其他用途的HTML標籤和CSS語法
下一篇
Day23:編寫網頁表單的HTML
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言