品优购的界面设计要求_品优购注册页
1号盒子命名为header
2号盒子命名为registerarea
3号盒子命名为footer
1. 结构搭建
step1:新建register.html和register.css文件
注意:注册页面涉及隐私 不需要优化 怎么简单怎么写 怎么安全怎么写
注册页面
123
/*注册页面的CSS*/
.w {/*由于注册页面的html文件没有引入版心的样式 所以这里要重新写*/
width: 1200px;
margin: auto;
}
2.header制作
.header {
height: 82px;
border-bottom: 2px solid #b1191a;
}
.logo {
padding-top: 15px;
/*这里希望品优购这个logo可以距离浏览器顶端远一点
用margin-top会发生外边距合并的现象,不合适
这里用padding-top比较合适*/
}
3. registerarea制作
registerarea也分两个部分,上面一个盒子放标题(h3)下面一个盒子放内容注册内容(reg-form)
step1: registerarea结构搭建
123
.registerarea {
height: 520px;/*大一点、小一点没有关系*/
border: 1px solid #ccc;
margin-top: 20px;
}
step2: h3部分
注册新用户
我有账号,去登陆
.registerarea h3 {
height: 40px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
padding: 0 10px;/*反正h3没给宽度 可以放心地*/
font-weight: 400;/*不加粗*/
line-height: 40px;
font-size: 18px;
}
.registerarea em {
font-size: 14px;
float: right;
}
.registerarea a {
color: #c81623;
}
step3: reg-form部分
结构分析: 大盒子左右居中对齐,里面每一行看作一个li。
(1)第一个li为例子(手机号):第一行小li里面分三部分,用行内块元素比较恰当(label、input、span)。
手机号:
手机号码格式不正确,请从新输入
.reg_form {
/*这个盒子要求左右居中对齐*/
width: 600px;
height: 400px;/*宽高都是随手拉的*/
/*background-color: pink;*/
margin: 40px auto 0;/*上40px 左右auto 不给下外边距*/
}
.reg_form label {
display: inline-block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: right;/*文字右对齐*/
}
.reg_form input {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 5px;
}
.error {
margin-left: 10px;
color: #df3033;
}
.error_icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/error.png) no-repeat;
/*出现行内块元素的地方一般都会出现这句话*/
vertical-align: middle;/*让背景图片和文字对齐(中线对齐)*/
/*若中线对齐之后依然觉得不够齐 这里可以利用这个微调 让图标再往上走2px*/
margin-top: -2px;
}
(2)第2个li为例子(短信验证码):主要是li的复制粘贴和简单修改
短信验证码:
注意:样式里面要加上下面一句话,让每个小li之间留点距离。
.reg_form li {
margin-bottom: 15px;/*让每个li 之间留点距离*/
}
(3)第3个li为例子(登陆密码):密码输入正确
登陆密码:
输入正确
.success {
margin-left: 10px;
color: #40b83f;
}
.success_icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/success.png) no-repeat;
/*出现行内块元素的地方一般都会出现这句话*/
vertical-align: middle;/*让背景图片和文字对齐(中线对齐)*/
/*若中线对齐之后依然觉得不够齐 这里可以利用这个微调 让图标再往上走2px*/
margin-top: -2px;
}
(4)第4个li:安全程度:弱、中、强
安全程度
弱
中
强
.safe {
padding-left: 181px;/*全部写完之后 在检查元素里面调*/
color: #b2b2b2;
}
.safe em {
/*em行内元素内边距不要给上下 可以给左右*/
padding: 0 12px;
color: #fff;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
同时注意将之前的
.registerarea em {/*放的内容是:我有账号,去登陆*/
font-size: 14px;
float: right;
}
修改为
.registerarea h3 em {
/*如果只是.registerarea em则会对下面的.safe em造成影响
因为.safe em也属于registerarea内 所以需要h3在这里把这限定死*/
font-size: 14px;
float: right;
}
(5)第5个li:确认密码(直接复制,样式不用修改)
确认密码:
密码不一致,请重新输入
(6)第6个li:同意模块制作
同意协议并注册
写样式之前在浏览器中打开,会发现这个input特别打,原因是受到前面几个li中.reg_form input样式冲突的影响。所以对前面.reg_form中input添加类名class="inp"
手机号:
手机号码格式不正确,请从新输入
短信验证码:
登陆密码:
输入正确
安全程度
弱
中
强
确认密码:
密码不一致,请重新输入
同意协议并注册
并将css中的原样式
.reg_form input {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 5px;
}
修改成
.inp {
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 5px;
}
之后再写同意模块的样式
.agree {
padding-left: 100px;
}
.agree input {
vertical-align: middle;
margin-right: 5px;
}
.agree a {
color: #1ba1e6;
}
(7)第7个li:完成注册
.over {
width: 200px;
height: 34px;
background-color: #c81623;
margin: 30px 0 0 130px;
border: 0;/*不要默认的小边框*/
color: #fff;
font-size: 14px;
}
(8)添加表单域
表单应该有表单域将其包起来
手机号:
手机号码格式不正确,请从新输入
短信验证码:
登陆密码:
输入正确
安全程度
弱
中
强
确认密码:
密码不一致,请重新输入
同意协议并注册
用户协议
4. footer制作
关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn
京ICP备08001421号京公网安备110108007702
.footer {
height: 120px;
text-align: center;
}
.links {
margin-top: 20px;
height: 30px;
}
.copyright {
line-height: 20px;
}
品优购的界面设计要求_品优购注册页相关推荐
- 品优购的界面设计要求_品优购项目
项目技能: 1.使用AngularJS前端框架完成前后端交互 2.完成品牌的基本管理功能的开发 AngularJS四大特性: 1.MVC 2.双向绑定 3.依赖注入 4.模块化设计 指令:显示变量的值 ...
- 小优机器人恢复出厂设置_小优机器人基本使用指导手册.docx
U03快速使用指导手册 2013年10月18日PAD使用:最新版本的系统pad无法单独使用,必须连接小优共同使用.如pad开启后无法连接小优则会出现如下界面,且pad无法使用. 蓝牙连接: 自动连接, ...
- 内购订单进行二次处理_游戏内购要涨价?谷歌效仿苹果:安卓内购抽成30%
点击上方"蓝字"关注我们 苹果在全球范围内都要从第三方APP的收入中抽成30%,这让不少开发者都心生不满,甚至EPIC的<堡垒之夜>还因为绕开苹果App Store的收 ...
- 换购优惠 java代码_商品换购小程序
作业要求: 我的代码: package day20180920; import java.util.Scanner; public class ZuoYe04 { public static void ...
- 优信php面试流程_上海优信智能科技有限公司
系统架构设计师 一.职位描述 1. ?全面管理公司技术研发和项目管理工作,带领团队完成公司制定的产品研发目标; 2. ?规划公司的技术发展路线与新产品开发,及时了解和监督技术发展战略规划的执行情况; ...
- HTML+CSS实现品优购登录界面
HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
- 17天代码 品优购_品优购(IDEA版)-第一天
品优购(IDEA版)-第一天 品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 3:能够 ...
- 品优购注册页html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 社群团购到底有哪些优势?为什么社群团购很容易打造爆品?
社群团购到底有哪些优势? 很多人一听社群团购,就会自动打上低价乱价仿货劣质标签,事实上,社群团购已经开始泾渭分明了,慢慢辐射高端用户群体,大部分社群团购平台年流水过亿,利润在20%左右.社群团购平台未 ...
最新文章
- R语言ggplot2可视化:使用dplyr包计算每个分组个数的比例(对计算获得的百分比进行近似,值保留整数部分)、使用ggplot2可视化条形图(bar plot)、并在条形图上添加百分比标签
- elementui表格复制_Element-UI中关于table表格的那些骚操作
- 简明writeStream实现
- C语言 文件操作9--fgetc()和fputc()
- php $start_date-sub(,PHP DateTime类常用方法总结
- QT示例:基于TCP点对点Socket通讯
- Python安装和几种Python编程工具介绍
- html背景图片如何自动平铺,html怎么设置背景图片全屏平铺?
- linux怎么进入root权限
- 利用akshare读取50EFF期权2
- delphi xe “[FIREDAC][PHYS][SQLITE] DATABASE IS LOCKED”错误
- 雅克比(Jacobi)迭代法解线性方程组(Matlab程序)
- ResRep Lossless CNN Pruning via Decoupling Remembering and Forgetting 论文学习
- sublime插件之sidebar
- vuex:状态管理库,分5大模块:
- 如何使用浏览器对网络请求编辑重发(Edit and Resent) 以及: fetch API 中 ReadablleStream 的打印方法
- 浅谈好未来的盈利模式
- 【JAVA】求出区间[a,b]中所有整数的质因数分解。
- Tableu地图绘制注意事项
- Wordpress无法写入wp-config.php文件的解决办法
热门文章
- mpvue开发美团外卖点餐小程序
- 使用Mac的浏览器调试ios设备上的cordova app
- origin刻度消失_Origin中坐标轴被误删了,怎么恢复坐标轴及刻度
- 在Proteus中用8×8来实现16×16点阵屏
- 电影推荐系统 python简书_基于Spark的电影推荐系统(实战简介)
- VMD结合ISSA优化LSSVM功率预测
- VS插件(VSIX获取解决方案和项目信息)
- 关于万能遥控器 这几个问题你必须知道
- 网易buff服务器不稳定啥时候好,精准验货!BUFF社区服检视功能介绍
- 【大咖云集】2021年IEEE电子信息工程与计算机科学国际会议(IEEE-EIECS 2021)征稿中!...