新建register.html与register.css两个文件。
注册页面命名：
| 说明 | |
|---|---|
| 注册专区 | registerarea |
| 注册内容 | reg-form |
| 错误的 | error |
| 成功的 | success |
| 默认的 |
头部与尾部加上注册内容。
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <!-- 初始化css --> <link rel="stylesheet" href="css/base.css"> <!-- register css文件 --> <link rel="stylesheet" href="css/register.css"> </head> <body> <div class="w"> <!-- header --> <div class="header"> <div class="logo"> <a href="index.html"> <img src="img/logo.png" alt=""> </a> </div> </div> <!-- registerarea --> <div class="registerarea"> <h3> 注册新用户 <em> 我有账号，去<a href="login.html">登陆</a> </em> </h3> <div class="reg_form"> <form action="demo.php"> <ul> <li> <label for="tel">手机号:</label> <input type="text" class="inp" id="tel"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span> </li> <li> <label for="">短信验证码:</label> <input type="text" class="inp"> </li> <li> <label for="">登陆密码:</label> <input type="text" class="inp"> <span class="success"> <i class="success_icon"></i> 恭喜您输入正确 </span> </li> <li class="safe"> 安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li> <li> <label for="">确认密码:</label> <input type="text" class="inp"> <span class="success" > <i class="success_icon"></i> 恭喜您输入正确 </span> </li> <li class="agree"> <input type="checkbox" >同意协议并注册 <a href="#">《知果果用户协议》</a> </li> <li> <input type="submit" value="完成注册" class="over"> </li> </ul> </form> </div> </div> <div class="footer"> <p class="links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="copyright"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </p> </div> </div> </body> </html>
css代码：
.w {
width: 1200px;
margin: auto;
}
.header {
height: 82px;
border-bottom: 2px solid #b1191a;
}
.logo {
padding-top: 15px;
}
.registerarea {
height: 520px;
border: 1px solid #ccc;
margin-top: 20px;
}
.registerarea h3 {
height: 40px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
padding: 0 10px;
font-weight: 400;
line-height: 40px;
font-size: 18px;
}
.registerarea h3 em {
float: right;
font-size: 14px;
}
.registerarea a {
color: #c81623;
}
.reg_form {
width: 600px;
height: 400px;
margin: 40px auto 0;
}
.reg_form li {
margin-bottom: 15px;
}
.reg_form label {
display: inline-block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: right;
}
.inp {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 10px;
}
.error {
color: #df3033;
margin-left: 10px;
}
.error_icon,
.success_icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/error.png) no-repeat;
vertical-align: middle;
margin-top: -2px;
}
.success {
color: #40b83f;
margin-left: 10px;
}
.success_icon {
background-image: url(../img/success.png);
}
.safe {
padding-left: 187px;
color: #b2b2b2;
}
.safe em {
padding: 0 12px;
color: #fff;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
padding-top: 20px;
padding-left: 100px;
}
.agree input {
vertical-align: middle;
margin-right: 5px;
}
.agree a {
color: #1ba1e6;
}
.over {
width: 200px;
height: 34px;
background-color: #c81623;
margin: 30px 0 0 130px;
border: none;
color: #fff;
font-size: 14px;
}
.footer {
height: 120px;
text-align: center;
}
.links {
margin-top: 20px;
height: 30px;
}
.copyright {
line-height: 20px;
}
项目的四个的页面（首页、列表页、详情页、注册页）已完成。html我们学习的就是常用标签，就是基本盒子。css就是要用美化布局网页的，html+css是没有逻辑可言的，基本就是搭积木摆放盒子的过程，需要的只是耐心。多看多写多模仿。
评论