前言
接觸過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>
效果
