博客列表 >php学习第一节课 前端开发初体验-潮涌学习PHP日记

php学习第一节课 前端开发初体验-潮涌学习PHP日记

潮涌学习php的博客
潮涌学习php的博客原创
2018年03月16日 18:39:31647浏览

今天是第一节课,学习了基本的HTML代码了解,做了一个有背景图的段子。

html1.jpg3.jpg

代码如下:

<!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>

1.jpg2.jpg

学习这个过程中遇到了一个问题,就是英文单词写错了,在js代码那里,说明写代码是一件非常严格的事情,一个字母都不能错。

我的解决方法是:

1、按F12,打开页面的控制台-console,它就会给我提示出错的地方了

2、虽然看不大懂这句话的意思,不过括号中的2.html:42 还是能理解的,它的意思是:出错的地方在文件2.html的第42行。然后我就可以去看代码哪里写错了。最终完成了这个实例。

html2.jpg

上一条:315作业下一条:作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议