2018/3/15:第一节课作业:
感悟:js部分感觉比较困难,很多东西怎么调用的并不是特别清晰,html部分完成得比较简单。
作业完成效果截图:
代码部分整理:
实例 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <meta charset="utf-8"> <title>海贼王介绍</title> </head> <style type="text/css"> body{ margin: 0; padding: 0; } .main{ width: 550px; height: 400px; margin: 100px auto; background:url(7504312_114017_6476.jpg); background-repeat: no-repeat; background-size: 590px 450px; padding: 15px; border-radius: 20px; } .main>h2{ color: brown; text-align: center; } .main>h4{ color: crimson; } .main>span{ display: block; line-height: 1.5em; text-indent: 2em; } </style> <body> <div class="main"> <h2 onmouseover="colorchange(this)"onmouseout="oldcolor(this)">关于海贼王</h2> <h4>海贼王是一部怎样的漫画?</h4> <span> 《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品,在《周刊少年Jump》1997年34号开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。 2012年5月11日,《航海王》获得第41回日本漫画家协会赏[1] 。截至2015年6月15日,《航海王》以日本本土累计发行了3亿2086万6000本,被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”[2] 。2017年7月21日,日本纪念日协会通过认证,将每年的7月22日设立为“ONE PIECE纪念日”. </span> </div> </body> </html> <script type="text/javascript"> function colorchange(element){ element.style.fontSize='24px' element.style.color='#1874CD' } function oldcolor(element){ element.style.fontSize='20px' element.style.color='#63BBFF' } </script> 运行实例 » 点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
---
手抄部分整理: