前言

接触过EasyUI的朋友都知道其警告框就是左边有个三角警告图标，此文所做的效果正是这样。此外，还将示例多行的做法。

一、在input左边加上一个图标（一行）

注：left center定义了图标的位置；transparent定义了背景颜色为透明（ background-color的默认值）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css" >

.phone-input{

padding-right:20px;

background:url("http://files.cnblogs.com/files/wql025/warning.gif") no-repeat scroll left center transparent;

}

</style>

</head>

<body>

<input class='phone-input' value="aaa" type="text" id="phone"/> 

</body>

</html>

效果

.phone-input{

padding-right:20px;

background:url("http://files.cnblogs.com/files/wql025/warning.gif") no-repeat scroll left center transparent;

}

二、在pre中左上角加上一个图标（多行）

注：图标的位置可由英文单词与百分比自由组合，如：0.2% top，前者指水平偏移；后者指垂直偏移；padding: 5px 10px 5px 45px;的第4个值指定了文本与图标的左间距为45px。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

pre {

    /*保留空白符序列，正常地进行换行。*/

    white-space: pre-wrap; /* css-3 */

    white-space: -moz-pre-wrap!important;/* Mozilla, since 1999 *//*最高优先级*/

    white-space: -pre-wrap;/* Opera 4-6 */

    white-space: -o-pre-wrap; /* Opera 7 */

    word-wrap: break-word; /*允许长单词或 URL 地址换行到下一行*/

    background: url("http://files.cnblogs.com/files/wql025/warning.gif") no-repeat scroll left top rgba(232, 229, 221, 0.56);/*scroll: 背景图像会随着页面其余部分的滚动而移动。left top: 左上角*/

    border-radius: 6px 6px 6px 6px;/*设置四个 border-*-radius 属性*/

    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);/*添加边框阴影*/

    color: #333;/*字体颜色*/

    font-family: "微软雅黑","宋体","黑体",Arial;

    font-size: 15px;

    /* padding-left: 99px; */

    /* font-weight: bold; */

    /* height: 65px; */

    line-height: 25px;/*行高--针对于行级*/

    margin: 15px 10px !important;/*上下和右左*//*最高优先级*/

    padding: 5px 10px 5px 45px;/*上右下左*/

    padding-left: 45px;

    /* padding-right: 45px; */

    margin-right: 55px;

    /* text-shadow: 2px 2px 3px rgb(34, 34, 34); *//*文本设置阴影*/

    /* width: 98%; */

}

</style>

</head>

<pre>pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。pre标签，左上角有个图标。</pre>

<body>

</body>

</html>

效果

CSS：在input、pre中左边加上一个图标（一行和多行）的更多相关文章

  1. 在input中右边加上一个图标的css样式

    https://blog.csdn.net/ffggnfgf/article/details/43384527

  2. jQuery 判断多个 input checkbox 中至少有一个勾选

    html ( 使用 TP 标签 ) : <volist name="health_tag" id="htag"> <input type=&q ...

  3. jQuery 判断表单中多个 input text 中至少有一个不为空

    html: 名称1:<input class="seasoning_name" type="text" name="seasoning_name ...

  4. 在C#中调用另一个应用程序或命令行(.exe 带参数)<zz>

    在.net中使用system.diaglostics.Process可以用来调用另一个命令行或程序. using   System.Diagnostics;     如果是dos     Proces ...

  5. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  6. java—数组乘积输入： 一个长度为n的整数数组input 输出： 一个长度为n的数组result，满足result[i] = input数组中，除了input[i] 之外的所有数的乘积，不用考虑溢出例如 input {2, 3, 4, 5} output: {60, 40, 30, 24}

    /** * 小米关于小米笔试题 数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = * input数组中,除了input[i] 之外的 ...

  7. HTML中使用<input>添加的按钮打开一个链接

    在HTML中,<form>表单的<input type="button">可以添加一个按钮.如果想让该按钮实现<a> 的超链接功能,需要如下实现 ...

  8. svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)

    svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...

  9. css系列（布局）：实现一个元素在浏览器中水平、垂直居中的几个方案

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

随机推荐

  1. Java之ConnectionPool连接池

    1.初始化(根据配置信息进行初始化)2.产生一个新的数据库连接3.有存储已经使用的连接集合,空闲连接集合4.提供给外部调用获取连接的方法5.提供给外部释放连接(不是关闭连接,而是将连接闲置)6.销毁连 ...

  2. asp双表查询

    sql="select sum(***) as ** from ** as a,** as b where a.id=b.id" Rs(A.id) Rs(B.id) [提示.双表中 ...

  3. 《iOS开发指南》正式出版-源码-样章-目录，欢迎大家提出宝贵意见

    智捷iOS课堂-关东升老师最新作品:<iOS开发指南-从0基础到AppStore上线>正式出版了 iOS架构设计.iOS性能优化.iOS测试驱动.iOS调试.iOS团队协作版本控制.... ...

  4. [javascript｜基本概念｜Number]学习笔记

    Number类型的值:整数/浮点数值 整数 十进制  e.g.: var intNum = 50; 八进制  (严格模式下无效,解析错误)字面值首位必须是0,之后的数字序列为0-7  e.g.: va ...

  5. ThinkPHP中的视图二

    ThinkPHP中的视图 1.模板注释 在实际项目开发中,经常要使用注释功能,如果是ThinkPHP框架,则可以在模板文件中使用如下方式进行注释: {// 注释内容 } :单行注释 {/* 注释内容 ...

  6. Ant打jar包指定MainClass

    一般用ant打jar的时候不用指定程序的入口!这个jar一般是给其他app引用的. 但是如果该jar就是程序的启动jar.例如: java -jar abc.jar  这个时候需要指定jar的入口类! ...

  7. Silverlight引用WebService时取消对ServiceReferences.ClientConfig文件的依赖

    做过Silverlight项目的朋友都知道一般来说我们在Silverlight项目中都需要引用WebService或是WCF,引用的方式是在Visual Studio窗口中通过“添加服务引用”来添加引 ...

  8. python——异常处理

    python处理异常的格式一般如下: try: A部分 Except  .... [as ..]: B部分 [ finally: C部分 Else: D部分 ] ps: 1.不管有没有异常,final ...

  9. zedboard 驱动理解

    1 驱动程序的编写   驱动是LINUX开发的必经之路,应用层对底层的调用经过了库与内核,内核下面才是驱动层,当你在应用程序执行对底层的控制时,驱动程序为你的控制提供了接口,或者说是策略. #incl ...

  10. git 合并本地代码到分支

    本地代码合并到dev分支 在local分支提交git add .git commit -m "playbuy" 切换到dev分支git checkout devgit pull合并 ...