index.html的显示效果不正确

按照老师的做法在common.css把下拉箭头的宽高都删除了，可是控制台显示index.css里面的宽高还生效，也没见老师删除呀，在控制台去掉index.css的宽、高、背景图片后箭头消失了那个方框还在，不知道为什么

不知道还有没有其他的问题，麻烦老师帮忙看一下

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>慕淘网</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <div class="nav-site">
        <div class="container">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
                <li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
                <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link">我的慕淘<i
                class="dropdown-arrow icon transition"></i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link">收藏夹<i
                class="dropdown-arrow icon transition"></i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link">商品分类</a>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link">卖家中心<i
                class="dropdown-arrow icon transition"></i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
                        <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li>
                    </ul>
                </li>
                <li class="nav-site-service menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link">联系客服<i
                class="dropdown-arrow icon transition"></i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <script>
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script src="js/index.js"></script>
    <script src="js/dropdown.js"></script>
</body>

</html>

base.css

/*css reset*/
    /*清除内外边距*/
    body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
    ul, ol, li, dl, dt, dd, /*列表元素*/
    form, fieldset, legend, input, button, select, textarea, /*表单元素*/
    th, td, /*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }

    /*重置默认样式*/
    body, button, input, select, textarea {
        /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
        color: #333;
        font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em, i {
        font-style: normal;
    }

    a {
        text-decoration: none;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        /*display: block;*/
        vertical-align: top;
    }
    textarea {
        overflow: auto;
        resize: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }

/*常用公共样式*/
    .fl {
        float: left;
        display: inline;
    }
    .fr {
        float: right;
        display: inline;
    }
    .cf:before,
    .cf:after {
        content: " ";
        display: table;

    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

common.css

/* 公共样式 */
.container {
    width: 1200px;
    margin: 0 auto;
}

.link {
    color: #4d555d;
}

.link:hover {
    color: #f01414;
}

.transition {
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* font */
@font-face {
    font-family: "iconfont";
    src: url('font/iconfont.eot?t=1477124206');
    /* IE9*/
    src: url('font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('font/iconfont.woff?t=1477124206') format('woff'),
        /* chrome, firefox */
        url('font/iconfont.ttf?t=1477124206') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('font/iconfont.svg?t=1477124206#iconfont') format('svg');
    /* iOS 4.1- */
}

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

/* dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    position: relative;
    z-index: 2;
}

.dropdown-arrow {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.dropdown-layer {
    display: none;
    position: absolute;
    z-index: 1;
}

.dropdown-left {
    left: 0;
    right: auto;
}

.dropdown-right {
    right: 0;
    left: auto;
}

[class*='-active'] .dropdown-arrow {
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);

}

/* menu dropdown */
.menu .dropdown-toggle {
    display: block;
    height: 100%;
    padding: 0 13px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

.menu .dropdown-arrow {
    margin-left: 5px;
}

.menu .dropdown-layer {
    top: 43px;
    background-color: #fff;
    border: 1px solid #cdd0d4;
}

.menu-item {
    display: block;
    height: 30px;
    line-height: 30px;
    color: #4d555d;
    white-space: nowrap;
    padding: 0 12px;
}

.menu-item:hover {
    background-color: #f3f5f7;
}

.menu-active .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}

.menu-active .dropdown-layer {
    display: block;
}

index.css

/* nav-site */
.nav-site {
    width: 100%;
    background-color: #f3f5f7;
}

.nav-site .container {
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}

.nav-site-login {
    color: #f01414;
    margin-left: 15px;
}

.nav-site-signup,
.nav-site-mobile {
    margin-left: 10px;
}

.nav-site-category {
    margin: 0 10px;
}

.nav-site-service {
    margin-right: 15px;
}

/* dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    padding: 0 16px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

.dropdown-arrow {
    display: inline-block;
    width: 8px;
    height: 6px;
    background: url(../img/dropdown-arrow.png) no-repeat;
    margin-left: 8px;
    vertical-align: middle;
}

.dropdown-layer {
    display: none;
    position: absolute;
    top: 43px;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #cdd0d4;
}

.dropdown-left {
    left: 0;
    right: auto;
}

.dropdown-right {
    right: 0;
    left: auto;
}

.dropdown-item {
    display: block;
    height: 30px;
    line-height: 30px;
    color: #4d555d;
    white-space: nowrap;
    padding: 0 12px;
}

.dropdown-item:hover {
    background-color: #f3f5f7;
}

index.js

$('.dropdown').dropdown();

dropdown.js

(function ($) {
    'use strict';

    function dropdown(elem) {
        var $elem = $(elem),
            activeClass = $elem.data('active') + '-active';

        $elem.hover(function () {
            $elem.addClass(activeClass);
        }, function () {
            $elem.removeClass(activeClass);
        })
    }

    $.fn.extend({
        dropdown: function () {
            return this.each(function () {
                dropdown(this);
            });
        }
    });

    $('.dropdown').dropdown();
})(jQuery);

Aurora_Meteor 2020-04-12

源自：实战：下拉菜单组件化 1-5 下拉箭头旋转的实现

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-04-12 17:51:16

同学你好，问题解答如下：

1、字体实现不了，报错是找不到，可能font文件没有引入正确。课程中的关系为

index.html和test文件夹是同级的，需要先找到test，再找font

2、报错$(...).dropdown is not a function错误是引入js文件顺序的问题。

dropdown.js文件中定义了dropdown方法，所以需要先引入dropdown.js文件才能在index.js中使用dropdown方法，参考修改

和严格模式'use strict'没有关系。

如果还有问题，可以将文件夹关系截图粘贴上来，老师看一下。

祝学习愉快！

收起回答

提问者 Aurora_Meteor 2020-04-12 10:36:11

而且我在dropdown.html里面的实现效果是正确的，并没有那个框，但是在index.html这里那个字体不知道为什么没有生效，出现的箭头是index.css里面的背景图片

收起回答

提问者 Aurora_Meteor #1

我把每个源代码的每个文件里的代码一个一个复制到我写的里面刷新后还是显示不出来，而且发现控制台一直有如下错误： ①GET file:///C:/Users/Dell/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/test/font/iconfont.woff?t=1477124206 net::ERR_FILE_NOT_FOUND index.html:67 ②Uncaught TypeError: $(...).dropdown is not a function at index.js:36 index.js:36 一个说找不到jQuery文件，一个说dropdown不是一个函数，可是我两个东西都在的啊...

2020-04-12 12:49:32
提问者 Aurora_Meteor #2

而且我发现源代码里面，老师把dropdown.js里面一开始写的那个严格模式'use strict'删除了，可是视频里没有看到老师删除，我删除了发现也没有实现效果

2020-04-12 12:51:35