博主信息
博文 23
粉丝 1
评论 1
访问量 27768
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
php学习第一节课 前端开发初体验-潮涌学习PHP日记
潮涌学习php的博客
原创
790人浏览过

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

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学