您的位置：首页 > Web前端 > HTML

html点击文字显示图片

2015-09-22 13:34 555 查看

这个是网页显示，图片是不需要下载的。

代码：

<html>
<head>
<title>点击文字显示图片</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
ul {
	width: 400px;
	height: 600px;
	border-style: solid;
	border-width: 2px;
	border-color: #FF359A;
	border-style: solid;
}

li {
	list-style-type: none; /*去除列表符号*/
	position: relative; /*配合子标签使用*/
}

* { /*使所有的内容都紧靠在一起*/
	margin: 0px;
	padding: 0px;
}

img {
	width: 100px;
	height: 100px;
	display: block; /*图片保持显示状态*/
}

/*设置默认属性*/
li:LINK {
	background-color: #28FF28;
}

li:VISITED {
	background-color: #0066CC;
}

li:HOVER {
	background-color: #FFC1E0;
}

li:ACTIVE {
	background-color: #d0d0d0;
}
/*设置关联属性*/
#div_02 {
	display: none; /*初始不显示*/
	position: absolute; /*使图片脱离流*/
	left: 120px;
	top: 15px;
}

#div_02 img {
	display: block; /*一直显示*/
}

li:HOVER #div_02 {
	display: block; /*当鼠标悬停时，显示图片 */
}
</style>
</head>
<body>
	<ul>
		<li>
			<div id="div_01">01 爱的纹身</div>
			<div id="div_02">
				<img alt="图片不存在"
					src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" />
			</div>
		</li>
		<li>
			<div id="div_01">02 我还念的</div>
			<div id="div_02">
				<img alt="图片不存在"
					src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" />
			</div>
		</li>
		<li>
			<div id="div_01">03 累了</div>
			<div id="div_02">
				<img alt="图片不存在"
					src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" />
			</div>
		</li>
		<li>
			<div id="div_01">04 漫漫 慢慢</div>
			<div id="div_02">
				<img alt="图片不存在"
					src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" />
			</div>
		</li>
		<li>
			<div id="div_01">05 听,花期越来越近</div>
			<div id="div_02">
				<img alt="图片不存在"
					src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" />
			</div>
		</li>
	</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航