<a href="http://s3.51cto.com/wyfs02/M01/76/27/wKiom1ZL6MuC-igDAABSMt1yGQk653.png" target="_blank"></a>
例子1：
要做成上面的效果：背景的***、红色、白色都是图片。背景图片如下：
<a href="http://s2.51cto.com/wyfs02/M01/76/24/wKioL1ZL6UPC_nWlAAAMP8GZ9_s977.png" target="_blank"></a>
代码如下：
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>
<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code> <code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html;charset=UTF-8"</code> <code>/></code>
<code> </code><code><</code><code>title</code><code>></</code><code>title</code><code>></code>
<code> </code><code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>
<code> </code><code>body{</code>
<code> </code><code>margin:0px;</code>
<code> </code><code>padding:0px;</code>
<code> </code><code>}</code>
<code> </code><code>#menu{</code>
<code> </code><code>width:500px;</code>
<code> </code><code>height:28px;</code>
<code> </code><code>border-bottom:3px solid #e10001;</code>
<code> </code><code>/*margin-left:auto;</code>
<code> </code><code>margin-right:auto;*/</code>
<code> </code><code>margin:0 auto;</code>
<code> </code><code>margin-top:10px;</code>
<code> </code><code>padding-bottom:1px;</code>
<code> </code><code>#menu ul{</code>
<code> </code><code>list-style-type:none;</code>
<code> </code><code>padding-left:0px;</code>
<code> </code><code>margin-top:0px;</code>
<code> </code><code>#menu ul li{</code>
<code> </code><code>width:87px;</code>
<code> </code><code>float:left;</code>
<code> </code><code>line-height:28px;</code>
<code> </code><code>text-align:center;</code>
<code> </code><code>margin-left:2px;</code>
<code> </code><code>#menu ul li a{</code>
<code> </code><code>display:block;</code>
<code> </code><code>text-decoration:none;</code>
<code> </code><code>background:url(bg.png) 0 -28px no-repeat;</code>
<code> </code><code>color:#000;</code>
<code> </code><code>font-size:14px;</code>
<code> </code><code>#menu ul li a:hover{</code>
<code> </code><code>background:url(bg.png) 0 -56px no-repeat;</code>
<code> </code><code>color:#f00;</code>
<code> </code><code>#menu ul li #current{</code>
<code> </code><code>background:url(bg.png) 0 0 no-repeat;</code>
<code> </code><code>font-weight:bold;</code>
<code> </code><code>color:#fff;</code>
<code> </code><code></</code><code>style</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"menu"</code><code>></code>
<code> </code><code><</code><code>ul</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>Sohu</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>Sina</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>Baidu</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>id</code><code>=</code><code>"current"</code><code>>Google</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>>Alibaba</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
例子2：做成下面的效果,一段文字前面有小图标，鼠标放上变成“√”
<a href="http://s3.51cto.com/wyfs02/M01/76/27/wKiom1ZL6YbyaET7AAAUKC3vyDY962.jpg" target="_blank"></a>
<a href="http://s5.51cto.com/wyfs02/M00/76/24/wKioL1ZL6dnR1SKXAAAUMAq76hI486.jpg" target="_blank"></a>
代码：图片如下
<a href="http://s1.51cto.com/wyfs02/M02/76/24/wKioL1ZL6mnRQJgMAAAB-HwsXN0559.png" target="_blank"></a>
<a href="http://s1.51cto.com/wyfs02/M02/76/27/wKiom1ZL6heSEEmiAAACpz7Z5_E751.png" target="_blank"></a>
<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>></code>
<code> </code><code>a{</code>
<code> </code><code>background:url(img/mail2.png) left center no-repeat;</code>
<code> </code><code>padding-left:20px;</code>
<code> </code><code>a:hover{</code>
<code> </code><code>background-image:url(img/yes.png);</code>
<code> </code><code>/*虽然没有设置像素值，但是依然有效！</code>
<code> </code><code>因为a:hover继承了a的前面设置的值！*/</code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"http://www.baidu.com.com"</code><code>>一封信</</code><code>a</code><code>></code>
例子3：对form的一些操作，如text框(圆角)，password（右面有一个对勾） ，以及button按钮(鼠标放上换图片)
<a href="http://s3.51cto.com/wyfs02/M01/76/24/wKioL1ZL7B7iJinBAADYHAhGV-0267.jpg" target="_blank"></a>
<a href="http://s1.51cto.com/wyfs02/M02/76/25/wKioL1ZL7CuCzOKRAACu0g27mFw808.jpg" target="_blank"></a>
图片：
<a href="http://s2.51cto.com/wyfs02/M02/76/27/wKiom1ZL7FKR0fRHAAALYnlUnW0719.png" target="_blank"></a>
<a href="http://s5.51cto.com/wyfs02/M01/76/25/wKioL1ZL7KXQffz6AAALgRcSl9I382.png" target="_blank"></a>
<a href="http://s5.51cto.com/wyfs02/M00/76/27/wKiom1ZL7FPRrmdZAAACpz7Z5_E960.png" target="_blank"></a>
代码：
<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code> <code>xml:lang</code><code>=</code><code>"en"</code><code>></code>
<code> </code><code>/*css3的写法*/</code>
<code> </code><code>input[type="text"]{</code>
<code> </code><code>width:300px;</code>
<code> </code><code>height:30px;</code>
<code> </code><code>font-size:24px;</code>
<code> </code><code>color:#ff7400;</code>
<code> </code><code>border:1px solid #ccc;</code>
<code> </code><code>border-radius:15px; /*圆角*/</code>
<code> </code><code>padding:0px 15px; /*内容距离左右15px*/</code>
<code> </code><code>input[type="password"] {</code>
<code> </code><code>background:url(img/yes.png) no-repeat right center;</code>
<code> </code><code>/*right center 也可以用像素值*/</code>
<code> </code>
<code> </code><code>padding-right:20px;</code>
<code> </code><code>input[type="button"] {</code>
<code> </code><code>width:122px;</code>
<code> </code><code>height:42px;</code>
<code> </code><code>background:url(img/button.png) no-repeat;/*给按钮加个图片*/</code>
<code> </code><code>border:none; /*去掉按钮的外框*/</code>
<code> </code><code>cursor:pointer;</code>
<code> </code><code>input[type="button"]:hover{</code>
<code> </code><code>background-image:url(img/button2.png);</code>
<code> </code>
<code> </code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>""</code> <code>id</code><code>=</code><code>""</code> <code>/></code>
<code> </code><code><</code><code>br</code><code>/></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"password"</code> <code>name</code><code>=</code><code>""</code> <code>id</code><code>=</code><code>""</code> <code>/></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>""</code> <code>/></code>
本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/1713925，如需转载请自行联系原作者
![Web前端就业前景好不好 怎么迅速在行业立足[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)