项目"/>
品优购项目
效果图
HTML部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>品优购登录</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/reginster.css">
</head>
<body><div class="header"><div class="logo fl"><h1><a href="index.html" title="品优购">品优购</a></h1></div></div><div class="registerarea w"><div class="reg-hd"><h3>注册新用户</h3><span>我有账号,去<a href="#">登录</a></span></div><div class="reg-form"><form action="demo.php"><ul><li><label for="tel">手机号:</label><input type="text" class="inp"><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="password" 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="password" class="inp"><span class="success"><i class="success_icon"></i>恭喜您输入正确 </span></li><li class="agree"><input type="checkbox" checked="checked">同意协议并注册<a href="#">《知果果用户协议》</a></li><li><input type="submit" value="完成注册" class="over"></li></ul></form></div></div><div class="mod_copyright"><p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</p></div>
</body>
</html>
CSS部分
.header {height: 52px;width: 1200px;margin: 0 auto;border-bottom: 3px solid #C71523;
}
.logo {margin-top: 15px;
}
.registerarea {height: 550px;border: 1px solid #E7E7E7;margin-top: 20px;
}
.reg-hd {height: 40px;line-height: 40px;padding: 0 10px;border-bottom: 1px solid #E7E7E7;background-color: #ECECEC;color: #333;
}
.reg-hd h3 {float: left;font-size: 18px;font-weight: 400;
}
.reg-hd span {float: right;font-size: 14px;
}
.reg-hd span a {color: #C71523;
}
.reg-form {width: 600px;height: 400px;margin: 40px auto 0;
}
.reg-form li {height: 36px;line-height: 36px;margin-bottom: 20px;
}
.reg-form label {display: inline-block;width: 100px;height: 36px;text-align: right;font-size: 14px;color: #4C4C4C;
}
.inp {width: 238px;height: 34px;margin: 0 10px;
}
.error,
.success {font-size: 12px;
}
.error,
.error_icon {color: #DF2F33;
}
.success,
.success_icon {color: #3FB73F;
}
.error_icon,
.success_icon {font-family: 'icomoon';font-size: 14px;
}
.safe {font-size: 12px;color: #B2B2B2;margin-left: 195px;
}
.safe em {display: inline-block;width: 34px;height: 14px;line-height: 14px;text-align: center;color: #fff;
}
.ruo {background-color: #DD1010;
}
.zhong {background-color: #3FB73F;
}
.qiang {background-color: #F79100;
}
.agree {font-size: 12px;color: #4D4D4D;margin-left: 114px;
}
.agree a {color: #53B8EC;
}
.over {width: 200px;height: 34px;background-color: #C71523;color: #fff;border: none;margin-left: 130px;
}
更多推荐
品优购项目
发布评论