分享
 
 
 

用CSS和JS实现网页的多种风格的设置

王朝html/css/js·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

大家都见过好多网页可以实现多种风格的显示,比如动网论坛等等,而且好多网站都 设置多种风格,方便用户按照自己的设置风格来浏览你的网站。

实现的方法我在这里不做讨论。今天我给大家介绍一种特简单的方法,用CSS+JS简单 方法就可以实现网页的多种风格显示。

本教程提供的方法希望对大家做主页的时候有用。

我认为这是一种最好的实现方法了,如果大家还有其他简单的方法可以和我讨论。QQ :76312395 网站:http://www.webjx.com,不说废话了,下面开始给大家介绍如何实现的方 法:

我们设置网页的风格时通常是使用CSS来设置,下面代码:

<link rel="stylesheet" type="text/css" href="style1.css" />

使用上面的代码通常我们事先设置好style1.css的内容,然后把上面的代码放到head 区域内,如果你不清楚的话,你可以去看看相关CSS的教程来设置。当网页被加载之后将按 style1.css设置的风格来显示我们网页的内容。如果我们想实现多种风格的显示,,那么我们 就要对上述标签的内容进行稍微改变了,我们可以添加一个title属性,如下代码:

<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />

如果把上面的代码添加到网页中,浏览页面时效果和上面的显示效果是一样的,但是 这时我们已经给加载的style1.css命名了一个标题。这个风格就是我们网页的默认风格,这时 如果我们还想添加其他的风格,那么这时我们只有来改变rel属性的值了。具体代码如下:

<link rel="alternate" type="text/css" href="style2.css" title="style2" />

当浏览器浏览时style2.css也将被加载,但是这时由于rel的属性为alternate,就实 现了虽然加载了但是不会被显示出效果的。我们如果也想使style2.css来实现显示效果,那么 这时的办法是我们注意到了上面的代码都有title属性,我们可以设法使用一个函数来调用 title属性的之来实现让网页显示style2.css的效果。这是我们可以使用js来编写一个函数来 实现网页多种风格的显示了。

我们实现的方法是在网页上做多个连接(当然连接的做法非常多的,比如动网论坛是用 的下拉菜单),当单击连接时去调用不同的CSS文件,从而实现了网页多种风格的显示。在这里 因为函数的内容比较多,我们可以做成一个js文件,然后再网页上添加如下代码:

<script type="text/javascript" src="stylealter.js"></script>

然后我们在网页的body中添加如下代码:

<a href="#" onclick="setActiveStyleSheet ('style1'); return false;">sytle1风格显示</a>

<a href="#" onclick="setActiveStyleSheet ('style2'); return false;">sytle2风格显示</a>

提供给大家源文件:

<HEAD>

<TITLE>设置网页的多种风格示例</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<LINK title="style1" href="style1.css" type=text/css rel="stylesheet">

<LINK title="style2" href="style2.css" type=text/css rel="alternate stylesheet">

<SCRIPT src="stylealter.js" type=text/javascript></SCRIPT>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR>

</HEAD>

<BODY>

<P>网页教学网http://www.webjx.com默认的风格</P>

<br/><br/>

<A onclick="setActiveStyleSheet('style1'); return false;" href="#">默 认风格</A>

<BR>

<A onclick="setActiveStyleSheet('style2'); return false;" href="#">第 二中风格</A>

</BODY>

</HTML>

把上面的代码保存为一个扩展名为.htm(或.html)的文件

提供style1.css 、style2.css、 stylealter.js下载

点击这里看看演示效果吧!

当然我给大家提供的上面的.htm(或.html)文件和style1.css 、style2.css与 stylealter.js要方法同一目录下,如果不在同目录那么你就要改变href="style1.css"和 src="stylealter.js"的目录了!

本例子目的就是给大家介绍网页显示多种风格的方法,CSS设置非常简单,希望大家学 会方法设置出更加复杂的CSS,你的页面就漂亮了。去试试吧

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有