实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个遥远而神秘的地方</title>
<style type="text/css">
.div1{
height: 344px;
width: 600px;
padding: 15px;
background-image:url(http://t1.aixinxi.net/o_1c8u5cngh13kv1j9ctav15qpv1fa.jpg-w.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
border-radius:20px;
box-shadow: 8px 8px 8px #888;
}
.h{
text-align: center;
color: #FFF0F5;
}
.text{
font-size: 15px;
color: #FFEFD5;
line-height: 1.5em;
text-indent:2em;
}
</style>
</head>
<body>
<div class="div1">
<h3 class="h" onmouseover="over(this)" onmouseout="out(this)">被选中的少女们</h3>
<p class="text">那张貌似粗糙，</p>
<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人…</p>
<p class="text">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>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业手写：
