关于div的一个小问题解决方式(只写了一个div，但div中的内容重复显示出来)

错误实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>一个遥远而神秘的地方</title>
	<style>
		div{
			height: 344px; 
			width: 600px;
			padding: 15px;
			/*background-image:url(../images/Tomochin.jpg);*/
			background-image:url(http://t1.aixinxi.net/o_1c8u5cngh13kv1j9ctav15qpv1fa.jpg-w.jpg);
			background-size: 630px 374px;
			background-repeat:no-repeat;
			border-radius:20px;
			box-shadow: 8px 8px 8px #888;
		}
		h3{
			text-align: center;
			color: #FFF0F5;
			/*font-size: 20px;*/
		}
		.text{
			/*font-size: 15px;*/
			color: #FFEFD5;
			line-height: 1.5em;
			text-indent:2em;
		}
	</style>
</head>
<body>
	<div>
		<h3 onmouseover="over(this)" onmouseout="out(this)">被选中的少女们</h3>
		<p class="text">那张貌似粗糙，</p>
		<p class="text">实则充满自信的征集广告，</p>
		<p class="text">取得了它应有的效果。</p>
		<p class="text">报名信雪片般从全国各地飞来，共有7924封。</p>
		<p class="text">而这次征集活动实际上要录取的人数，</p>
		<p class="text">正好是报名数的零头：24人…<br/>
		21世纪的丑小鸭传说......</p>
	</div>
<script type="text/javascript">
	function over(a){
		a.style.fontSize = '22px';
		a.style.color = '#00FF00';
	}
	function out(b){
		b.style.fontSize = '20px';
		b.style.color = '#FFF0F5';
	}
</script>
</body>
</html>

运行效果：

以上实例中，DIV中的图片会重复显示，通过排除法，得出原因是<style>中的div不能直接定义（直接定义会导致浏览器多识别一个div，不知道为何），需要使用class选择器解决问题：

将

div{
			height: 344px; 
			width: 600px;
			padding: 15px;
			/*background-image:url(../images/Tomochin.jpg);*/
			background-image:url(http://t1.aixinxi.net/o_1c8u5cngh13kv1j9ctav15qpv1fa.jpg-w.jpg);
			background-size: 630px 374px;
			background-repeat:no-repeat;
			border-radius:20px;
			box-shadow: 8px 8px 8px #888;
		}

修改为

.div1{
			height: 344px; 
			width: 600px;
			padding: 15px;
			/*background-image:url(../images/Tomochin.jpg);*/
			background-image:url(http://t1.aixinxi.net/o_1c8u5cngh13kv1j9ctav15qpv1fa.jpg-w.jpg);
			background-size: 630px 374px;
			background-repeat:no-repeat;
			border-radius:20px;
			box-shadow: 8px 8px 8px #888;
		}

并将后面使用以上样式的属性和值修改成相应的格式。

错误实例

相关文章