<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易注册界面</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
a{
text-decoration: none;
color:#ccc;
}
body{
font-size: 12px;
}
.header{
width:960px;
height:80px;
margin:0 auto;
padding-top: 28px; /* .header和.logo是父子关系,建议用 padding */
box-sizing:border-box; /* 保持盒子在padding增加后不变形 */
}
.header .logo{
width:644px;
height:27px;
background-image: url("images/glb_v2.png");
background-repeat: no-repeat; /* 让图像不平铺 */
background-position:0px 0px; /* 让图像从什么位置开始显示 */
float:left;
}
.header .logo a{
width:125px;
height:27px;
display:inline-block; /* 把a标签转换为行内块级 */
}
.header .links{
width:200px;
height:27px;
float:right;
text-align:right; /* 设置.links 盒子内容的对齐方式 */
}
.header .links a{
color:#ccc;
line-height:27px; /* 设置a标签文字的行高等于它的父元素,已达到文字居中 */
}
.content{
width:960px;
height:600px;
margin:0 auto;
}
.content .top{
width:960px;
height:38px;
background:url("images/line-center.png") repeat-x;
}
.top .top-left{
width:960px;
height:38px;
background:url("images/line-left.png") no-repeat left 0; /* 插入背景图片 不平铺 左显示 */
}
.top h1{
color:white;
font-size:12px;
line-height:38px; /* 设置行高和它的父元素.left一样高,以达到文字居中效果 */
text-indent:2em; /* 首行缩进2个文字的距离 */
}
.top .t