在網頁設計中,表單是不可或缺的一部分。為了美化表單的外觀和布局,我們需要運用一些CSS技巧,下面我們來看一下如何實踐表單加CSS布局。
首先我們需要設置表單的樣式公共屬性,如下所示:
form { margin: 0 auto; width: 400px; padding: 30px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 0px 0px 10px #999; }
上述代碼包括設置表單的外邊距、寬度、內邊距、背景顏色、邊框圓角和陰影等基本樣式屬性。
接下來,我們需要設置表單內具體元素的樣式,如下所示:
label { display: block; font-size: 18px; font-weight: bold; margin-bottom: 10px; } input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; border: none; outline: none; border-radius: 5px; box-shadow: 0px 0px 5px #999; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; }
上述代碼中,我們分別對表單內的標簽和輸入框進行了樣式設置,其中輸入框包括文本框、郵箱框和密碼框,設置了寬度、內邊距、外邊距、邊框圓角和陰影等屬性。提交按鈕也進行了樣式設置,包括顏色、字體大小、字體粗細等屬性。
最后,我們可以將上述代碼添加到網頁的樣式表中,即可實現美觀的表單頁面效果。
上一篇衡陽CSS四季海棠酒店
下一篇mysql 破解教程