实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绩效工资</title> <style> div{ width: 400px; height: 300px; border: solid 1px #8888; padding: 15px; background-image: url(imager/1.jpg); background-size: 430px 330px; box-shadow: 10px 10px 8px #999; border-radius: 10px; } h3{ text-align: center; color: red; font-style: 20px; } p{ line-height: 1.5em; color: #000000; text-indent: 2em; } </style> </head> <body> <div> <h3 onmousemove="change(this)" onmouseout="bod(this)">绩效工资</h3> <p>从前有只羊,一天得干10个小时的活。</p> <p>一天,主人告诉它,多干活有奖励,于是它照做了。</p> <p>接下来,主人每月把它身上的羊毛剪了三分之一,年底到了,给它织了件毛衣,然后告诉它:诺,这是你的奖励,恭喜你,明年继续努力吧!</p> <p>羊很生气,把它的故事写成童话,起了个名字叫:"绩效工资"。</p> </div> <script type="text/javascript"> function change(ments) { ments.style.fontSize = '25px' ments.style.color = 'green' } function bod(ments){ ments.style.color = 'red' ments.style.fontSize = '20px' } </script> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例