html-logo名牌效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>logo名牌</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.box{
				width: 990px;
				height: 105px;
				margin: 0 auto;
				padding-top: 15px;
				background-color: #fff;
			}
			.box ul{
				width: 924px;
				height: 92px;
				margin: 0 auto;
			}
			.box ul li{
				float: left;
				width: 92px;
				height: 92px;
				margin: 0 20px;
			}
			.box ul li a{
				display: block;
				width: 92px;
				height: 92px;
				text-align: center;
			}
			/* 技巧：为使图片居中，用一个span宽度不设置，高度100%和图片img相互居中 */
			.box ul li a img{
				vertical-align: middle;
			}
			.box ul li a span{
				display: inline-block;
				vertical-align: middle;
				width: 0;
				height: 100%;
			}
			.box ul li a:hover{
				background: #fff url(./img02/bg.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><a href="javascript:;"><img src="./img02/logo1.png" ><span></span></a></li>
				<li><a href="javascript:;"><img src="./img02/logo2.png" ><span></span></a></li>
				<li><a href="javascript:;"><img src="./img02/logo3.png" ><span></span></a></li>
				<li><a href="javascript:;"><img src="./img02/logo4.png" ><span></span></a></li>
				<li><a href="javascript:;"><img src="./img02/logo5.png" ><span></span></a></li>
				<li><a href="javascript:;"><img src="./img02/logo6.png" ><span></span></a></li>
				<li><a href="javascript:;"><img src="./img02/logo7.png" ><span></span></a></li>
			</ul>
		</div>
	</body>
</html>

 

posted @ 2020-02-09 16:51  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源