html部分
<!DOCTYPE html>
<html>
<head>
<title>Web Form</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header"><h1>Contact Us!</h1></div>
<div id="wrapper">
<div id="inputs">
<form name="input" action="#" method="post">
First name: <input type="text" name="firstname" value="first name"><br/>
Last name: <input type="text" name="lastname" value="last name"><br/>
E-mail: <input type="email" name="email" value="e-mail address"><br/><br/>
</form>
</div>
<div>
<form id="options">
Message: <br/><textarea name="msg"></textarea><br/>
<p>Sex:</p>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female<br/><br/>
<input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.<br/>
<input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.<br/><br/>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
css部分
#header {
position: relative;
top: -10px;
background-color: #00A0B0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
height: 40px;
}
h1 {
font-family: Lobster;
color: #FFFFFF;
text-align: center;
}
form {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Verdana, Arial, sans-serif;
display: inline-block;
}
input {
font-family: Verdana, Arial, sans-serif;
color: #777;
}
textarea {
vertical-align: top;
width: 400px;
color: #777;
}
#wrapper {
border-left: 1px solid #888;
border-right: 1px solid #888;
border-bottom: 1px solid #888;
position: relative;
top: -10px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 20px;
box-shadow: 3px 3px 3px #444;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
}
#inputs {
width: 200px;
clear: both;
}
#inputs input {
width: 100%;
clear: both;
}