您的位置：首页 > 其它

当鼠标移动到图片使其变大

2016-01-20 09:17 246 查看

转载请注明出处：/article/3711670.html

<!DOCTYPE html>
<html>
<head>
	<title></title>

</head>
<style type="text/css">
	.mui-content-padded ul,ul li,ol,ol li{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.mui-content-padded ul{
	width: 330px;
	margin:0 auto 0 auto;
	
}

.mui-content-padded ul li{
	width: 70px;
	height: 70px;
	float: left;
	margin: 40px 20px;
}
.mui-content-padded ul li img{
	width: 70px;
	height: 70px;
}
.myText{
	margin-top: 5px;
	text-align: center;
	font-family: "宋体";
	font-size: 90%;
	color: #666666;
}

.myPic a:hover img{
	-webkit-transform:scale(1.23);
	-moz-transform: scale(1.23);
	-o-transform:scale(1.23);
}
</style>
<body>
<div class="mui-content-padded">
	<ul>
		<li class="myList">
			<div class="myPic">
				<a href="#"><img src="a1.png" /></a>
			</div>
			<div class="myText">顺序练习</div>
		</li>
		<li class="myList">
			<div class="myPic">
				<a href="#"><img src="a2.png" onclick="this.style.background-position='right'"/></a>
			</div>
			<div class="myText">随机练习</div>
		</li>
		<li id="offCanvasShow" class="myList">
			<div class="myPic">
				<a href="#"><img src="a3.png" onclick="this.style.backgroundImage='url(img/a4.png)'"/></a>
			</div>
			<div  class="myText">章节练习</div>
		</li>
		<li class="myList">
			<div class="myPic">
				<a href="#"><img src="a4.png" /></a>
			</div>
			<div class="myText">错题集</div>
		</li>
		<li class="myList">
			<div class="myPic">
				<a href="#"><img src="a5.png" /></a>
			</div>
			<div class="myText">我的收藏</div>
		</li>
		<li class="myList">
			<div class="myPic">
				<a href="#"><img src="a6.png" /></a>
			</div>
			<div class="myText">考试记录</div>
		</li>
	</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航