网页换肤——前端小白小磨刀
目录
2.编写HTML超文本标签语言 (https://www.w3school.com.cn/js/index.asp (w3school.com.cn))以及CSS层叠样式表
3.编写JavaScript(一种直译式脚本语言)https://www.w3school.com.cn/js/index.asp
1.创建新文档
打开开发工具Adobe Dreamweaver CC 2019(简称:DW)后,找到文件这个点击项,点开之后,
点击新建。又或者Ctrl键+N新建文档。然后会弹出一个窗口,里面会有新建文档类型,按HTML,CSS,JavaScript依次创建,
创建完了之后分别保存,就需要再次点击文件这个点击项,点击保存,选择保存(项目文件夹)位置,更改文档名,完成。
注:一般创建项目时需要有他们单独的文件夹方便开发工具寻找路径。
例:↓↓↓↓
2.编写HTML超文本标签语言 (https://www.w3school.com.cn/js/index.asp (w3school.com.cn))以及CSS层叠样式表
在HTML中引进CSS样式表
如右图所示使用link标签,将CSS引进。
又如右图所示使用script标签将JS文件引入
在body标签内编写所要展示的基本样式
给包裹着所有基本样式元素的div设置类(class)和ID
在链接到的CSS样式表里面设置HTML标签的背景颜色(background-color),宽高(width、height),边距(height)等样式
详情见:((whttps://www.w3school.com.cn/js/index.asp3school.com.cn))
3.编写JavaScript(一种直译式脚本语言)https://www.w3school.com.cn/js/index.asp
首先要获取到这个元素和标签,有两种方法
-getElementById 通过ID获取这个元素
-getElementsByTagName 通过标签名获取这个元素
先创建onclick点击事件
再创建一个新的函数bgcolor,利用getComputedStyle获取当前span标签样式
利用document获取body (body对象代表文档的主体 (HTML body) )
获取到之后利用style改变样式,去改变span标签的背景颜色
注:因为相似的功能,所以我们只需要把相似功能代码复制粘贴5次, 把span[]且做到极尽简洁
也可以运用for循环,将重复的代码减少到最少,如下图所示
//For循环详解见:https://www.w3school.com.cn/js/js_loop_for.aspf
for循环语法:for
(语句 1; 语句 2; 语句 3)
{ 要执行的代码块 }
//语句 1 在循环(代码块)开始之前执行//语句 2 定义运行循环(代码块)的条件/语句
完成之后就是这个样子,可以通过点击来切换网页的背景颜色
如果有做的不对的话希望大家多多指教~