CSS缩放 网页切换风格技术
支付宝内搜索 9155838 即可领现金红包 每天都能领哦
现在网页制作技术日新月异，网页做得越来越绚丽了，功能做得越来越符合浏览者的要求了，前阵子在一个网页上看到一个用户可以自己更换皮肤的功能，很不错，其实实现起来也不复杂的，我研究了一下：
把基本的CSS抽取出来命名为style.css。这个文件不论字体是放大还是缩小都要用。然后我们根据需要再划分3个css文件。分别定义了大，中，小字体的时候页面的元素外观。
在html的顶部引用css文件。
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="text-small.css" title="Small Text" />
<link rel="alternate stylesheet" type="text/css" href="text-medium.css" title="Medium Text" />
<link rel="alternate stylesheet" type="text/css" href="text-large.css" title="Large Text" />
细心的你会看到上面的rel属性有不同。
对了，这就是关键！
html认为只有rel="stylesheet"的css文件才会被最终调用。我们只需要编写一个js脚本来修改各个css的rel属性就可以实现更换不同的css了。
在HTML内容区的最上面增加
<script type="text/javascript" src="dngz_switcher.js"></script>
点击这里下载dngz_switcher.js
dngz_switcher.js会在html页面中增加更换字体大小的链接按钮。
顺着这个思路，你可以制作更换皮肤，更换布局等以及更多的很棒的效果！
更新于:2007-10-25 01:58:27 栏目:技术技巧 关键词:css,网页,技术
本站使用「署名 4.0 国际」创作共享协议，可转载、引用，但需署名作者且注明文章出处