标签：style blog http color io os ar java for
第一步，实现网页换肤的页面布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页换肤</title> <style> body,ul,li{margin:0;padding:0;} html,body{height:100%;} body{font:12px/1.5 Tahoma;} li{list-style-type:none;} a:link,a:visited{text-decoration:none;} a:hover{text-decoration:underline;} #outer{width:500px;margin:0 auto;overflow:hidden;zoom:1;} #skin,#nav{overflow:hidden;zoom:1;} #skin{margin:10px 0;} #skin li{float:left;width:6px;height:6px;cursor:pointer;overflow:hidden;margin-right:10px;text-indent:-9999px;border-width:4px;border-style:solid;} #skin li.current{background:#fff!important;} #red{border-color:red;background:red;} #green{border-color:green;background:green;} #black{border-color:black;background:black;} #nav{border:1px solid #fff;} #nav li{float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;} #nav li.last{width:83px;border-right-width:0;} #nav li a{color:#fff;} </style> <link href="green.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="outer"> <ul id="skin"> <li id="red" title="红色">红</li><li id="green" class="current" title="绿色">绿</li><li id="black" title="黑色">黑</li> </ul> <ul id="nav"> <li><a href="javascript:;">新闻</a></li> <li><a href="javascript:;">娱乐</a></li> <li><a href="javascript:;">体育</a></li> <li><a href="javascript:;">电影</a></li> <li><a href="javascript:;">音乐</a></li> <li class="last"><a href="javascript:;">旅游</a></li> </ul> </div> </body> </html>
引用外部css文件,如下所示为(green.css还需创建red.css,black.css)
body{ background:#A3C5A8; } #nav{ background:green; border-color:#fff; } #nav li{ border-color:#fff; }
第二步，实现网页换肤功能
<script> window.onload = function () { var oLink = document.getElementsByTagName("link")[0]; var oSkin = document.getElementById("skin").getElementsByTagName("li"); for(var i = 0; i< oSkin.length; i++) { oSkin[i].onclick = function () { for(var p in oSkin) oSkin[p].className = ""; this.className = "current"; oLink[‘href‘] = this.id + ".css"; } } }; </script>
小结：
一.
<ul> 标签定义无序列表。
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
:hover 选择器用于选择鼠标指针浮动在上面的元素。
text-decoration 属性规定添加到文本的修饰。
text-indent 属性规定文本块中首行文本的缩进。
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即
写在定义的最后面，例如：box{color:red !important;}
line-height 属性设置行间的距离（行高）。
二.
javascript:;(这样的写法是在需要触发事件而不需要返回值的时候出现的)
javascript:void(0);可实现同等效果，Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
参考链接：
javascript:void
http://stackoverflow.com/questions/7452341/what-does-void-0-mean
zoom:1 (可以解决IE中网页的放大缩小功能。)
http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html
标签：style blog http color io os ar java for
原文地址：http://www.cnblogs.com/code-charmer/p/4026505.html
