CSS 表单
输入框前有图片
老板让你实现在输入框前有图片的功能。老板觉得用图片代替文字更有说服力。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
要实现这样的功能很简单，它的原理是将图片放在内边距内。
代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> < html > < head > < title >表单输入组件样式</ title > < style type = "text/css" > input { font-size: 120%; color: #5a5854; border: 1px solid #bdbdbd; border-radius: 5px; padding: 5px 5px 5px 30px; background-repeat: no-repeat; background-position: 8px 9px; display: block; margin-bottom: 10px;} input:focus, input:hover { border: 1px solid #b1e1e4;} input#email { background-image: url("email.png");} input#twitter { background-image: url("twitter.png");} input#web { background-image: url("web.png");} </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < form > < input type = "text" id = "email" /> < input type = "text" id = "twitter" /> < input type = "text" id = "web" /> </ form > </ body > </ html > |
源码下载
表单组件排版
未经美化的HTML表单通常是这个鬼样子。
这样的效果自然不好看，下面的代码对表单进行美化。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> < html > < head > < title >单选按钮对齐</ title > < style type = "text/css" > div { margin: 10px; padding-bottom: 10px; max-width:360px; } .title { float: left; width: 100px; text-align: right; padding-right: 10px;} .submit { text-align: right;} </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < form method = "post" > < div > < label for = "name" class = "title" >用户名:</ label > < input type = "text" id = "name" name = "name" /> </ div > < div > < label for = "password" class = "title" >密码:</ label > < input type = "password" id = "password" name = "password" /> </ div > < div > < span class = "title" >性别:</ span > < input type = "radio" name = "gender" id = "male" value = "M" /> < label for = "male" >男</ label > < input type = "radio" name = "gender" id = "female" value = "F" /> < label for = "female" >女</ label >< br /> </ div > < div class = "submit" > < input type = "submit" value = "提交" id = "submit" /> </ div > </ form > </ body > </ html > |
关键技术：
1、对每一行（标签和输入框组件）限制长度 max-width:360px;
2、对【性别】进行左边浮动，它的文本进行右对齐。
光标样式
cursor 属性有不同的值，这些值让光标显示不同的形状。
常见的形状有：
| 属性值 | 说明 |
| default | 默认光标，通常是一个箭头 |
| auto | 浏览器自动识别的光标 |
| crosshair | 十字线 |
| pointer | 手型指针 |
| move | 移动指针 |
| text | 文本指针 |
| wait | 指示程序正忙 |
| col-resize | 双向移动 |
| help | 帮助指针 |
示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> < html > < head > < title >单选按钮对齐</ title > < style type = "text/css" > a{display:block} a.aut{cursor:auto} a.crosshair{cursor:crosshair} a.default{cursor:default} a.pointer{cursor:pointer} a.move{cursor:move} a.text{cursor:text} a.wait{cursor:wait} a.help{cursor:help} </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < a class = "auto" >auto</ a > < a class = "crosshair" >crosshair</ a > < a class = "default" >default</ a > < a class = "pointer" >pointer</ a > < a class = "move" >move</ a > < a class = "text" >text</ a > < a class = "wait" >wait</ a > < a class = "help" >help</ a > </ body > </ html > |
更多精彩
