CSS是網頁制作不可或缺的重要技能之一。CSS表單制作就是其中的一個方面,今天我們來學習一下如何制作簡單的CSS表單。
首先,在HTML中寫出表單的骨架,包含form、input等標簽。例如:
<form action="#" method="get"> <input type="text" name="name" placeholder="請輸入姓名"> <input type="mail" name="email" placeholder="請輸入電子郵件"> <input type="password" name="password" placeholder="請輸入密碼"> <button type="submit">提交</button> </form>
然后,在CSS文件中,對表單進行樣式的設置。例如:
input { display: block; margin-bottom: 10px; width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 16px; } button { display: block; width: 100%; padding: 8px 10px; border: none; border-radius: 3px; background-color: #007bff; color: #fff; font-size: 16px; }
這里我們設置了input和button標簽的樣式。input標簽的樣式包括寬度、內邊距、邊框、邊框圓角、字體大小等;button標簽的樣式包括寬度、內邊距、邊框、邊框圓角、背景顏色、字體顏色等。
最后,將CSS文件和HTML文件鏈接起來,運行測試即可。
通過以上步驟,我們就成功地制作了簡單的CSS表單。當然,這只是CSS表單制作的一個基礎,我們還可以對表單進行更多樣式的設置,如更改顏色、字體、背景等,以滿足不同的需求。
上一篇dockergo網站
下一篇jquery mobi