你可以 切一个灰色背景（不含文字eg：product1）和绿色背景（不含文字eg：product1）
如图
我简单的写了下 效果如图
代码如下
html代码：
<ul id="product">
<li><a href="#">product1</a></li>
<li><a href="#">product2</a></li>
<li><a href="#">product3</a></li>
<li><a href="#">product4</a></li>
</ul>
css样式：
#product{ width:253px margin:0 auto margin-top:200px}
#product li a{ display:block background:url(../images/a.gif) no-repeat width:253px height:30px line-height:30px text-indent:100px margin:5px 0 color:#333 text-decoration:none}
#product a:hover{background:url(../images/hover.gif) no-repeat color:#FFF}
是的，做前端必须必须会切图，但是 切图 就是PS里面的一步操作，十分简单。QQ截图和PS切图是动作不一样，但是基本上是一样的，QQ是截取，而PS里面有个工具张的像 刀 ，拿着这个刀在图上面画，所以叫切图。
你选择这个工具，选择切片工具，然后：
在图片上这么画上一块儿或者说切上一刀，就叫切图。
然后在选择 文件→储存为web所用格式→在用切图选择工具
把你需要保存的切图那块儿选中，点击存储，
选择选中的切片，在点击保存，就这么先切，在选择，在保存，就完成了切图，但是PS切图比qq截图用着爽多了，因为在PS里面可以将图片放大N倍，在切，在小的图也能切，而且可以一次切很多，也能一次保存很多，所以比QQ截图用着爽。总体来讲比QQ截图专业吧。
页面中有些是由大大小小的很多图片拼成的。这样的拼图要用到的z-index,浏览器兼容的时候要考虑到FF和IE的margin-left。
eg：（z-index的设置，IE与FF也有区别，div3同div2的时候，IE678测试都可以通过，FF则不行。）
.mainFrame {width:950pxmargin:0px autopadding:0px}
.div1 { float:leftz-index:1display:inline}
.div2 { float:leftz-index:2display:inlinemargin-top:-183px}
.div3 { float:leftz-index:3display:inlinemargin-top:-183pxmargin-left:193px*margin-left:0px}
<div class="mainFrame">
<a href="welcome.html" class="div1">
<img src="../images/1/1.gif" />
</a>
<div class="div1">
<a href="welcome.html"><img src="../images/1/2.gif" /></a>
</div>
<div class="div1">
<a href="#"><img src="../images/1/3.gif" /></a>
</div>
<div class="div1">
<a href="#"><img src="../images/1/4.gif" /></a>
</div>
<div class="div1">
<a href="#"><img src="../images/1/7.gif" /></a>
</div>
<div class="div2">
<a href="#"><img src="../images/1/5.gif" /></a>
</div>
<div class="div3">
<a href="#"><img src="../images/1/6.gif" /></a>
</div>
</div>
