ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

网页换肤——前端小白小磨刀

2021-04-29 16:59:52  阅读:275  来源: 互联网

标签:换肤 www 网页 cn 标签 w3school js 磨刀 com


 

网页换肤——前端小白小磨刀

 

目录

网页换肤——前端小白小磨刀

 1.创建新文档

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 定义运行循环(代码块)的条件/语句

完成之后就是这个样子,可以通过点击来切换网页的背景颜色

如果有做的不对的话希望大家多多指教~

 

 

 

标签:换肤,www,网页,cn,标签,w3school,js,磨刀,com
来源: https://blog.csdn.net/CanIkissyou_/article/details/116271614

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有