<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>logo</title>
<link href="header.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<form id="payment_form" method="post">
<fieldset id="name">
<legend>name</legend>
<label>title</label>
<select id="title1">
<option selected="selected">Mr.</option>
<option>Mis</option>
<option>Mrs</option>
</select>
<label>first name</label>
<input type="text" id="first_name" />
<label>last name</label>
<input type="text" id="last_name" />
<br/>
</fieldset>
<fieldset id="address">
<legend>address</legend>
<label>street</label>
<input type="text" id="street" />
<label>city</label>
<input type="text" id="city" />
<label>state</label>
<input type="text" id="state" />
<label>zip code</label>
<input type="text" id="zip" />
<label>county</label>
<input type="text" id="country" />
<br/>
</fieldset>
<fieldset id="payment">
<legend>payment option</legend>
<fieldset id="credit_card">
<label>visa</label>
<input type="radio" id="visa" />
<label>mastercard</label>
<input type="radio" id="mastercard" />
<label>discover</label>
<input type="radio" id="discover" />
</fieldset>
<label>cardmumber</label>
<input type="text" id="card_number" />
<label>expiration date</label>
<input type="text" id="expiration" />
<br/>
<input type="submit" />
<br/>
</fieldset>
</form>
</body>
</html>
css:
label{
display:block;
float:left;
clear:left;
width:90px;
padding-right:10px;
line-height:18px;
text-align:right;
margin:7px auto;
}
input{
display:block;
float:left;
}
br{
clear:both;
}
form{
width:75%;
margin:30px auto;
}
fieldset{
background-color:#dfdfdf;
font-size:14px;
margin:20px 0px;
padding:10px;
}
fieldset fieldset{
background-color:#efefef;
}
图例：