简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > php学习第一节课 前端开发初体验-潮涌学习PHP日记
Blogger Information
Blog 23
fans 1
comment 1
visits 22895
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
php学习第一节课 前端开发初体验-潮涌学习PHP日记
潮涌学习php的博客
Original
642 people have browsed it

今天是第一节课，学习了基本的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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！