仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 672|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:cookie和dom操纵挪用款式表完成网页换肤

[复制链接]
逍遥一派 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:10:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
道理:经由过程存取cookie和dom操纵挪用分歧的款式表文件来完成前台换肤.
换肤示例下载:sour.rar

Html代码部分:
1.要有一个带id的款式表链接,我们要经由过程操纵这个链接来挪用分歧的href.
<linkhref="CSS/main0.css"rel="stylesheet"type="text/css"id="cssfile"/>
2.皮肤选择按钮(背景为每一个li增加onclick事务,触发换肤功效)
<ulid="skin">
<liid="skin_0"title="灰色">灰色</li>
<liid="skin_1"title="绿色">绿色</li>
<liid="skin_2"title="黄色">黄色</li>
<liid="skin_3"title="蓝色">蓝色</li>
<liid="skin_4"title="粉色">粉色</li>
<liid="skin_5"title="紫色">紫色</li>
</ul>
Js部分:
1.换肤办法
//设置cookie,按钮选中形态,页面皮肤
skin.setSkin=function(n){
varskins=$("skin").getElementsByTagName("li");
for(i=0;i<skins.length;i++)
{
skins.className="";//初始化按钮形态
}
skin.setCookie(n);//保留以后款式
$("skin_"+n).className="selected";//设置选中皮肤按钮的款式
$("cssfile").href="css/main"+n+".css";//设置页面款式
}
2.存取cookie
//将以后皮肤n存到cookie
skin.setCookie=function(n){
varexpires=newDate();
expires.setTime(expires.getTime()+24*60*60*365*1000);
varflag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//前往用户设置的皮肤款式
skin.readCookie=function(){
varskin=0;
varmycookie=document.cookie;
varname="Skin_Cookie";
varstart1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//假如没有设置则显现默许款式
}
else{
varstart=mycookie.indexOf("=",start1)+1;
varend=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
varvalues=unescape(mycookie.substring(start,end));
if(values!=null)
{
skin=values;
}
}
returnskin;

}
3.绑定换肤按钮事务
skin.addEvent=function(){
varskins=$("skin").getElementsByTagName("li");
for(i=0;i<skins.length;i++)
{
skins.onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤款式
window.onload=function(){
skin.setSkin(skin.readCookie());//依据读取cookie前往值设置皮肤款式
skin.addEvent();//绑定按钮事务

你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
谁可相欹 该用户已被删除
沙发
发表于 2015-1-18 05:30:07 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
小魔女 该用户已被删除
板凳
发表于 2015-1-25 17:59:43 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
飘飘悠悠 该用户已被删除
地板
发表于 2015-2-3 12:50:22 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
若相依 该用户已被删除
5#
发表于 2015-2-9 03:13:44 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
小女巫 该用户已被删除
6#
发表于 2015-2-26 19:56:14 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
再现理想 该用户已被删除
7#
发表于 2015-3-8 17:36:21 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
变相怪杰 该用户已被删除
8#
发表于 2015-3-16 09:53:25 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
admin 该用户已被删除
9#
发表于 2015-3-22 22:11:25 | 只看该作者
可以使用 CSS 检查工具进行设计。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 07:06

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表