<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
        input{

font-size:120%;                    /**字体大小**/
                color:#5a5854;                     /**字体颜色**/
                background-color:#f2f2f2;     /**所有项目默认背景颜色**/
                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;          /** 外边距下面10像素 **/

} 
        input:focus,input:hover{                       /** 鼠标悬停时的样式 **/
                                             background-color:#ffffff;           /**动作发生之后的背景颜色 焦点 悬停**/
                                             border:1px solid #blele4;           /** 边框样式 **/

}
        input#email{background-image:url("email.png");}         /** 针对不同的对象设置不同的图片 **/
        input#twitter{background-image:url("twitter");}
        input#web{background-image:url("web.png");}

</style>
</head>
<body>
      <form>
      <input type="text" id="email"/> <!--输入,以文本格式,ID选择器里的样式-->
      <input type="text" id="twitter"/>
      <input type="text" id="web"/>

</form>
</body>
</html>

作业注释 CSS表单1 输入框前有图片的更多相关文章

  1. CSS 表单

    输入框前有图片 老板让你实现在输入框前有图片的功能.老板觉得用图片代替文字更有说服力. 要实现这样的功能很简单,它的原理是将图片放在内边距内. 代码 1 2 3 4 5 6 7 8 9 10 11 1 ...

  2. CSS表单设计

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

  3. ionic-CSS：ionic 表单和输入框

    ylbtech-ionic-CSS:ionic 表单和输入框 1.返回顶部 1. ionic 表单和输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本 ...

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

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

  5. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

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

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

  7. 清除表单input输入框内数据

    清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...

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

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

  9. 如何disabled禁用所有表单input输入框元素

    转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...

随机推荐

  1. [转]C++11 左值、右值、右值引用详解

    https://blog.csdn.net/hyman_yx/article/details/52044632 左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡 ...

  2. Linux装agent

    解压Linux.zip  Linux的负载机链接:https://pan.baidu.com/s/1yrmsT3PYfuL9Wlh4FEYxaA 密码:s72n unzip Linux.zip chm ...

  3. Flex布局-容器的属性

    本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...

  4. ios-屏幕适配(代码)

    由于第一个项目中98%的界面都用到UITableView,所以适配仅判断此.知道手工敲代码的繁复,遂传一部分,如果有更优的方法,欢迎提出. 如下图,图中提到的宏定义是在prefix.pch预编绎文件里 ...

  5. Vue创建头部组件示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  6. Python3 Flask+nginx+Gunicorn部署（上）

    前言:一般在本地运行flask项目通常是直接python3 文件名.py,然后打开:http://127.0.0.1:5000 查看代码结果 这次主要是记录flask在python3 环境结合ngin ...

  7. Announcing the Operate Preview Release: Monitoring and Managing Cross-Microservice Workflows

    转自:https://zeebe.io/blog/2019/04/announcing-operate-visibility-and-problem-solving/   Written by Mik ...

  8. 十六、springcloud(二)Eureka集群

    1.创建子工程spring-cloud-peer(jar) 2.创建application-peer1.properties,application-peer2.properties applicat ...

  9. 关于Xilinx AXI Lite 源代码分析---自建带AXI接口的IP

    关于Xilinx AXI Lite 源代码分析---自建带AXI接口的IP 首先需要注意此处寄存器数量的配置,它决定了slv_reg的个数. 读写数据,即是对寄存器slv_reg进行操作: 关于AXI ...

  10. multiprocessing还是threading？

    今夜看了一篇分析python中多进程与多线程优劣的文章,文章通过几组性能测试强调了多进程的性能优势,同时也深入分析了为何python中多线程性能较差的原因,GIL就是解释器全局锁,该机制限制每个pyt ...