来看看：及时切换网页的CSS款式完成

只看该作者 · 发表于 2015-1-16 00:26:52

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
及时切换CSS款式

用W3C尺度制作的网站，从实际下去说能够做到完整的体现与布局相分别。打个例如，就是能够在不动骨架（布局，XHMTL）和肌肉（举动，Javascript）的条件下，彻完全底地换一身皮（体现，CSS）。
固然，换皮之前你必要先按W3C尺度建好你的网站，而且为它筹办两套体现纷歧样的CSS。“换皮”本色上就是“换CSS”，我们要做的，只是用某种办法让扫瞄器载进另外一套CSS，从头衬着页面。办法有良多种，我就先容最多见的三种。
办法一：甚么也不干
啊？甚么也不干？嗯，这个……正确地说是：就干那末一丁点儿（你还真觉得有这么好的事儿呀……）。
假定我们有两套CSS，分离关闭在两个分歧的文件中：a.css和b.css。然后在<head>和</head>之间到场以下两行XHTML代码：

然后用你的Firefox翻开这个页面，在菜单栏当选择：检察->页面作风，应当能够看到以下的“光景”：

登录/注册后可看大图

就这么复杂，如今你就能够用Firefox来“换皮”了。IE？IE没这个功效……MS就是这么拽，W3C“明文保举”：请求扫瞄器供应给用户本人选择款式表的权利，可它就不这么干。侥幸的是这件事也不是太难杂，咱就代庖一下吧。
[separator]
办法二：Javascript
在办法一的基本上，能够用Javascript的DOM办法会见link工具，再将不必要的CSS设为“禁用（disabled）”，剩下的CSS就会被扫瞄器用来衬着页面。剧本以下，请注重个中的正文：

然后在符合的中央挪用这个函数，以本页为例，增加以下两个按钮：
<inputtype="button"value="清光"onclick="setStyle(清光);"/><inputtype="button"value="冥焰"onclick="setStyle(冥焰);"/>　　
利用Javascript的优点是便利、快速、复杂，弱点也是很分明的：很难做到全站的CSS切换，只能范围在以后页上。为了影象用户的选择，可行的计划就是接纳cookie。但是就算利用cookie，也必要在什么时候载进CSS，用户没有Javasciprt撑持怎样办等成绩上多做好些文章。以是不如用上面的办法――
办法三：服务器端剧本
毫无疑问，最好的CSS切换器应当利用服务器端剧本（PHP、ASP、JSP等）来开辟。如许做的优点是很分明的：间接、高效、兼容性好、能够影象用户选择、乃至能够组合分歧的CSS完成相称庞大的“皮肤”切换。
我这里就用PHP为例，用其他的言语也都迥然不同，对一样平常的开辟职员来讲不会有任何坚苦。
基础思绪是如许：用户选择一种“皮肤”，把用户的选择记进cookie（记进数据库也一样，不外如许体系开支会年夜一些），用户会见网站上的任何一个页面时，再从cookie（或数据库）中读出之前用户的选择，载进响应的CSS文件（这里仍是以办法一中讲到的a.css和b.css为例）。
创立一个名为switcher.php的文件，内容以下：
<?php$style=$_GET["style"];setcookie(style,$style,time()+31536000,/,.site.com,0);header("location:".$_SERVER[HTTP_REFERER]);?>　
这段剧本先读取query数据，然后把参数style的值记进cookie，最初前往上一页。接上去我们就能够创立两个用于切换款式的链接了，而且放在符合的页面上，好比首页或用户办理背景（注重把个中的site.com换成你的域名）：
<ahref="switcher.php?style=a">主题A</a>
<ahref="switcher.php?style=b">主题B</a>　　
点击恣意一个链接，响应的就会把“a”或“b”记进cookie，然后就必要一段剧本来读取这个cookie值而且输入XHTML来引进对应的CSS：
<?phpif(isset($_COOKIE["style"])){$style=$_COOKIE["style"];}else{$style="a";//默许接纳主题A}?>
<linkrel="stylesheet"type="text/css"
title="以后选择的主题"href="<?phpecho$style?>.css"/>
每个必要切换款式的页面都要加上这段代码，以是间接把它到场网站的头文件中就好了。固然你能够依据本人的必要修正这个剧本，但万变不离其宗，总的思绪应当是稳定的。
<scripttype="text/javascript">
functionsetStyle(title){
//预界说变量
vari,links;
//用DOM办法取得一切的link元素
links=document.getElementsByTagName("link");

for(i=0;links;i++){
//判别此link元素的rel属性中是不是有style关头字
//即此link元素是不是为款式表link
//同时判别此link元素是不是含有title属性
if(links.getAttribute("rel").indexOf("style")!=-1
&&links.getAttribute("title")){
//先不论三七二十一把它设为disabled
links.disabled=true;
//再判别它的title中是不是有我们指定的关头字
if(links.getAttribute("title").indexOf(title)!=-1)
//假如有则将其激活
links.disabled=false;
}
}
}
</script>

<linkrel="stylesheet"type="text/css"
title="主题A"href="a.css"/>
<linkrel="alternatestylesheet"type="text/css"
title="主题B"href="b.css"/>
</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。

只看该作者 · 发表于 2015-1-18 06:41:30

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-1-24 11:37:18

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-2-1 10:10:43

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-2-20 21:06:36

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-3-6 19:11:03

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-13 08:06:14

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-20 16:56:58

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：及时切换网页的CSS款式完成

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子