输入框前有图片

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

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

代码

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. 【转载】 Deepmind星际争霸2平台使用第一轮-完成采矿

    原文地址: https://blog.csdn.net/woaipichuli/article/details/78645999 ----------------------------------- ...

  2. 深入理解Java中停止线程

    一.停止线程会带来什么? 对于单线程中,停止单线程就是直接使用关键字return或者break,但是在停止多线程时是让线程在完成任务前去开启另外一条线程,必须放弃当前任务,而这个过程是不可预测,所以必 ...

  3. cocos2dx开发之util类&方法——取范围随机数

    #include <random> int random(int start, int end) { //return start+rand()%(end-start+1); static ...

  4. Centos6.5搭建Elasticsearch

    ElasticSearch是基于Lucene的搜索服务.支持分布式多用户能力的全文搜索引擎,提供RESTful web接口.Elasticsearch是用Java开发的,Apache旗下开源项目,支持 ...

  5. 记一次Chrome冒充QQ浏览器领取奖励之行

      DNF游戏十周年活动,但是看到活动页面竟然是QQ浏览器专属活动,可是对于QQ浏览器,我内心是拒绝的,所以本着能不下载就不下载的原则,当然是选择放弃它了..... 开玩笑,看到这一活动,虽然奖励不高 ...

  6. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  7. 关于C++指针

    C++继承于C,对C的语法做了一些扩展.C语言中的指针占一个机器长度(32位处理器上一个指针占32位,64位处理器上安装64位操作系统一个指针占64位),指针的作用就是使用这块内存(4字节或者8字节) ...

  8. 菜鸟Vue学习笔记（二）

    上一篇文章跟大家分享了Vue笔记上半部分,这篇文章接着跟大家分享.最近学习Vue越来越顺利了,今天接着学习,接着记录. 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中定义的变量的 ...

  9. Pyspider框架

    1, 2,在ubuntu安装pyspider如果出现pycul的问题 首先执行命令:sudo apt-get install libssl-dev libcurl4-openssl-dev pytho ...

  10. PUSU 拆分后发货和开票的时间节点问题

    项目做到现在业务突然说流程要变,心中顿时无数个草草草掠过.这公司业务也真是够奇葩了,一天一个样.原来流程是由PU把产品生产完后就发给SU,由SU再来决定什么时候对客户和开票.而现在马上要上线了,突然冒 ...