css笔记

原创已于 2022-10-20 09:19:24 修改 · 1.7w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2017-06-02 08:07:33 首次发布

贤弟专栏收录该内容

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;
		}
		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;
		}
		#pic:hover a {
			border: 1px solid white;
			box-shadow: 3px 3px 5px gray;
		}
		.outer {
			display: block;
			height: 46px;
			width: 96px;
		}
		.inner {
			display: block;
			height: 42px;
			width: 92px;
		}
		.note {
			display: none;
			top: 53px;
			left: 30px;
			position: absolute;
		}
		a:hover .outer {
			border: 2px solid red;
		}
		a:hover .inner {
			border: 2px solid blue;
		}
		a:hover .note {
			display: block;
			background-color: #ffc;
		}
	  </style>
	</head>
	<body>
		<div id="pic">
			<img src="img.png" alt="test"></img>
			<ul>
				<li class="a">
                	<a href="a">
                    	<span class="outer">
						<span class="inner">
							<span class="note">about</span>
						</span>
					</span>
                    </a>
				</li>
				<li class="b">
                	<a href="b">
                    	<span class="outer">
                          <span class="inner">
                              <span class="note">live</span>
                          </span>
						</span>
                    </a>
				</li>
				<li class="c">
                	<a href="c">
                    	<span class="outer">
                          <span class="inner">
                              <span class="note">photos</span>
                          </span>
						</span>
                    </a>
				</li>
				<li class="d">
					<a href="d">
						<span class="outer">
							<span class="inner">
								<span class="note">contact</span>
							</span>
						</span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>