品优购项目--注册页面

效果图

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;
}

品优购项目--注册页面相关推荐

品优购项目--登录页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
「学习笔记」品优购项目-上（页面公共部分）
「学习笔记」品优购项目-上品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
品优购项目的制作——知识分享
目录前言一.首页 1.基本的布局 2.版心部分 3.主要内容模块二.注册页面三.产品列表页面四.产品详情页面总结前言品优购项目是一个需要糅杂大量HTML5+CSS3知识点的网站项目,一 ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
话不多说先看效果图,源代码在文末首页产品页:根据此前京东抢购案例补充完善注册页文章目录品优购项目规划 1. 网站制作流程 2. 品优购项目整体介绍 3. 开发工具以及技术栈 4. 品优购项目 ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...

品优购项目--注册页面

品优购项目--注册页面相关推荐

最新文章

热门文章