核心提示：一个网页换肤的小练习带给我的痛苦。真的是无比郁闷，搞个小练习搞了快两个晚上，一直在怀疑是不是自己代码有问题，却死在了一句link的title图标上：事情是这样的：我开始自己写的代码，因为是初学，有一些...
一个网页换肤的小练习带给我的痛苦。真的是无比郁闷，搞个小练习搞了快两个晚上，一直在怀疑是不是自己代码有问题，却死在了一句link的title图标上：事情是这样的：我开始自己写的代码，因为是初学，有一些点不会写就参照了下原码，问题就出在我明明和源码的各种代码一样啊，为什么死都出不来结果。一开始我各种查找，后来没有办法就开始一部分一部分把各部分的源码复制过来，把自己的注释掉检查，结果我把主部分所有代码都换了，还是出不来结果，我这心真是恶心死了，后来的后来发现我比源码只是多了一个对title添加图标的link标签，
这个标记在我们的浏览器中也出现了csshack，最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。
因此我们也可以通过这个标记编写不同浏览器的css代码：
<style type="text/css">
p{background: yellow !important; background: green}
</style> -
在ie7,ie8,firefox,chrome等新版本内核浏览器下都能正确的显示背景颜色为黄色，然而ie6却会显示为绿色。
2处：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页换肤</title>
<link rel="shortcut icon" href="img\1-titlt.jpg"> //问题出在这里
<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;border-width:4px;border-style:solid;} //1
#skin li.current{background: #fff!important;} //2
#red{border-color: red;background-color: red;}
#green{border-color: green;background-color: green;}
#blue{border-color: blue;background-color: blue;}
#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" />
<script>
window.onload = function ()
{
var oLink = document.getElementsByTagName("link")[1]; //源码程序因为没有图标，调用的是[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>
</head>
<body>
<p id="outer">
<ul id="skin">
<li id="red"></li>
<li id="green" class="current"></li>
<li id="blue"></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>
</p>
</body>
</html>
还是自己太粗心了。静下心慢慢来孩子。
这个小程序有几个我不太用到的语句，记录如下：
2处： !important在css的样式中主要是为了实现css代码的优先级别，主要写在样式规则之后：
比如说： {color:#fff!important;}.
一般css里面的优先级别规则都是按级层覆盖 然而使用!important可以改变优先级别为最高。
这个标记在我们的浏览器中也出现了csshack，最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。
因此我们也可以通过这个标记编写不同浏览器的css代码：
<style type="text/css">
p{background: yellow !important; background: green}
</style> -
在ie7,ie8,firefox,chrome等新版本内核浏览器下都能正确的显示背景颜色为黄色，然而ie6却会显示为绿色。
2处：
cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式 另外可以选择其他鼠标指针样式，常用的有default 箭头，crosshair 十字，progress 箭头和沙漏等等
