一个网页换肤的小练习带给我的痛苦。真的是无比郁闷,搞个小练习搞了快两个晚上,一直在怀疑是不是自己代码有问题,却死在了一句 link 的 title 图标上:事情是这样的:我开始自己写的代码,因为是初学,有一些点不会写就参照了下原码,问题就出在我明明和源码的各种代码一样啊,为什么死都出不来结果。一开始我各种查找,后来没有办法就开始一部分一部分把各部分的源码复制过来,把自己的注释掉检查,结果我把主部分所有代码都换了,还是出不来结果,我这心真是恶心死了,后来的后来发现我比源码只是多了一个对 title 添加图标的 link 标签,
- <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>
- <div 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>
- </div>
- </body>
- </html>
还是自己太粗心了。静下心慢慢来孩子。
这个小程序有几个我不太用到的语句,记录如下:
2 处: !important 在 css 的样式中主要是为了实现 css 代码的优先级别,主要写在样式规则之后: 比如说: {color:#fff!important;}.
一般 css 里面的优先级别规则都是按级层覆盖 然而使用! important 可以改变优先级别为最高。
因此我们也可以通过这个标记编写不同浏览器的 css 代码:
这个标记在我们的浏览器中也出现了 csshack,最重要的一点是:IE 6.0 一直都不支持这个语法,而其他的浏览器都支持。
这打破了我们之前覆盖平衡,优先于正常的 css 规则。
2 处:
在 ie7,ie8,firefox,chrome 等新版本内核浏览器下都能正确的显示背景颜色为黄色,然而 ie6 却会显示为绿色。
-
- cursor:pointer设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式
- 另外可以选择其他鼠标指针样式,常用的有default 箭头,crosshair 十字,progress 箭头和沙漏等等
来源: http://www.2cto.com/kf/201703/616759.html