E:target

2017-07-04 11:15:00
admin
原创
318
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>目标伪类选择符 E:target </title>
<meta name="author" content=" " />
<style>
.test .hd{padding:10px 0;}
.test .nav{position:fixed;right:10px;left: 540px;}
.test .nav a{display:block;margin: 10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}
.test .bd h2{border-bottom:1px solid #ddd;}
.test .bd .panel:target{border-color:#f60;}
.test .bd .panel:target h2{border-color:#f60;}
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<div class="test">
	<div class="hd nav">
		<a href="#panel1">前往区块1</a>
		<a href="#panel2">前往区块2</a>
		<a href="#panel3">前往区块3</a>
		<a href="#panel4">前往区块4</a>
		<a href="#panel5">前往区块5</a>
	</div>
	<div class="bd">
		<div id="panel1" class="panel">
			<h2>区块1</h2>
			<div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div>
		</div>
		<div id="panel2" class="panel">
			<h2>区块2</h2>
			<div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div>
		</div>
		<div id="panel3" class="panel">
			<h2>区块3</h2>
			<div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>
		</div>
		<div id="panel4" class="panel">
			<h2>区块4</h2>
			<div><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></div>
		</div>
		<div id="panel5" class="panel">
			<h2>区块5</h2>
			<div><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></div>
		</div>
	</div>
</div>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227