css笔记

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

已于 2022-10-20 09:22:35 修改

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

文章标签： css

于 2017-05-18 08:31:39 首次发布

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

贤弟专栏收录该内容

249 篇文章

订阅专栏

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;
		}
		a {
			text-decoration: none;
		}
		.hot {
			width: 100px;
			height: 50px;
		}
		a[href~="a"] .hot {
			position: absolute;
			top: 40px;
			left: 170px;
		}
		a[href~="b"] .hot {
			position: absolute;
			top: 40px;
			left: 325px;
		}
		a[href~="c"] .hot {
			position: absolute;
			top: 40px;
			left: 475px;
		}
		a[href~="d"] .hot {
			position: absolute;
			top: 40px;
			left: 620px;
		}
		a:hover .hot {
			display: block;
			border: 1px solid #fff;
		}
		a:hover .link {
			color: red;
			font-weight: bold;
		}
	  </style>
	</head>
	<body>
		<div id="pic">
			<img src="img.png" alt="test"></img>
			<ul>
				<li class="a">
                	<a href="a">
                    	<span class="hot"></span>
						<span class="link">&raquo;about</span>
                    </a>
				</li>
				<li class="b">
                	<a href="b">
                    	<span class="hot"></span>
                        <span class="link">&raquo;live</span>
                    </a>
				</li>
				<li class="c">
                	<a href="c">
                    	<span class="hot"></span>
                        <span class="link">&raquo;photos</span>
                    </a>
				</li>
				<li class="d">
					<a href="d">
						<span class="hot"></span>
						<span class="link">&raquo;contact</span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>