一个网页换肤的小练习带给我的痛苦

最新推荐文章于 2018-07-25 16:39:00 发布

欧欧欧欧欧耶

最新推荐文章于 2018-07-25 16:39:00 发布

阅读量805

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/be_a_girl_you_love/article/details/65448669

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

真的是无比郁闷，搞个小练习搞了快两个晚上，一直在怀疑是不是自己代码有问题，却死在了一句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代码：

   <style type="text/css">
   div { background : yellow !important ; background: green }
   </style>

   在ie7,ie8,firefox,chrome等新版本内核浏览器下都能正确的显示背景颜色为黄色，然而ie6却会显示为绿色。

2处：

cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式

 另外可以选择其他鼠标指针样式，常用的有default 箭头，crosshair 十字，progress 箭头和沙漏等等

欧欧欧欧欧耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个网页换肤的小练习带给我的痛苦

真的是无比郁闷，搞个小练习搞了快两个晚上，一直在怀疑是不是自己代码有问题，却死在了一句link的title图标上：事情是这样的：我开始自己写的代码，因为是初学，有一些点不会写就参照了下原码，问题就出在我明明和源码的各种代码一样啊，为什么死都出不来结果。一开始我各种查找，后来没有办法就开始一部分一部分把各部分的源码复制过来，把自己的注释掉检查，结果我把主部分所有代码都换了，还是出不来结果，我这心真是
复制链接

扫一扫