CSS 图像映射

最新推荐文章于 2019-02-03 01:06:54 发布

托马斯小火车喷雾又喷烟，一直喷，喷喷喷.

最新推荐文章于 2019-02-03 01:06:54 发布

阅读量2.7w

点赞数 2

本文链接：https://blog.youkuaiyun.com/InJavaWeTrust/article/details/101063709

版权

栽树同时被 3 个专栏收录

89 篇文章

订阅专栏

学习笔记

37 篇文章

订阅专栏

CSS

32 篇文章

订阅专栏

CSS 图像映射

<!DOCTYPE html>
<html>
	<head>
	  <style> 
		div {
			width: 750px;
			height: 150px;
			box-shadow: 3px 3px 5px gray;
		}
		ul {
			list-style: none;
		}
		li a {
			display: block;
			height: 50px;
			width: 100px;
		}
		a[href~="a"] {
			position: absolute;
			top: 40px;
			left: 170px;
		}
		a[href~="b"] {
			position: absolute;
			top: 40px;
			left: 325px;
		}
		a[href~="c"] {
			position: absolute;
			top: 40px;
			left: 475px;
		}
		a[href~="d"] {
			position: absolute;
			top: 40px;
			left: 620px;
		}
		a:hover {
			border: 1px solid yellow;
			box-shadow: 5px 5px 8px gray;
		}
	  </style>
	</head>
	<body>
		<div>
			<img src="img.png" alt="test"></img>
			<ul>
				<li class="a"><a href="a" title="about"></a></li>
				<li class="b"><a href="b" title="live"></a></li>
				<li class="c"><a href="c" title="photos"></a></li>
				<li class="d"><a href="d" title="contact"></a></li>
			</ul>
		</div>
	</body>
</html>