输入框前有图片
老板让你实现在输入框前有图片的功能。老板觉得用图片代替文字更有说服力。
要实现这样的功能很简单，它的原理是将图片放在内边距内。
代码
|
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> <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-360px; } .title { float: left; 100px; text-align: right; padding-right: 10px;} .submit { text-align: right;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <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-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> <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> |