設置註冊表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
width: 400px;
height: 460px;
background: gainsboro;
<!--四邊50px居中-->
margin: 50px auto;
padding: 20px;}
.two label {
<!-- 設置邊框寬度,然後左浮動 ,在設置右對齊.可以把選擇的內容一起對齊-->
float: left;
width: 80px;
text-align: right;
}
h3{
height: 50px;
width: 390px;
border-bottom: 1px solid black;
margin: 0;
line-height: 50px;
padding-left: 10px;
}
.three input {
width: 240px;
height: 24px;
}
.four textarea{
width: 240px;
height: 100px;
}
.over input {
width: 100px;
height: 24px;
}
.over {
padding-left: 80px;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<div class="one">
<form>
<h3>註冊表單</h3>
<div class="two">
<div class="three">
<p>
<label>姓名:</label>
<input type="text" name="user" />
</p>
<p>
<label>密碼:</label>
<input type="password" name="pwd" />
</p>
</div>
<p>
<label>性別:</label>
<input type="radio" name="gender" />男
<input type="radio" name="gender" />女
<input type="radio" name="gender" />保密
</p>
<p>
<label>愛好:</label>
<input type="checkbox" name="run"/>跑步
<input type="checkbox" name="sing"/>唱歌
<input type="checkbox" name="dance"/>跳舞
</p>
<p>
<label>照片:</label>
<input type="file" name=" file" />
</p>
<p class="four">
<label>個人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫:</label>
<select name="choice">
<option value="0">北京</option>
<option value="1">廣東</option>
<option value="2">上海</option>
<option value="3">廣西</option>
</select>
</p>
<div >
<p class="over">
<label ></label>
<input type="submit" name="提交" />
<input type="reset" name="重置" />
</p>
</div>
</div>
</form>
</div>
</body>
</html>
設置註冊表單