实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>眷恋</title>
<style type="text/css">
div{
width: 500px;
height: 250px;
padding: 15px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521133107570&di=5130f35fb972c0cd06c04d27a45badef&imgtype=0&src=http%3A%2F%2Fpic-cdn.35pic.com%2F58pic%2F18%2F25%2F30%2F93E58PICjVt_1024.jpg");
background-repeat: no-repeat;
border-radius: 15px;
box-shadow: 8px 8px 8px gray;
}
.title{
text-align: center;
color:red;
font-size: 20px;
}
.main{
text-align: left;
text-indent: 2em;
color: #ffffff;
}
</style>
</head>
<body>
<div>
<h3 class="title" onmouseover="change(this)" onmouseout="old(this)">有些眷恋，只是雨落一场</h3>
<p class="main">生命是一个，花开花落渐行渐远的过程。有些人从你生命中路过，给你一个风景如画的美好。
从此你们情投意合知无不言走过山走过水，看一段人生的浮华懂一场平淡的春秋，
至此多年以后有些人离开了。永远在前进的路上，我们今天所谓的经历。只不过是旅途当中的一半，剩下的一半充满着未知。
精神所潜在的力量绝对是无可估量的。</p>
<p class="main"> 我想人生只有带着这些力量与智慧融合，
才会创造一段又一段的传奇。只有当千般走过雨落一场，我们才不得不承认原来这就是人生。
一直陪伴着时光慢慢老去。</p>
</div>
<script type="text/javascript">
function change(element){
element.style.fontSize = '24px' //老师，为什么我这里写FontSize没有用呢？
element.style.color = 'blue'
}
function old(element){
element.style.fontSize = '20px'
element.style.color = 'red'
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
