输入框前有图片

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

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

代码

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. ubuntu pip install MySQL-python mysql_config not found

    在安装 mysql-python时,会出现: sh: mysql_config: not found Traceback (most recent call last):   File "s ...

  2. webpack的入门教程

    webpack是模块打包工具/前端资源加载.它是根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. webpack可以将css.less.js转换为一个静态文件,减少了页 ...

  3. 五分钟带你走入MP

    一.MyBatis-Plus简介 1.1MyBatis-Plus是什么? MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化 ...

  4. python------Socket网略编程+动态导入模块

    上节课程回顾: 静态变量:与类无关,不能访问类里的任何属性和方法. 类方法:只能访问类变量. 属性:把一个方法变成静态属性, 反射: __new__:先于__init__执行: __call__: c ...

  5. Linux进程调度与抢占

    一.linux内核抢占介绍 1.抢占发生的必要条件 a.preempt_count抢占计数必须为0,不为0说明其它地方调用了禁止抢占的函数,比如spin_lock系列函数.b.中断必须是使能的状态,因 ...

  6. [zz]LyX 入门教程

    http://blog.sina.com.cn/s/blog_630e5dec0100w3jl.html The LyX Tutorial by the LyX Team 1 目录 Chapter 1 ...

  7. Can't parse message of type "gazebo.msgs.Packet" because it is missing required fields: stamp, type

    在gazebo的仿真环境中,采用强化学习HER算法训练baxter执行reach.slide和pick and place任务. 运行HER算法,此时尚未启动gazebo仿真环境,出现如下报错: [l ...

  8. 算法实践--最长公共子序列(Longest Common Subsquence)

    什么是最长公共子序列 X=ACCG Y=CCAGCA 长度为1的公共子序列: {A} {C} {G} 长度为2的公共子序列:{AC} {CC} {CG} {AG} 长度为3的公共子序列:{ACG} 长 ...

  9. C++Primer第五版——习题答案详解（十一）

    习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第12章 动态内存 练习12.1 b1包含4个元素,b2被销毁 练习12.2 #incl ...

  10. [UE4]Named Slot

    用户创建的UI成为其他UI的子控件的时候,默认情况下是不能拥有子控件的,给UI添加一个Named Slot,这个UI就可以拥有子控件 一.创建一个名为testNameSlot的UI,添加3个Named ...