<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>突出展示</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
*{/*清楚页面原有边距*/
margin:0;
padding: 0;
background-color: black;
}
.divclass{/*定义盒子*/
width: 1000px;
height: 464px;
margin: 150px auto;/*盒子居中*/
border: 1px solid red;
}
.divclass ul {/*去除列表小圆点*/
list-style:none;
}
.imgclass{/*图片处理*/
width:33%;
height:33%;
float:left;
}
</style>
</head>
<body>
<div class="divclass">
<ul>
<li><a href="#"><img src="../../../图片/黄昏少女/6.png" class="imgclass" alt="1"></a></li>
<li><a href="#"><img src="../../../图片/黄昏少女/5.png" class="imgclass" alt="2"></a></li>
<li><a href="#"><img src="../../../图片/黄昏少女/4.png" class="imgclass" alt="3"></a></li>
<li><a href="#"><img src="../../../图片/黄昏少女/3.png" class="imgclass" alt="4"></a></li>
<li><a href="#"><img src="../../../图片/黄昏少女/11.png" class="imgclass" alt="5"></a></li>
<li><a href="#"><img src="../../../图片/黄昏少女/10.png" class="imgclass" alt="6"></a></li>
</ul>
</div>
</body>
<script>
$(function (){
$('.divclass').find('li').mouseenter(function (){
$(this).css('opacity',1).siblings('li').css('opacity',0.1);
});
$('.divclass').find('li').mouseleave(function (){
$(this).css('opacity',1).siblings('li').css('opacity',1);
});
});
</script>
</html>
为什么我的图片没有对齐
