输入框前有图片

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

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

代码

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. UVa699

    这个建树的根选的很有意思,在中间作为树的根.所以二叉树建树的方法虽然一般是有两种数组的方法,一个是如果深度不太大的话,可以之间用2*k+1,2*k建树,如果很大的话,就挨着建树,弄一个结构体,有左右子 ...

  2. SpringCloud分布式配置中心所遇问题

    1.如果更换了获取配置文件的名称一定要在客户端配置文件的name更改2.不建议服务器设置下拉到git仓库的配置文件地址,可能导致更换地址之后无法获取到新更改的

  3. oracle database 11g 如何正确卸载

    如在使用过程中,遇到oracle database 的疑难问题,需要重装的时候,就需要我们先将老的oracle 做完全的卸载删除,这样才能安装新的oracle database. 下面看一下具体的卸载 ...

  4. c#泛型TryParse类型转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  5. prettier-eslint 与 prettier-eslint-cli 区别

    prettier-eslint 与 prettier-eslint-cli 区别: prettier-eslint 只能处理字符串 prettier-eslint-cli 能处理一个或多个文件 默认情 ...

  6. c# 仿微信二维码生成

    /// <summary> /// 生成二维码. /// </summary> /// <param name="data">需要添加进去的文本 ...

  7. django操作数据库 ORM

    一,数据库连接 创建类 a. 在models.py中先写类 from django.db import models # 表名是app01_userinfo class UserInfo(models ...

  8. 【python】 del 的用法

    转自 https://blog.csdn.net/love1code/article/details/47276683 python中的del用法比较特殊,新手学习往往产生误解,弄清del的用法,可以 ...

  9. Pymysql部分

    安装: 1 执行SQL import pymysql # 创建连接 conn = pymysql.connect(host='172.30.2.233', port=3306, user='root' ...

  10. hash 在 perl 中的用法（转载）

    Perl的数据结构中最有趣的一个特性是哈希(hash),它使得在数据片段之间建立键-值(key-value)关联成为可能.虽然这些哈希要远远比普通系统中以数字索引的数组用途更广,但是往往也会使初学者不 ...