代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>精究方术论</title> <style type="text/css"> div { width: 400px; height:250px; padding: 15px; border-radius: 15px; box-shadow: 5px 5px 5px #888; background-image: url(images/8.jpg); background-size: 430px 280px; background-repeat: no-repeat; } .text { color:#363636; text-indent: 2em; line-height: 1.5em; } </style> </head> <body> <div> <h3 style="color:brown;text-align: center;font-size:20px" onmouseover="change(this)" onmouseout="old(this)" >精究方术论</h3> <p class="text">怪当今居世之士,曾不留神医药,精究方术,上以疗君亲之疾,下以救贫贱之厄,中以保身长全,以养其生。但竞逐荣势,企踵权豪,孜孜汲汲,惟名利是务;崇饰其末,忽弃其本,华其外而悴其内,皮之不存,毛将安附焉?<br> 卒然遭邪风之气,婴非常之疾,患及祸至,而方震栗;降志屈节,钦望巫祝,告穷归天,束手受败。</p> </div> <script type="text/javascript"> function change(element) { element.style.fontSize = '24px' element.style.color = 'green' } function old(element) { element.style.fontSize = '20px' element.style.color = 'brown' } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
手写代码: