CSS 图像映射

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

原创最新推荐文章于 2019-02-03 01:06:54 发布 · 2.7w 阅读

2 ·

CC 4.0 BY-SA版权

栽树同时被 3 个专栏收录

89 篇文章

订阅专栏

学习笔记

37 篇文章

订阅专栏

CSS

32 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现图像映射，通过绝对定位和hover效果增强用户体验。具体包括设置div宽度、高度、阴影，ul无样式列表，以及a标签的位置和hover样式。

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>