常用的表单注册页面
1. 第一个注册页面
我的分析思路:
-
整个内容时居中的,所以需要有一个版心,根据ps测量,内容宽度是1200px,所以我设置版心(.w)为1200px(一般的内容的版心为1200px),再设置居中的属性margin: 100px auto;
-
整个框架如上图所示,这样就很容易写出代码
-
接下来,我们来研究h3里面的内容
一般样式:
*号一般设置(margin,padding)取消标签与标签的间隙
a标签一帮设置(color:#666, text-decoration:none) 取消a自带的下划线
em标签一般设置(font-style:normal)取消他的斜线的效果
具体样式:
位置,字体颜色,垂直居中,字体粗细,字体大小等
- 分析
.reg_form
里面的内容
.reg_form,宽600px,高400px,水平居中:margin:40px auto 0;
.reg_form里面嵌套这form
-
分析form里面的内容
form里面有一个ul,ul下面嵌套这7个li,因为li有默认样式,需要取消li的默认样式,设置li的样式(list-style:none),而且li与li上下有间隙,所以设置他的样式为(margin-bottom:15px)
-
分析li里面的内容
为了让li与li之间对齐,让label变为行内块元素,设置label的高度,宽度,文字靠右对齐(display:inline-block ,width: 100px,height:36px,line-height:36px,text-align:right)
input 标签 设置宽高,边框,左右位置(margin-left:15px)
input 设置一般样式(outline:none)
-
分析span标签里面的内容
i标签和文字i标签和文字
-
分析li里面的特殊
-
分析li里面的特殊
- 具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
color: #666;
}
a {
color: #666;
text-decoration: none;
}
input {
outline: none;
}
em {
font-style: normal;
}
li {
list-style: none;
}
.w {
width: 1200px;
margin: 100px auto 0;
}
.register_area {
height: 520px;
border: 1px solid #ccc;