css笔记

css笔记

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.

<!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>