一 体验标签的魅力:HTML,CSS的作用
首先新建一个html文件,内容:
搞笑段子:咬不动
和朋友去饭店吃饭,要了一盘红烧肉,结果发现怎么咬都咬不动,我顿时就火了,把服务员叫过来喊道:你们这肉怎么咬都咬不动,把你们经理叫来。服务员说:叫我们经理干啥啊,你都咬不动,他能咬得动啊!
如果在php服务器的环境中,会乱码(直接浏览器打开不会乱码)
只需要添加下面的代码就不再乱码:
<meta charset="utf-8">
为了区分标题和内容,我们使用h3,p标签分别表示包裹标题和段落,使用br标签进行换行
此时内容的展现就比较明显了
使用css样式表美化:
标题改为褐色,居中,字体20px
段落添加一个类属性text ,类属性相当于一个钩子,使得我们可以在页面找到这个元素
设置段落的css样式:
颜色:灰色 行距:1.5em 中文习惯在段落前空两格
最后面的段落也空两格 需用标签包裹,不能用诸如span之类的行内标签
继续美化:使用div区块包裹
div 宽度400 高度250
边框 1px 实线 红色
内边距 15px
背景 黄色
黄色背景很丑,我们使用背景图片替换
给图片也设置一个宽度和高度
图片尺寸 400px 250px
不允许重复
此时可以看到图片没有充满整个div
为什么?因为此时div的宽度和高度已经不是400 250了 因为设置了内边距,上下左右内边距都是15px所以背景的宽高都要加30
因此设置css样式为:
宽度 430 高280
去除红色边框线,边框加圆角,
加阴影:水平垂直10像素 扩散10像素 颜色 灰色
CSS3盒子阴影语法
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
http://cd.itheima.com/news/20210810/161027.html
浏览器查看:
如果想让其居中,div样式设置外边距: 0 auto
二 JavaScript脚本的作用
想实现这样的效果:鼠标移入移出标题与用户有交互效果
使用javascript实现
设置一个鼠标悬停事件,鼠标放在标题上时,字体变粗,颜色变为绿色
此时存在的问题:鼠标悬停后变为绿色,移出后没有变为原来的颜色褐色
再定义一个鼠标移出事件
此时便能实现移入移出的交互效果:
代码规范化,添加标题,将css放入head标签中,javascript脚本需放在文档最后,因为页面代码从上到下执行,js操纵的是页面元素,需在页面元素之后
总结:
前端课程主要有三部分内容组成:
1. 使用HTML标记语言写的主体结构与内容
2. 使用CSS规则写的页面元素显示样式
3. 使用JavaScript脚本语言写的交互脚本代码
什么脚本呢? 脚本的本意就是拍戏用的剧本,剧本上会把演员说的每一句话,以及什么时候说,全部写清楚,
也就是剧情的详细步骤,换成开发用的脚本,可以把演员想像成页面元素,其实就是一组组的标签及里面的内容,他们什么时候上场,应该出现在什么地方,全部写清楚。
目前,前端的脚本语言已经统一,也是唯一的前端脚本编程语言: JavaScript
最终效果:咬不动
本文作者为BUG之神,转载请注明。