伪类练习四

这是我做的一个伪类练习的小案例。

<div>
		<ul>
			<li><img src="images/10.jpg" alt="" style="width:600px;height:200px;"></li>
			<li><img src="images/9.png" alt="" style="width:600px;height:200px;"></li>
			<li><img src="images/8.png" alt="" style="width:600px;height:200px;"></li>
			<li><img src="images/7.png" alt="" style="width:600px;height:200px;"></li>
			<li><img src="images/6.png" alt="" style="width:600px;height:200px;"></li>
			<li><img src="images/5.png" alt="" style="width:600px;height:200px;"></li>
		</ul>
	</div>

首先打一个div，在这个div里面打一个无序列表的标签，在li里面打一个img标签放置他的图片并在里面设置他的宽跟高。

div{
			width:1110px;
			height:200px;
			background-color:#ff0000;
			margin:100px auto;
			overflow:hidden;
		}
		ul li{
			width:200px;
			height:200px;
			background-color:#33ff33;
			float:left;
			list-style:none;
			transition:2s;
			margin-left:-40px;
			margin-top: -16px;
		}
		ul:hover li{
			width:105px;
		}
		ul li:hover{
			width:575px;
		}

之后就来写css样式，首先来设置div的宽跟高在给他一个背景颜色，在让他左右居中对齐和隐藏img图片多出来的部分，再来就是让这些图片向左浮动对齐，再给一个过度的动画效果，最后在ul和li设置一个伪类，让这些图片的宽度位置移动。