输入框前有图片

老板让你实现在输入框前有图片的功能。老板觉得用图片代替文字更有说服力。

要实现这样的功能很简单，它的原理是将图片放在内边距内。

代码

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>

CSS 表单的更多相关文章

  1. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  2. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  3. Web标准：九、CSS表单设计

    Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验   1)改变文本框和文本域样式 文本框标签:<i ...

  4. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  5. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  6. 什么是CSS 表单？

    ㈠输入框(input) 样式 ⑴使用 width 属性来设置输入框的宽度   示例:css部分:input { width: 100%; }                html部分:<for ...

  7. CSS表单与数据表（下）

    2.表单 表单是用户输入内容的地方.表单涉及的控件很多,而且一直很难给它们应用样式.无法控制样式的部分,可以通过自定义控件来解决. 2.1 简单的表单 2.1.1 fieldset与legend fi ...

  8. CSS表单与数据表（上）

    表单在现代Web应用中占据着重要地位. 表单可以很简单,也可以非常复杂,要横跨几个页面. 除了从用户哪里获得数据,Web应用还需要以容易看懂的方式展示数据.表格是展示复杂数据的最佳方式. 1.设计数据 ...

  9. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

随机推荐

  1. 安装jdk1.8

    这是很普通的shell的脚本,只需要注意:echo 语句内出现的变量,需要转义! #!/bin/bash function get_current_time_stamp(){ echo `date & ...

  2. 选择器（ID选择器）

    ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...

  3. Nmap版本检测

    -sV (版本检测) 打开版本检测.同时可以使用-A打开系统探测和版本探测. --allports(不为版本探测排除任何端口) 默认情况下,Nmap版本探测会跳过9100 TCP端口,也可以不理会任何 ...

  4. 什么是pytorch（2Autograd:自动求导）(翻译)

    Autograd: 自动求导 pyTorch里神经网络能够训练就是靠autograd包.我们来看下这个包,然后我们使用它来训练我们的第一个神经网络. autograd 包提供了对张量的所有运算自动求导 ...

  5. zombodb 数据类型映射

    zombodb 与es 数据类型的映射处理 通用数据类型映射 Postgres 类型 Elasticsearch JSON 映射定义 bytea {"type": "bi ...

  6. 在 delphiXE 10.2 上安装 FR5.4.6

    今天在虚拟机里成功安装了delphiXE 10.2, 然后想把常用的FR也装上,本想偷个懒,在网上找个装上就得了,结果发现必须要在发布的网站注册才能下载⊙︿⊙ 如此麻烦,心里这个不爽啊不爽! 然后自己 ...

  7. [转]马上2018年了，该不该下定决心转型AI呢

    转自:http://blog.csdn.net/eNohtZvQiJxo00aTz3y8/article/details/78941013 2017年,AI再一次迈向风口,但我们如何判断未来走向?应不 ...

  8. mysql 计算两点经纬度之间的距离含具体sql语句

    mysql距离计算,单位m,以及排序 lon 经度 lat 纬度 一般地图上显示的坐标顺序为,纬度在前(范围-90~90),经度在后(范围-180~180) 首先新建一张表,里面包含经纬度 SET F ...

  9. Python中Lambda表达式使用

    软件环境 Python: 2.7.13; win10 Lambda描述 python 使用 lambda 表达式来创建匿名函数 lambda只是一个表达式,函数体比def简单很多 lambda的主体是 ...

  10. PP.io的三个阶段，“强中心”——“弱中心”——“去中心”

    什么是PP.io? PP.io是我和Bill发起的存储项目,目的在于为开发者提供一个去中心化的存储和分发平台,能做到更便宜,更高速,更隐私. 当然做去中心化存储的项目也有好几个,FileCoin,Si ...