七彩课堂[网页设计知识系列]
用CSS和JS实现网页的多种风格
设置网页的风格时通常是使用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.qicaispace.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)的文件。上面的.htm(或.html)文件和style1.css 、style2.css与 stylealter.js要方法同一目录下,如果不在同目录那么你就要改变href="style1.css"和 src="stylealter.js"的目录了!
网页显示多种风格的方法,CSS设置非常简单,希望大家学 会方法设置出更加复杂的CSS,你的页面就漂亮了。去试试吧!

信息推荐
财经资讯 | 电子商务 | 搜索营销 | 设计学院 | 健康常识 | 养生保健 | 节日祝福 | 民俗文化 | 星座命理
星座运势 | 生日短信 | 新年短信 | 传统节日 | 奇闻异事 | 百姓健康 | 趣闻轶事 | 祝福的话 | 手机短信
© 2005-2016 Qicaispace.Com