我写的代码看看哪里出问题了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己写的代码</title>
    <link rel="stylesheet" href="acss.css">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
</head>
<body>


    <div class="about" id="about">
        <div class="container">
            <div class="about-loading"></div>
        </div>
    </div>


    <div class="footer" id="footer">
        <div class="container">
            <div class="footer-loading"></div>
        </div>
    </div>
    
    <script src="js/jquery.js"></script>
    <script src="js/transition.js"></script>
    <script src="js/showHide.js"></script>
    <script src="js.js"></script>
</body>

</html>

.about{
   /* background-color: red; */
   margin-top: 1300px;
}

.about .container{
    height: 157px;
    width: 1200px;
    margin: 0 auto;
    /* background-color: red; */
}

.about-loading{
    width: 114px;
    height: 100%;
    margin: 0 auto;
    background: url(loading.gif) no-repeat center center;
}

.about-item-title{
    font-size: 17px;
    line-height: 37px;
    }

.about-item{

    width: 277px;
    padding: 35px 0 35px 23px;
}

.footer {
    width: 100%;
    background-color: #f3f5f7;
    /* height: 60px; */
    padding: 28px 0;
}

.footer .container{
    height: 157px;
    width: 1200px;
    margin: 0 auto;
}

.footer-loading{
    left: -200px;
    width: 114px;
    height: 100%;
    margin: 0 auto;
    background: url(loading.gif) no-repeat 0 30px;
}

     

.about-item-detail .link{

    display: inline-block;
    
    font-size: 13px;
    
    line-height: 25px;
    
    margin-right: 20px;
    
    color: #93999f;
    
    }

.about-item{
    /* background-color: red; */
}

(function($) {
    'use strict';
    // lazyLoad
    var lazyLoad={};
    lazyLoad.$win=$(window);

    lazyLoad.isVisible=function(option){
        var $win=lazyLoad.$win;
        return $win.height()+$win.scrollTop()>option.offsetTop && $win.scrollTop() < option.offsetTop+option.height;
    }

// about
var about ={};
about.$about=$('#about');
about.options={};
about.$container=about.$about.find('.container');
about.options.offsetTop=about.$about.offset().top;
about.options.height=about.$about.height();

about.data=[
        {
        title:'消费者保障',
        detail:['保障范围','退货退款流程','服务中心','更多特色服务']
        },
        {
        title:'新手上路',
        detail:['新手专区','消费警示','交易安全','24小时在线帮助','免费开店']
        },
        {
        title:'付款方式',
        detail:['快捷支付','信用卡','余额宝','蜜蜂花啊','货到付款']
        },
        {
        title:'慕淘特色',
        detail:['手机慕淘','慕淘信','大众评审','B格指南']
        }
]

about.buildAboutHtml=function(){
    var html='';

    for(var i=0;i<about.data.length;i++){
        html+='<dl class="about-item fl><dt class="about-item-title">'+about.data[i].title+'</dt><dd class="about-item-detail">'

        for(var j=0;j<about.data[i].detail.length;j++){
            html+='<a herf="###" target="_blank" class="link">'+about.data[i].detail[j]+'</a>';
        }
        
        html+='</dd>';
        html+='</dl>';
    }

    return html;
};

about.aboutshow=function(){
    var html='';
    if(lazyLoad.isVisible(about.options)){
        html=about.buildAboutHtml();
        about.$container.html(html)
    }
};

// footer
var footer ={};
footer.$footer=$('#footer');
footer.$container=footer.$footer.find('.container');
footer.options={};
footer.options.offsetTop=footer.$footer.offset().top;
footer.options.height=footer.$footer.height();

footer.data=['关于慕淘','合作伙伴','营销中心','廉政举报','联系客服','开放平台','诚征英才','联系我们','网站地图','法律声明','知识产权'];

footer.buildfooterHtml=function(){
    var html='';
    html+='<p class="footer">'

    for(var i=0;i<footer.data.length;i++){
        html+='<a>'+footer.data[i]+'</a>';
    }
    
    html+='</p><p class="site-right">&copy; 2017 imooc.com All Rights Reserved</p>'
}

footer.footershow=function(){
    var html='';
    if(lazyLoad.isVisible(footer.options)){
        html=footer.buildfooterHtml();
        footer.$container.html(html);
    }
};


lazyLoad.$win.on('scroll resize',function(){
    clearTimeout();
    lazyLoad.lazyLoadTimer=setTimeout(function(){
        footer.footershow();
        about.aboutshow();
    },3000)
})



})(jQuery);

老师我写的代码fl样式无法生效，，css 的class写的一些样式也不能生效还有写的延时3秒出现的那个也没生效自动就出现了。。另外那个footer的为什么显示不出来？ about的 fl不生效是什么原因。。总体问题好多老师我实在不知道从哪里找问题从哪里下手能不能说一下如何找问题的思路还有问题出现在哪里了

陈立天 2020-06-30

源自：实战：楼层模块组件化 5-4 自由编程