错误实例
<!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;
}并将后面使用以上样式的属性和值修改成相应的格式。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
