iT邦幫忙

2025 iThome 鐵人賽

DAY 25
0
Modern Web

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

Day25:繼續學習編寫網頁表單的HTML並學習新的CSS語法

  • 分享至 

  • xImage
  •  

繼續學習編寫網頁表單的HTML並學習新的CSS語法

HTML語法
連結項目名稱與輸入欄的標籤
<lable>~</lable>:用這個標籤包圍的項目名稱與輸入欄會互相連結,按一下項目名稱,就能啟用選項或輸入欄。

(一)讓項目名稱的文字與選項按鈕聯動
在原本的表單中,點選到按鈕才有反應,按旁邊的文字則沒有反應,這樣其實不太好操作,因此要用 <lable>標籤標記項目名稱與radio按鈕,這樣一來,在點按文字時也會選取。

<p>
<lable><input type="radio" name="devliver" value="運送" checked="checked">運送  </lable>
<lable><input type="radio" name="devliver" value="不運送" >不運送 </lable>     
</p>

CSS語法
編寫網頁共通的元素

1.裝飾標題的文字樣式
(一)設定字距的屬性
letter-spacing: .05em;:在值輸入含單位的數值,正值會擴大字句,負值是縮小字距。
letter-spacing的單位有很多種,em是文字高度,會依文字大小做變化,使用直覺,由於1em=「文字高
度」,所以0.5em的字距就是「文字高度的一半」。

2.設定主視覺背景圖
(一)一次設定完成背景的屬性
background:~;:可以一次設定完成與背景有關的8個屬性,可以半格空格隔開,在值設定各個屬
性。
(二)設定背景影像顯示大小的屬性
background-size:~;:在值輸入cover(覆蓋整個區域)、contain(顯示整張影像)等關鍵字或
含單位的數值。

今天先做到這邊明天再繼續!


上一篇
Day24:繼續學習編寫網頁表單的HTML
下一篇
Day26:繼續學習新的CSS語法
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言