用HTML製作一個簡單的表單並用css進行美化
表單製作
製作的表單利用了文本域、下拉框、密碼、單選框、複選框、按鈕以及提交按鈕等。
二話不說，先上代碼:
<html>
<body>
<form action="" method="GET">
用戶名:
<input type="text" name="用戶名">
<br>
密碼:
<input type="password" name="密碼">
<br>
性別:
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<br>
愛好:
<input type="checkbox" name="aihao" value="dalanqiu">籃球
<input type="checkbox" name="aihao" value="tizuqiu">足球
<input type="checkbox" name="aihao" value="pingpangqiu">乒乓球
<input type="checkbox" name="aihao" value="shu">看書
<input type="checkbox" name="aihao" value="jioa">睡覺
<br>
城市:
<select name="city">
<option value="yu">河南</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
<option value="sz">深圳</option>
</select>
<br>
<input type="button" value="您無事可以點着解悶兒">
<br>
<input type="submit">
</form>
<textarea rows="50" cols="50">在此可以寫您想寫的話：</textarea>
</body>
</html>
效果圖如下：
用css進行美化
css可以進行多種的美化方式，其中有文本樣式、背景樣式、背景圖片等多種。
在這裏只對製作網頁進行了簡單的美化，只美化了背景部分以及部分字體顏色，效果如下：
而做到這個只需要增加一個網頁格式style代碼段即可，具體增加代碼如下：
<style>
body
{
background:white url(james.png) repeat-y right top;
margin-right:1000px;
boxes<font-size:14px; color:red;>
}
.boxes{font-size:14px; color:yellow;}
</style>
由於製作的是表單，感覺還是以簡單，純淨爲主，所以沒有對字體以及背景顏色進行改變。