多语言展示
当前在线:429今日阅读:126今日分享:42

网页换胅的实现

网页的换肤功能在很多的网站都有,点一下换肤就能DIV网页颜色。那么这个功能是如何实现的呢?不妨看看小编给你带来的经验吧。
工具/原料
1

css/html/javascript

2

Dreamweaver

方法/步骤
1

打Dreamweaver新建一个html文件,进入源码编辑。简单制作一个网页部局,写好代码保存,例如test.html.

2

再点新建,选择CSS然后点击创建,新建一个CSS文档,以便于导入到html页面中。输入以下内容,给html页中的div和标题添加样式。写好保存,取名为css1.css.为了看着方便我把html文件和css文件存放在同一个目录下。在html页面中用导入的形式直接看html部分。

3

重复上一次步骤再建立一个css2.css文件,把刚才的css1.css的代码全部复制过来,只做部分修改即可,修改后的结果如下其实就是改变了几个颜色值,其他都不变。

4

接下来就是javascript部分了,代码如下:把这段代码放在html代码的中。按F12执行代码结果如下图:好了,至此所有代码部分都写完了,是不是很简单呢?赶快试试吧!

5

以下是html和javsscript文字代码:网页换肤

标题1

这是第1个div内文字

标题2

这是第二个div内文字

6

以下是css2的代码:css1的代码根据css2稍做修改就好了。这是就不写文字代码了。@charset 'utf-8';h3,body,div{padding:0;margin:0;}.cls{width:400px;height:200px;border:1px #f90 solid;float:left;margin:10px 20px;background:#ffc;}.subdiv{width:380px;height:150px;color:#f30;padding:10px;}h3{color:#fff;text-align:center;background:#f90;height:30px;line-height:30px;}input{height:26px;width:80px;border:none;background:#f90;margin:20px;color:#fff;}

注意事项
1

如果能帮到你请投下您宝贵的一票,你的支持是我最大的动力

2

如果觉得不错请分享哦,让更多喜欢网页设计的朋友学习交流

推荐信息