今天是第一节课,学习了基本的HTML代码了解,做了一个有背景图的段子。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>公交车遇美</title> <style type="text/css"> div{ width:550px; height:300px; /*border:1px solid red;*/ padding:15px; /*background-color:yellow;*/ background-image: url(images/8.jpg); background-size:580px 360px; background-repeat:no-repeat; border-radius:20px; box-shadow:6px 6px 3px #d3feac; } .text{ color:#fffff; line-height:2em; text-indent:2em; width:400px; } </style> </head> <body> <div> <h2 style="color:brown;text-align:center;font-size:20px;" onmouseover = "change(this)" onmouseout="old(this)" >公交车遇美</h2> <p>公交车上我看见了一个穿着时尚的美女在朝我抛媚眼 ..我按下心头的狂喜慢慢朝她挪去 </p> <p>谁知美女也在向我靠近..终于!我们两的身体挨到了一起...! 下了车我发现我兜里的两千块钱不见了!!! </p> <p>我现在就想问: 两千块钱换一个iphone6s亏吗?</p> </div> <script type="text/javascript"> function change(element){ element.style.fontSize = '28px' element.style.color = 'black' } function old(element){ element.style.fontSize = '20px' element.style.color = 'brown' } </script> </body> </html>
学习这个过程中遇到了一个问题,就是英文单词写错了,在js代码那里,说明写代码是一件非常严格的事情,一个字母都不能错。
我的解决方法是:
1、按F12,打开页面的控制台-console,它就会给我提示出错的地方了
2、虽然看不大懂这句话的意思,不过括号中的2.html:42 还是能理解的,它的意思是:出错的地方在文件2.html的第42行。然后我就可以去看代码哪里写错了。最终完成了这个实例。