css 文本图标对齐与定位二三事
2016-08-15 16:25
267 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文本图标对齐与定位二三事</title> <style> body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } a { color: #50B6E5; } .constr { width: 1200px; margin-left: auto; margin-right: auto; } .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; } .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; } .regist-main { width: 600px; margin-left: auto; margin-right: auto; } .regist-group { margin-top: 20px; overflow: hidden; } .regist-label { width: 70px; padding-top: 10px; float: left; } .regist-cell { display: table-cell; *display: inline-block; } .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; } .regist-code-input { width: 130px; } .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; } .regist-btn:hover { background-color: #33a646; } .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; } .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; } .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; } .regist-warn { padding-left: 20px; color: #be3948; } .regist-warn > .icon-warn { position: absolute; margin-left: -20px; } </style> </head> <body> <div class="constr"> <div class="regist-head">注册</div> <div class="regist-body"> <div class="regist-main"> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>登录邮箱</label> <div class="regist-cell"> <input type="email" class="regist-input"><span class="regist-remark regist-warn"> <i class="icon-warn"></i>邮箱格式不准确(演示) </span> </div> </div> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>登录密码</label> <div class="regist-cell"> <input type="password" class="regist-input"><span class="regist-remark"> 请输入6-16位密码,区分大小写,不能使用空格 </span> </div> </div> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>用户昵称</label> 4000 <div class="regist-cell"> <input type="password" class="regist-input"> </div> </div> <div class="regist-group"> <label class="regist-label">手机号码</label> <div class="regist-cell"> <input type="tel" class="regist-input"> </div> </div> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>验 证 码</label> <div class="regist-cell"> <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg"> </div> </div> <div class="regist-group"> <label class="regist-label"> </label> <div class="regist-cell"> <input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label> <p> <a href="javascript:" class="regist-btn">立即注册</a> </p> </div> </div> </div> </div> </div> </body> </html>
相关文章推荐
- listview的重要属性viewtype,实现多类型item样式
- 理解CSS3 transform中的Matrix(矩阵)
- hover一个组件,另一个组件css效果
- 推荐一些css reset
- div边框线上添加文字
- CSS3-transform
- CSS Sprites(CSS雪碧图)利用background-position从大图中扣出小图
- CSS3弹性伸缩布局(二)——flex布局
- CSS3选择器容易误解的点
- CSS圣杯布局实例
- CSS
- CSS定位-浮动
- div+css的图片滚动效果
- css img 等比例自动缩放
- 用CSS制作三角形和按钮的简单实例
- 5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
- [HTML] CSS3 边框
- 内联式css样式,直接写在现有的HTML标签中
- [HTML] CSS Id 和 Class选择器
- CSS定位