我們來講解應(yīng)用 CSS 裝飾表單

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

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

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

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

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

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

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

　　首先, 在head標簽內(nèi)部添加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;

　　}

　　回到瀏覽器, 我們看到, 表單的整體范圍出現(xiàn)了, 只是內(nèi)部的內(nèi)容還不是縱向排列

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

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

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

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

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

　　在瀏覽器中查看效果，span中的文本已經(jīng)實現(xiàn)了右對齊，目前的效果較之前有了很大的改變

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

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

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

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

　　定義選擇器：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;

　　回到瀏覽器，按鈕的樣式已經(jīng)完成，

上一篇

CSS邊框綜合案例

下一篇

如何制作CSS表格