HTML+CSS实现品优购登录界面

HTML+CSS实现品优购登录界面效果图如下：

1、HTML部分源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>个人注册</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入我们初始化的css --><link rel="stylesheet" href="css/base.css"><!-- 引入我们自己的注册页面的css --><link rel="stylesheet" href="css/register.css">
</head><body><div class="w"><header><div class="logo"><a href="index.html"> <img src="data:images/logo.png" alt=""></a></div></header><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登陆</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号：</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"><span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li><li><label for="">登录密码：</label> <input type="password" class="inp"><span class="error"> <i class="error_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="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li><li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《知晓用户协议》</a></li><li><input type="submit" value="完成注册" class="btn"></li></ul></form></div></div><footer><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |品优购公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></footer></div>
</body></html>

2、CSS部分源代码如下：

.w {width: 1200px;margin: 0 auto;
}
header {height: 84px;border-bottom: 2px solid #c81523;
}
.logo {padding-top: 18px;
}
.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}
.registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;line-height: 42px;padding: 0 10px;font-size: 18px;font-weight: 400;
}
.login {float: right;font-size: 14px;
}
.login a {color: #c81523;
}
.reg_form {width: 600px;margin: 50px auto 0;
}
.reg_form ul li {margin-bottom: 20px;
}
.reg_form ul li label {display: inline-block;width: 88px;text-align: right;
}
.reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;
}
.error {color: #c81523;
}
.error_icon,
.success_icon {display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;margin-top: -2px;
}
.success {color: green;
}
.success_icon {background: url(../images/success.png) no-repeat;
}
.safe {padding-left: 170px;
}
.safe em {padding: 0 12px;color: #fff;
}
.ruo {background-color: #de1111;
}
.zhong {background-color: #40b83f;
}.qiang {background-color: #f79100;
}
.agree {padding-left: 95px;
}
.agree input {vertical-align: middle;
}
.agree a {color: #1ba1e6;
}
.btn {width: 200px;height: 34px;background-color: #c81623;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}
.mod_copyright {text-align: center;padding-top: 20px;
}
.links {margin-bottom: 15px;
}
.links a {margin: 0 3px;
}
.copyright {line-height: 20px;
}

HTML+CSS实现品优购登录界面相关推荐

HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
品优购的界面设计要求_品优购注册页
1号盒子命名为header 2号盒子命名为registerarea 3号盒子命名为footer 1. 结构搭建 step1:新建register.html和register.css文件注意:注册页面 ...
基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）
HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
品优购的界面设计要求_品优购项目
项目技能: 1.使用AngularJS前端框架完成前后端交互 2.完成品牌的基本管理功能的开发 AngularJS四大特性: 1.MVC 2.双向绑定 3.依赖注入 4.模块化设计指令:显示变量的值 ...
品优购项目--登录页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
品优购项目--注册页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
HTML+CSS品优购
1.公共CSS和CSS初始化 1.1公共CSS代码块 /* 声名字体图标,一定要注意路径变化 */@font-face {font-family: 'icomoon';src: url('../fon ...

HTML+CSS实现品优购登录界面

HTML+CSS实现品优购登录界面相关推荐

最新文章

热门文章