<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四季描述</title>
<style type="text/css">
:target{ //链接时才起作用
color: green;
font-size: 10px;
display:block ; //链接时显示
}
div{ //最开始div都是不显示
display: none;
}
</style>
</head>
<body>
<ul>
<a href="#six"> <li>春</li></a>
<a href="#seven"><li>夏</li></a>
<a href="#eight"><li>秋</li></a>
<a href="#nine"><li>冬</li></a>
</ul>
<h3>四季特点</h3>
<div id="six" >
<img src="img/chun.jpg">
<p>春天又为春季</p>
</div>
<div id="seven">
<img src="img/xia.jpg">
<p>夏天又夏季</p>
</div>
<div id="eight">
<img src="img/qiu.jpg">
<p>秋天又为秋季</p>
</div>
<div id="nine">
<img src="img/dong.jpg">
<p>冬天又为冬季</p>
</div>
</body>
</html>
target用法(简洁易理解)
最新推荐文章于 2023-07-14 18:19:38 发布
这个网页展示了四季的特点,通过链接可以显示不同季节的图片和描述。春天和夏季、秋季、冬季的图片及简介分别用<div>元素隐藏,通过链接的锚点定位显示。点击链接后,对应的季节内容将以绿色字体和10px的字号显示。
摘要由CSDN通过智能技术生成