搜索栏图标:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> input { 270px; height:28px; background: url('serch.jpg') no-repeat right center; } </style> </head> <body> <input type="text" name="name" value="" placeholder="请输入..." /> </body> </html>
效果:
视频列表图标:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> li{ list-style:none; text-indent:2em; background:url('li.gif') no-repeat left center; } </style> </head> <body> <ul> <li><a href="#">哈哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈哈</a></li> </ul> </body> </html>
效果:
购物车图标:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a{ display:inline-block; 67px; height:32px; background:url('110.png'); } a:hover { background: url('110.png') bottom; } </style> </head> <body> <a href="#"></a> </body> </html>
素材:
效果:
在点击购物车图标后背景图片会立马切换到登陆: