实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.明信片</title>
<style>
.h{
color: #3a7ead;
text-align: center;
font-size: 25px;
}
div{
margin:auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
color: #cd0a0a;
text-align: center;
height: 300px;
width: 520px;
padding: 15px;/*内边距*/
border-radius: 10px;/*设置边框圆角化的值*/
box-shadow: 5px 5px 5px #888;/*边框阴影的值*/
background-image: url(img/1.jpg);
background-size: 550px 330px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="d">
<h3 class="h" onmouseover="jiaodian(this)" onmouseout="old(this)" >明年的今天2019.03.28</h3>
<p>
永不要羡慕那些生而富贵的人。物质世界无穷尽，最重要的不是拥有什么<br>
而是努力改善，使生活充满希望，使生命每天向上。<br>
不要求你有钱，但是要答应我，明年，下个月，明天，都比现在多一点。<br>
</p>
</div>
<script>
function jiaodian (bl) {
bl.style.fontSize = '30px';
bl.style.color = 'green';
}
function old (bl) {
bl.style.fontSize = '25px';
bl.style.color = '#3a7ead';
}
</script>
</body>
</html>
QQ截图20180328125744.jpg运行实例 »
点击 "运行实例" 按钮查看在线实例
