css笔记

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

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

贤弟专栏收录该内容

249 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用CSS进行网页布局及元素样式的设置。包括了div元素的尺寸设定、阴影效果的应用、无序列表样式的清除以及超链接的表现形式调整等。特别针对带有特定类名和属性选择器的锚点元素进行了位置定位，并定义了hover状态下的样式变化。

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>