上节课完善了草稿代码的设计,本节课对上节课内容继续完善:完成CSS具体布局和美化。
技术要点包括:
-
表单元素的水平对齐问题。
-
表单元素的垂直调整问题。
- 表单元素的默认界面个性化定制问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#title, #subtitle, #main, #copyright {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
height: 100px;
background-color: blue;
}
#subtitle {
height: 100px;
background-color: grey;
}
#main {
text-align: left;
padding:50px 0px 70px 0px;
}
#copyright {
height: 50px;
background-color: red;
}
ul {
list-style: none;
}
label {
display: inline-block;
width: 140px;
}
li {
height: 40px;
}
input {
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999;
border-left-color: #999;
border-top-style: none;
border-right-style: none;
}
.tip1,.tip2 {
display: none;
position:relative;
bottom:40px;
}
textarea{
resize:none;
}
#subbtn {
position:relative;
top:50px;
height: 42px;
width: 100px;
background-image: url(btn.gif);
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.tip1,.tip2{
background-color:#F0F;
width:168px;
text-align:center;
}
li:hover .tip1,li:hover .tip2
{
display:block;
}
</style>
</head>
<body>
<div id="title">Htzd.org Site</div>
<div id="subtitle">Register</div>
<div id="main">
<form action="" method="get">
<ul>
<li>
<label for="username">Name:</label>
<input id="username" type="text" name="username"/>
<div class="tip1">Input Your Name:</div>
</li>
<li>
<label for="password">Password:</label>
<input id="password" type="password" name="password"/>
<div class="tip2">Input Your Password:</div>
</li>
<li>
<label for="repassword">Confirm Password:</label>
<input type="repassword" name="repassword"/>
</li>
<li>
<label for="sex">Sex:</label>
<input type="radio" name="sex" value="m"/>
Male
<input type="radio" name="sex" value="f" />
Female </li>
<li>
<label for="hobby">Hobby:</label>
<input type="checkbox" name="hobby" value="gym">
Gym
<input type="checkbox" name="hobby" value="reading">
Reading
<input type="checkbox" name="hobby" value="game"/>
Game</li>
<li>
<label for="degree">Degree: </label>
<select id="degree" name="degree">
<option value="0">Primary School</option>
<option value="1">Middle School</option>
<option value="2">College School</option>
</select>
</li>
<li>
<label>Read Agreement:</label>
</li>
<li>
<textarea name="textarea" cols="84" rows="4" readonly>Please read.......If you don't agree.....,
</textarea>
</li>
<li><input id="subbtn" name="" type="submit" value=""></li>
</ul>
</form>
</div>
<div id="copyright">Copy Right Htzd.org</div>
</body>
</html>
技术关键词:
居中,form,表单元素,Input,ui,li,label,textarea,select,option,radio,check,dropdown,list,button,get,post