1、首先我们用<ul><li>标签写一个图片列表，并分别命名<li>标签为：pic1，pic2，pic3<div class="picbox"> <ul> <li class="pic1"><a href="#"> </a></li> <li class="pic2"><a href="#"> </a></li> <li class="pic3"><a href="#"> </a></li> </ul></div>
2、接下来，我们给picbox添加css样式，使毋队末哎它横排显示，我们先清除<ul><li>稆糨孝汶;标签的默认样式和浏览器默认的margin和padding值，然后在用css进行样式美化。*{ margin:0;padding:0;}ul,li{ list-style:none;}.picbox ul li{ float:left; margin-left:20px; margin-top:20px;}.picbox ul li a{ width:200px; height:200px; display:block; padding:1px; border:1px solid #ccc;}.pic1 a{ background:url(img1.jpg) no-repeat center;}.pic2 a{ background:url(img2.jpg) no-repeat center;}.pic3 a{ background:url(img3.jpg) no-repeat center;}我们用浏览器打开预览一下效果。
3、我们给pic1添加鼠标滑动后，图片边框加粗变红效果（效果一）：.pic1 a:hover{ border:2px solid #f00; padding:0px;}刷新浏览器预览效果
4、我们给pic2添加鼠标滑动后，图片背景去色效果（效果二）：首先我们用ps打开pic2的背景图片，选择 图像——调整——去色 将图片去色变为黑白色以备用。然后我们添加滑动样式：.pic2 a:hover{ background:url(img4.jpg) no-repeat center;}刷新浏览器预览效果
5、我们给pic3添加鼠标滑动后，弹出图片标题效果（效果三）：我们先修改html代码，给pic3里面加上<h2>图片标题</h2>稆糨孝汶;<div class="picbox"> <ul> <li class="pic1"><a href="#"> </a></li> <li class="pic2"><a href="#"> </a></li> <li class="pic3"><a href="#"> </a> <h2>图片标题</h2> </li> </ul></div>我们给.pic3添加相对定位，给pic3 下的 <h2>添加绝对定位，并给它添加display:none使其隐藏，等鼠标滑动到pic3时再给其添加display:block让其显示。.pic3{ position:relative;}.pic3 h2{ width:204px; height:30px; line-height:30px; background:#666; color:#fff; text-align:center; position:absolute; top:170px; left:0; display:none;}.pic3:hover h2{ display:block;}刷新浏览器预览效果
6、到这里三种简单的css图片效果就做完了，大家也可自己尝试着去试试其它的样式效果，感谢大家的浏览。
