输入框前有图片

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

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

代码

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. 【转载】 强化学习（九）Deep Q-Learning进阶之Nature DQN

    原文地址: https://www.cnblogs.com/pinard/p/9756075.html ------------------------------------------------ ...

  2. latex之矩阵表示

    $ \begin{matrix} 1 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1 \end{matrix}\quad \begin{ ...

  3. s21day12 python笔记

    s21day12 python笔记 一.函数中高级 1.1 函数可以做返回值 #示例: def func(): print(123) def bar(): return func v = bar() ...

  4. Python之小练习

    1.1 2 3 4 5 6 7 8能组成多少个不同的两位数? count = 0for i in range(1,9): for V in range(1,9): if i != V: count+= ...

  5. Java第一次作业——Java语言基础

    <Java技术>第一次作业 学习总结 1.Scanner类实现基本数据输入方法 Scanner input=new Scanner(System.in); int num = input. ...

  6. 关于动态内存malloc和realloc

    1.malloc   1.申请的内存长度可以运行时决定,单位是字节  2.申请的内存为连续的内存空间  3.返回的地址可以根据实际需要强转成对应的类型  4.动态申请内存的生命周期是整个程序,除非手动 ...

  7. lvs UDP端口负载均衡配置

    ! Configuration File for keepalived global_defs { notification_email { test@163.com } notification_e ...

  8. 解决centos 7.5安装openvpn，mirrors.163.com提示没有可用软件包openvpn、easy-rsa问题

    提示: yum install openvpn 已加载插件:fastestmirror Loading mirror speeds from cached hostfile * base: mirro ...

  9. signapk

    signapk工具可以实现对安卓ROM和安卓应用进行签名.在安卓DIY与安卓ROM制作中作用是非常大的.可以使用其对经过自己DIY修改美化后的应用进行签名或对制作好的安卓ROM卡刷包进行签名.让我们做 ...

  10. 2013-7-30 802.1X企业级加密

    今天做了U9510的企业级加密标杆测试,写了企业级加密标杆设备的操作指南.最后做到server 2003却出了问题,peap能关联,但是TLS怎么都关联不上.用adb shell查看logcat日志, ...