html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
</style>
</head>
<body>
<header>
<div class="hlogo"></div>
<div class="hright"><a href="#">反馈意见</a> <a href="#">帮助</a></div>
</header>
<div class="main">
<div class="mword">
<p>欢迎注册网易免费邮！您可以选择注册163、126、yeah.net三大免费邮箱。</p>
</div>
<div class="mpart">
<ul>
<li>
<label>邮箱地址</label>
<span>
<input type="text" style="width:200px;"/>
<b style=" font-size:12px; color:#000; width:12px; display:inline-block;">@</b>
<select style="width:85px;" name="cars">
<option value="fiat" selected="selected">163.com</option>
</select>
</span> </li>
<li>
<label>密码</label>
<span>
<input type="text" />
</span></li>
<li>
<label>确认密码</label>
<span>
<input type="text" />
</span></li>
<li>
<label>手机号码</label>
<span>
<input type="text" />
</span></li>
<li>
<label>验证码</label>
<span>
<input type="text" /><p style=" line-height:26px; color: #9491A2;">请输入图片中的字符，不区分大小写<a href="#"> 不清楚？换张图片</a></p>
</span><img class="yanzhengma" src="images/yz.jpg"/></li>
<li>
<label> </label>
<span style="color:#</span>;">
<input class="mcheck" checked="true" type="checkbox"/>同意<a href="#"> “服务条款”</a>和<a href="#"> “隐私权保护和个人信息利用政策”</a>
</li>
<li>
<label> </label>
<span>
<input value="" class="msubmit" type="submit"/>
</span></li>
</ul>
</div>
</div>
<footer>
<p>关于网易 关于网易免费邮 邮箱官方博客 客户服务隐私政策 | 网易公司版权所有 ? 1997-2012</p>
</footer>
</body>
</html>
css
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 12px;
background-color: #F1F1F1;
}
/*---------------header--------------------*/
header {
margin: 0 auto;
height: 80px;
width: 950px;
background: url(../images/text.png) no-repeat 165px center;
}
header .hlogo {
margin-top: 20px;
border-right: 1px dotted grey;
float: left;
width: 140px;
height: 37px;
background: url(../images/logo_wy.png) no-repeat left center;
}
header .hright {
padding-top: 32px;
float: right;
height: 100%;
width: 100px;
}
header .hright a {
font-size: 0.9rem;
color: #2D4F8C;
text-decoration: none;
}
/*----------------main-------------------*/
a{
text-decoration:none;
color:#255897;}
.main {
margin: 0 auto;
height: 540px;
width: 950px;
background: url(../images/tit_bg1.jpg) no-repeat left top, url(../images/tit_bg3.jpg) no-repeat right top, url(../images/tit_bg2.jpg) repeat-x center top;
background-color: #fff;
}
.main .mword p {
font-size: 0.9rem;
color: #FFFFFD;
padding-left: 60px;
height: 46px;
line-height: 46px;
}
/*--------marin word---------------*/
.main .mpart {
height: 490px;
width: 450px;
margin: 0px auto 0px;
}
.main .mpart ul {
width: 450px;
margin-top: 30px;
padding-left: 10px;
}
.main .mpart ul li {
height: 60px;
}
.main .mpart ul li label {
display: inline-block;
width: 70px;
text-align: right;
font-size: 0.9rem;
margin-right: 10px;
}
.main .mpart ul li:not(:nth-child(4)):not(:nth-child(6)):not(:nth-child(7)) label:before {
content:"* ";
color:red;
}
.main .mpart ul li span {
position: absolute;
display: inline-block;
height: 60px;
}
.main .mpart ul li:not(:nth-child(6)):not(:nth-child(7)) span input {
border:solid 1px grey;
margin-right:5px;
height:25px;
background:url(../images/input_bg.jpg) repeat-x center center;
width:315px;
}
.main .mpart ul li:not(:nth-child(6)) span:after {
position: absolute;
bottom: 10px;
white-space: nowrap;
color: #9491A2;
font-size: 0.7rem;
}
.main .mpart ul li:first-child span:after {
content: "6-18个字符，可使用字母、数字、下划线。推荐以手机号码直接注册";
}
.main .mpart ul li:nth-child(2) span:after {
content: "6~16个字符，区分大小写";
}
.main .mpart ul li:nth-child(3) span:after {
content: "请再次输入密码";
}
.main .mpart ul li:nth-child(4) span:after {
content: "密码遗忘或被盗时，可通过手机短信取回密码 ";
}
/*
.main .mpart ul li:nth-child(5) span:after {
content: "";
}
*/
/*
.main .mpart ul li:nth-child(6) span:after {
content: "";
color: #9491A2;
font-size: 0.7rem;
}
*/
.main .mpart ul li:nth-child(5){ /*放置验证码*/
position:relative;}
.yanzhengma{ /*放置验证码*/
height:25px;
width:125px;
position:absolute;
right:-80px;}
.main .msubmit {
border:0;
background: url(../images/but.jpg) no-repeat center center;
width: 105px;
height: 35px;
}
.main .mcheck {
width: 15px;
}
/*----------------footer-------------------*/
footer {
color: #646462;
margin: 0 auto;
height: 50px;
width: 950px;
}
footer p {
height: 50px;
line-height: 50px;
text-align: center;
}