前言

接触过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. jQuery 判断多个 input checkbox 中至少有一个勾选

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

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

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

  3. 在C#中调用另一个应用程序或命令行(.exe 带参数)&lt;zz&gt;

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

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

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

  5. 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] 之外的 ...

  6. css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

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

  7. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  9. mvc中动态给一个Model类的属性设置验证

    原文:mvc中动态给一个Model类的属性设置验证 在mvc中有自带的验证机制,比如如果某个字段的类型是数字或者日期,那么用户在输入汉字或者英文字符时,那么编译器会自动验证并提示用户格式不正确,不过这 ...

随机推荐

  1. 【JAVA并发编程实战】3、同步容器

    同步容器包括Vector和Hashtable,还有一些由Collections.synchronizedXxx等工厂方法创建的 1.同步容器类的问题 同步容器类都是线程安全的,但是有些时候还是要客户端 ...

  2. 揭秘JavaScript中谜一样的this

      揭秘JavaScript中谜一样的this 在这篇文章里我想阐明JavaScript中的this,希望对你理解this的工作机制有一些帮助.作为JavaScript程序员学习this对于你的发展有 ...

  3. 【代码笔记】iOS-饼图

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @class QuizChartView; @interf ...

  4. UIScrollView增加刷新

    1. if (!self.scrollView) { CGRect frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.frame), CGRe ...

  5. Codeforces Round #354 (Div. 2)-A

    A. Nicholas and Permutation 题目链接:http://codeforces.com/contest/676/problem/A Nicholas has an array a ...

  6. selenium获取html的表格单元格数据

    获取网页的表格的某个单元格的值,思路: 1.获取表格 2.获取表格的所有行 3.根据某一行获取该行的所有列 4.根据某一列获得该行该列的单元格值 根据以上思路,可以知道,只需要行.列就可以得到单元格的 ...

  7. Memcached 笔记与总结(4)memcache 扩展的使用

    在 wamp 环境下进行测试:WAMPSERVER 2.2(Windows 7 + Apache 2.2.21 + PHP 5.3.10 + memcache 3.0.8 + Memcached 1. ...

  8. Linux同步机制 - 多线程开发总结

    1 对于CPU开销大的场景,能利用多核,就尽量利用多核(常常自以为某需求的运算量不大,且CPU足够快,就偷懒写个单线程,结果效率很低) 2 使用多线程的时候,默认是加锁的.在加锁保证业务正常的条件下, ...

  9. hdoj 4324 Triangle LOVE【拓扑排序判断是否存在环】

    Triangle LOVE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  10. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...