零基礎教你學前端——90、CSS表單

時間：2023-07-26 13:48:01 | 來源：網站運營

時間：2023-07-26 13:48:01 來源：網站運營

零基礎教你學前端——90、CSS表單：我們來講解應用 CSS 裝飾表單

制作一個表單, 并不需要華麗的外表, 只要簡潔大方, 方便用戶查看和填寫信息即可, 所以表單的制作還是比較簡單的。

先來看一個案例，表單擁有自己的寬度，但是高度是被表單中的不同控件撐開顯示的。

表單區(qū)擁有自己的邊框，并且有圓角設置，同時每一個表單元素之間擁有相等的間距。

本節(jié)課我們就來完成這個案例。

首先, 這里已經為大家準備好了一段 html 代碼, 里面有 form 標簽, 和一些常見的表單元素

表單內容包含：姓名 年齡 手機號 QQ號 性別 和 所選學科, 以及一個重置和一個確認按鈕

在瀏覽器中查看效果,我們可以看到, 表單內容沒有 CSS 的修飾, 這個頁面不是很美觀, 接下來, 我們就來修飾一下這個頁面吧。

首先, 在head標簽內部添加link標簽，正確引入form.css樣式文件

在form.css文件中編寫樣式,

定義通配符選擇器，聲明樣式: padding: 0; margin: 0;

定義 form 標簽選擇器 聲明樣式: width: 600px; border: 3px solid skyblue; border-radius: 15px; padding: 20px; margin: 50px;

CSS* { padding: 0; margin: 0; } form { width: 600px; border: 3px solid skyblue; border-radius: 15px; padding: 20px; margin: 50px; } form > label { display: block; margin-bottom: 20px; } form > label > span { display: inline-block; width: 90px; text-align: right; } form > label > input { padding: 5px 10px; } form > input[type=reset], form > input[type=button] { width: 130px; height: 30px; font-size: 18px; cursor: pointer; color: #fff; border: none; } form > input[type=reset] { background-color: orange; } form > input[type=button] { background-color: lightgreen; }回到瀏覽器, 我們看到, 表單的整體范圍出現了, 只是內部的內容還不是縱向排列

回到編輯器, 繼續(xù)編寫CSS

定義選擇器 form > label 聲明樣式： display: block; margin-bottom: 20px;

回到瀏覽器中查看效果，此時 label 標簽已經變成塊元素，實現縱向排列、獨占一行的特點，并且每一行之間的距離也實現了。

回到編輯器，繼續(xù)處理單行文本框控件及控件前方文本的特殊樣式。

定義選擇器：form > label > span 聲明樣式：display: inline-block; width: 90px; text-align: right;

在瀏覽器中查看效果，span中的文本已經實現了右對齊，目前的效果較之前有了很大的改變

當用戶在表單中填寫內容的時候, 我們可以看到, 文字和表單邊框之間距離較小，需要通過處理內邊距，來實現完美的效果。

回到編輯器中，定義選擇器：form > label > input ，聲明樣式： padding: 5px 10px;

繼續(xù)查看效果，單行文本框距離也實現了。

繼續(xù)完成對按鈕的修飾，為了增加用戶的體驗度，我們需要單獨設置按鈕的寬度高度，并且添加不同的顏色。

定義選擇器：form > input[type=reset],form > input[type=button] 聲明樣式： width: 130px; height: 30px; font-size: 18px; cursor: pointer; color: #fff; border: none;

定義選擇器：form > input[type=reset] 聲明樣式： background-color: orange;

定義選擇器： form > input[type=button] 聲明樣式： background-color: lightgreen;

回到瀏覽器，按鈕的樣式已經完成，

文章配套視頻鏈接：HTML+CSS教程，零基礎web前端開發(fā)入門必看視頻