iT邦幫忙

2024 iThome 鐵人賽

DAY 24
0
Python

自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作系列 第 24

Day24 藉由教學影片學習HTML與CSS基礎

  • 分享至 

  • xImage
  •  

今天要分享的是CSS中的盒模型 Box Modelpadding元素選擇器ID與Class選擇器一次使用多個選擇器後代選擇器子選擇器鄰居選擇器以及屬性選擇器
一、盒模型 Box Model
https://ithelp.ithome.com.tw/upload/images/20241006/201677875OMuATTKeZ.png
可以點選區塊按右鍵選擇檢查,可以在版面上調整邊框位置,如下圖
https://ithelp.ithome.com.tw/upload/images/20241006/20167787cx8p7dcShY.png
二、padding
https://ithelp.ithome.com.tw/upload/images/20241006/20167787aLKfLsMNm9.png
三、元素選擇器
格式:

選擇器{
  屬性:值;
}

https://ithelp.ithome.com.tw/upload/images/20241006/20167787jE1bvGeSDY.png
四、id與class選擇器
#id在同個頁面的同個名稱只能出現一次,class在同個頁面的同個名稱可以出現在各種地方
https://ithelp.ithome.com.tw/upload/images/20241006/201677873kqn9AoYRF.png
五、一次使用多個選擇器
https://ithelp.ithome.com.tw/upload/images/20241006/201677871FK3vqH7OV.png
六、後代選擇器
https://ithelp.ithome.com.tw/upload/images/20241006/20167787evlYdjJswt.png
七、子選擇器
#使用子選擇器可以更精確地選取到元素
https://ithelp.ithome.com.tw/upload/images/20241006/20167787ffRfQdp100.png
八、鄰居選擇器
#鄰居選擇器的語法:如要選擇h2旁邊的p可以用"+"
https://ithelp.ithome.com.tw/upload/images/20241006/20167787pgqN3tQonD.png
九、屬性選擇器
https://ithelp.ithome.com.tw/upload/images/20241006/201677877WmfeyGcBY.jpg


以上是我今天的分享,謝謝大家!!!
參考網址:https://www.youtube.com/watch?v=fa214Ct6t9w&list=LL&index=3


上一篇
Day23 藉由教學影片學習HTML與CSS基礎
下一篇
Day25 藉由教學影片學習HTML與CSS基礎
系列文
自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言