• TML+CSS+JS大作业：腾讯课堂首页 1页 侧拉菜单

    ⛵ 源码获取 文末联系 ✈

    Web前端开发技术
    描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页

    1. HTML：结构

    2. CSS：样式
      在操作方面上运用了html5和css3，
      采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

    3. JavaScript：做与用户的交互行为

    文章目录

    前端学习路线

    （1）html文件：其中index.html是首页、其他html为二级页面；
    （2）css文件：css全部页面样式,文字滚动, 图片放大等；
    （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

    网页基本结构

    (1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
    (2)二级页面：从首页点击进入之后的页面叫做二级页面
    (3)三级页面：从二级页面点击进入的页面

    网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
    首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
    导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
    网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

    网页演示

    在这里插入图片描述

    HTML结构代码

    

doctype html>
<html>
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <title>腾讯课堂首页title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">
        <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1652954723262/images/favicon.ico">
        
        <style type="text/css">
            *{margin:0;padding:0}
            body{font-size:12px;font-family:"微软雅黑";cursor:default;background-color:#fff}
            .clear{clear:both;}
            /*滚动条宽度*/  
            ::-webkit-scrollbar{width:10px;background-color:#dedbde;}  
               
            /* 轨道样式 */  
            ::-webkit-scrollbar-track {}  
               
            /* Handle样式 */  
            ::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);min-height: 28px;}  
              
            /*当前窗口未激活的情况下*/  
            ::-webkit-scrollbar-thumb:window-inactive {  
                padding-top:100px;
                -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1),inset -1px -1px 0 rgba(0,0,0,0.07);
                background-clip:padding-box;background-color:#dadada;
                min-height:28px;-webkit-border-radius:4px;
                -moz-border-radius:4px;border-radius:4px   
            }  
              
            /*hover到滚动条上*/  
            ::-webkit-scrollbar-thumb:vertical:hover{  
                background-color: rgba(0,0,0,0.4);      
            }  
            /*滚动条按下*/  
            ::-webkit-scrollbar-thumb:vertical:active{  
                background-color: rgba(0,0,0,0.5);  
            }  
            /*header start*/
            .header{
                width:1200px;height:85px;margin:0 auto;
                padding-top:15px
            }
            .header h1{
                float:left;margin-top:3px;
            }
            .header h1 a{
                
            }
            .header .search{
                width:450px;height:36px;
                float:left;margin-left:220px;
                border:2px solid #188eee;
                position:relative;
            }
            .header .search input{
                width:370px;height:30px;border:0;line-height:30px;*position:absolute;
                outline:0;color:#545454;font-family:"微软雅黑";*left:0;
                font-size:12px;padding:3px 10px;-webkit-writing-mode: horizontal-tb;

            }
            .header .search a{
                display:inline-block;width:58px;height:36px;
                position:absolute;right:0;line-height:36px;
                text-align:center;background:#188eee    
            }
            .header .search a i{
                display:inline-block;width:20px;height:20px;
                background:url("picture/icon-search-white.png");
                margin-top:9px;margin-left:3px;
            }
            .header a{
                text-decoration:none
            }
            .header .login{
                height:40px;float:right;color:#dedede;
                line-height:40px;margin-top:2px;
            }
            .header .login a{
                color:#333;padding:0 0 0 6px;
            }
            /*end header*/

            /*banner start*/
            .banner{
                width:100%;height:350px;
            }
            /*little-banner start*/
            .banner .little-banner{
                width:1200px;height:50px;position:relative;
                margin:0 auto;
            }
            .banner .little-banner a{
                position:absolute;left:220px;
                padding:0;height:50px;
            }
            /*end little-banner*/

            /*big-banner start*/
            .banner .big-bg{
                height:300px;background:#a534d6;
            }
            .banner .big-bg .big-banner{
                width:1200px;height:300px;margin:0 auto;
                position:relative;
            }
            /*big-banner-ul start*/
            .banner .big-bg .big-banner .big-banner-ul{
                width:220px;height:476px;position:absolute;
                top:-50px;background:#188eee;
            }
            .big-banner-ul #course i{
                display:inline-block;width:18px;height:14px;
                background:url("picture/button.png") no-repeat center;
                background-position:-126px -163px;
                margin:0 10px -1px 15px;
            }
            .big-banner-ul #course{
                display:block;width:220px;height:50px;
                line-height:50px;
            }
            .big-banner-ul .course{
                text-decoration:none;color:white;font-size:16px;
                
            }
            .big-banner-ul .course:hover{
                text-decoration:underline;
            }
            .big-banner-ul ul{
                list-style:none;
            }
            .big-banner-ul ul .course-li{
                width:205px;height:59px;padding-top:11px;
                padding-left:15px;border-bottom:1px solid #1681c4;
                background:#0477C0;position:relative;
            }
            .big-banner-ul ul .course-li:hover{
                background:#0264a3;
            }
            .big-banner-ul ul .course-li .course{
                line-height:24px;display:block
            }
            .big-banner-ul ul .course-li i{
                display:inline-block;width:6px;height:12px;
                position:absolute;top:18px;right:16px;
                background:url("picture/button.png");
                background-position:-147px -163px;
            }
            .li-hover{
                background-position:-157px -163px;
            }
            .big-banner-ul ul .course-li .course-hot{
                display:inline-block;height:21px;
                margin-right:8px;color:#97d2f7;text-decoration:none;
                font-size:14px;margin-top:5px;
            }
            .big-banner-ul ul .course-li .course-hot:hover{
                text-decoration:underline;
            }
            .big-banner-ul .course-list{
                width:446px;position:absolute;
                top:0;left:220px;z-index:1;
                background:rgba(255,255,255,0.95);
                *background:#fff;
                /*opacity:0.95;filter:alpha(opacity=95);*/
                border:2px solid #09699c;display:none
            }
            .big-banner-ul .course-list ul{
                width:382px;
                margin:0 auto;list-style:none;
            }
            .big-banner-ul .course-list ul li{
                border-bottom:1px solid #e5e5e5;                
                width:382px;padding:15px 0 12px;
            }
            .big-banner-ul .course-list ul li .course-child{
                color:#039ae3;font-weight:bold;font-size:14px;
                text-decoration:none;width:80px;float:left;
                margin-top:1px;
            }
            .big-banner-ul .course-list .course-child-list{
                width:297px;
                display:inline-block;
            }
            .big-banner-ul .course-list .course-child-list a{
                display:inline-block;width:91px;height:21px;
                text-decoration:none;color:#333;font-size:14px;
                margin-bottom:3px;
            }
            .big-banner-ul .course-list .course-child-list a:hover{
                color:#63b6f7;
            }
            /*end big-banner-ul*/

            /*big-banner-img start*/
            .banner .big-bg .big-banner .big-banner-img{
                width:760px;height:300px;overflow:hidden;
                position:absolute;top:0;left:220px;*z-index:-1
            }
            .banner .big-bg .big-banner .big-banner-img #ban-ul li{
                list-style:none;float:left;
            }
            .img-hide{
                display:none;
            }
            .on{
                display:block;
            }
            .big-banner-img #ban-nav{
                width:140px;height:24px;position:absolute;          
                bottom:15px;left:50%;list-style:none;
                margin-left:-70px;border-radius:24px;
                background:rgba(0,0,0,0.1);
                /*opacity:0.9;filter:alpha(opacity=90);*/
            }
            .big-banner-img #ban-nav li{
                float:left;width:10px;height:10px;
                margin:8px -17px 0 25px;
                background:url("picture/button.png");
                background-position:-87px -116px;
            }
            .ban-button{
                display:none;width:46px;height:70px;position:absolute;
                top:110px;background:url("picture/button.png");
            }
            .ban-pre{               
                left:10px;
                background-position:-74px 0;
            }
            .ban-next{              
                right:10px;
                background-position:-123px 0;
            }
            /*end *big-banner-img */

            /*big-banner-board start*/
            .banner .big-bg .big-banner .big-banner-board{
                width:220px;height:260px;position:absolute;
                top:20px;right:0;background: rgba(0,0,0,0.4);
                /*opacity:0.8;filter:alpha(opacity=80);*/
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
            }
            .banner .big-bg .big-banner .big-banner-board ul{
                list-style:square;padding:0 0 0 15px ;margin-left:20px;
                font-size:14px;
            }
            .big-banner-board ul li{
                padding:13px 0 1px;color:white;
            }
            .big-banner-board  a{
                color:white;text-decoration:none;
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
            }
            .big-banner-board div{
                color:white;position:relative;
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
            }
            .big-banner-board ul li a:hover{
                text-decoration:underline;
            }
            .big-banner-board .button{
                width:110px;height:110px;text-align:center;
                display:inline-block;margin-top:14px;float:left;
                background:rgba(0,0,0,0.2);
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
                /*opacity:0.8;filter:alpha(opacity=80);*/
                
            }
            .big-banner-board .button:hover{
                background:rgba(0,0,0,0.3);
                /*opacity:0.7;filter:alpha(opacity=70);*/
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)
            }
            .big-banner-board .button i{
                display:inline-block;width:44px;height:44px;            
                margin-top:10px;margin-right:2px;
            }
            .big-banner-board .button .download{
                background:url("picture/button.png");
                background-position:-123px -73px;
            }
            .big-banner-board .button i + p{
                font-size:16px;margin-top:3px;margin-bottom:2px
            }
            .big-banner-board .button .weixin{
                background:url("picture/button.png");
                background-position:-172px -73px;
            }
            .big-banner-board #board-qr img{
                position:absolute;top:-7px;left:-112px;
                display:none;
            }
            /*end big-banner-board*/

            /*end big-banner*/

            /*end banner*/
            
            /*course-actives start*/
            .course-actives{
                width:980px;height:125px;margin:0 auto;
                border-right:1px solid #eaeaea;
                border-bottom:1px solid #eaeaea;
                padding-left:220px;
            }
            .course-actives a{
                display:inline-block;margin-left: 0px;
                margin-right: -4px;
            }
            /*end course-actives*/
            
            /*course_hot start*/
            .course_hot{
                width:1200px;height:481px;margin:0 auto;padding:40px 0 20px 0;
                
            }
            .course_hot1{
                height:280px;
            }
            .first-course{
                height:271px
            }
            .course_hot .course-hot-nav{
                width:1200px;height:40px;border-bottom:1px solid #ddd;
                position:relative;
            }
            .course_hot .course-hot-nav h2{
                font-weight:normal;height:36px;float:left;
            }
            .course_hot .course-hot-nav h2 .hot-tittle{
                font-size:22px;width:222px;line-height:24px;
                display:inline-block;color:#202020;
                text-decoration:none;
            }
            .course_hot .course-hot-nav h2 .hot-tittle:hover{
                color:#62b4f7
            }
            .course_hot .course-hot-nav h2 .hot-tittle2{
                width:466px;
            }
            .course_hot .course-hot-nav ul{
                float:left;width:970px;height:36px;
            }
            .course_hot .course-hot-nav .job-menu{
                width:730px
            }
            .course_hot .course-hot-nav ul li{
                float:left;list-style:none;font-size:14px;height:40px;
            }
            .course_hot .course-hot-nav ul li a{
                text-decoration:none;display:block;width:90px;
                text-align:center;color:#333;margin-top:8px;
            }
            .course_on{
                color:#188eee;
            }
            .course_li_on{
                border-bottom:2px solid #188eee;
            }
            .course_hot .course-hot-nav ul li a i{
                width:18px;height:18px;display:inline-block;
                background:url("picture/button.png");
                background-position:-49px -99px;
                margin-right:5px;vertical-align:-4px;
                *height:22px;
            }
            .course_hot .course-hot-menu{
                padding-top:30px;height:200px;
            }
            .course_hot .course-hot-menu ul{
                list-style:none;width:1220px;height:200px;
            }
            .course_hot .course-hot-menu ul li{
                float:left; width:220px;height:124px;
                margin-left:-10px;margin-right:34px;
            }
            .course_hot .menu-course-card{
                width:232px;height:180px;border:1px solid transparent;
                padding:10px 0px 8px 11px;font-size:14px;
            }
            .course_hot .menu-course-card:hover{
                border:1px solid #dddddd;
            }
            .course_hot .menu-course-card .course-img{
                display:block;width:220px;height:124px;position:relative;
            }
            .course_hot .menu-course-card .course-img .icon-card-play{
                position:absolute;background:url("picture/icon-card-play.png");
                width:30px;height:30px;bottom:10px;left:10px;
            }
             .course-description{
                display:block;color:#333;
                white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
                overflow:hidden;text-decoration:none;
            }
            .course_hot .menu-course-card .course-description:hover{
                color:#62B4F7;
            }
            .course_hot .menu-course-card p{
                padding-top:2px;color:#dedede;
            }
            .course_hot .menu-course-card .free{
                color:#5FB41B;display:inline-block;vertical-align:4px;
                *height:16px;
            }
            .course_hot .menu-course-card .charge{
                color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
            }
            .course_hot .menu-course-card .symbol{
                display:inline-block;vertical-align:4px;margin-right:4px;
                *height:16px;
            }
            .course_hot .menu-course-card p a{
                color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;width:128px;
            }
            .course_hot .menu-course-card p a:hover{
                color:#62B4F7;
            }
            /*end course_hot*/

            /*catalog start*/
            .course_hot .catalog-menu{
                height:200px;margin-top:-2px;position:relative
            }
            .course_hot .box{
                border-bottom:0;
            }
            .course_hot .catalog-menu .mod-catalog-box{
                display:inline-block;width:240px;height:420px;float:left;
                margin-left:-20px;position:absolute;top:1px;left:0;
            }
            .course_hot .catalog-menu .mod-catalog-box2{
                margin-left:0;height:220px;
            }
            .course_hot .catalog-menu .catalog-menu-div ul{
                list-style:none;width:734px;float:left;
                margin-top:20px;margin-left:242px;
            }
            .course_hot .catalog-menu .catalog-menu-div .catalog-menu-ul{
                margin-left:491px;
            }
            .course_hot .catalog-menu .catalog-menu-div ul li{
                float:left; width:220px;height:124px;
                margin:0 34px 76px -10px;
            }
            
            .course_hot .menu-course-card{
                width:232px;height:180px;border:1px solid transparent;
                padding:10px 0px 8px 11px;font-size:14px;
            }
            .course_hot .menu-course-card:hover{
                border:1px solid #dddddd;
            }
            .course_hot .menu-course-card .course-img{
                display:block;width:220px;height:124px;position:relative;
            }
            .course_hot .menu-course-card .course-img .icon-card-play{
                position:absolute;background:url("picture/icon-card-play.png");
                width:30px;height:30px;bottom:10px;left:10px;
            }
            .course_hot .menu-course-card .course-description{
                display:block;color:#333;
                white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
                overflow:hidden;text-decoration:none;
            }
            .course_hot .menu-course-card .course-description:hover{
                color:#62B4F7;
            }
            .course_hot .menu-course-card p{
                padding-top:2px;color:#dedede;
            }
            .free{
                color:#5FB41B;display:inline-block;vertical-align:4px;
                *height:16px;
            }
            .charge{
                color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
            }
            .course_hot .menu-course-card .symbol{
                display:inline-block;vertical-align:4px;margin-right:4px;
                *height:16px;
            }
            .course_hot .menu-course-card p a{
                color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;width:128px;
            }
            .course_hot .menu-course-card p a:hover{
                color:#62B4F7;
            }

            .course_hot .catalog-menu .course-rank{
                width:242px;height:390px;float:right;
                margin-top:28px;margin-right:-24px;
            }
            .course_hot .catalog-menu .rank-type{
                width:218px;height:29px;list-style:none;
                border-bottom:1px solid #dfdfdf;margin-top:3px;
            }
            .course_hot .catalog-menu .rank-type li{
                float:left;height:29px;text-align:center;
                width:105px;font-size:16px;
                color:#999;padding-left:1px
            }
            .course_hot .catalog-menu .rank-type li:last-child{
                padding-left:5px
            }
            .rank-type-sel{
                color:#331 ! important;border-bottom:1px solid #188eee
            }
            .course_hot .catalog-menu .course-rank .rank-menu{
                margin-right:1px;width:242px;
            }
            .course_hot .catalog-menu .course-rank .rank-menu ul{
                list-style:none;text-align:center;margin-top:10px;margin-left:-11px
            }
            .course-rank .rank-menu .rank-menu-ul li{
                width:218px;height:32px;padding:0 12px;line-height:26px;
            }
            .course-rank .rank-menu .rank-menu-ul li:hover{
                background:#e5e5e5;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first{
                height:83px;padding:6px 12px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num{
                display:inline-block;width:18px;height:18px;
                background:url("picture/button.png");float:left;margin-left:1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-1{
                background-position:-105px -163px;margin:5px 11px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-2{
                background-position:-84px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-3{
                background-position:-21px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-4{
                background-position:-174px -130px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-5{
                background-position:-49px -57px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-6{
                background-position:0 -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-7{
                background-position:-63px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-8{
                background-position:-42px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-9{
                background-position:-195px -130px;margin:7px 14px 0 -1px;   
            }
            .rank-menu-num-1,.rank-menu-num-2,.rank-menu-num-3,.rank-menu-num-4,.rank-menu-num-5,.rank-menu-num-6,.rank-menu-num-7,.rank-menu-num-8,.rank-menu-num-9{
                *margin-right:1px
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content{
                display:inline-block;width:184px;height:84px;
                float:left;
            }
            .rank-description{
                display:block;color:#333;font-size:14px;
                white-space:nowrap;text-overflow:ellipsis;width:180px;
                overflow:hidden;text-decoration:none;margin-left:3px;
                margin-bottom:3px;*margin-left:-5px;text-align:left;
            }
            .rank-description-other{
                line-height:31px;text-align:left;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-free-img{
                *float:left;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content span{
                font-size:14px; display:block;margin-top:-1px;margin-bottom:3px;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-college{
                color:#999;text-decoration:none;display:inline-block;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;margin-left:-6px;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-menu-course{
                float:right;width:96px;margin-left:-8px;
            }

            /*end catalog*/

            /*agency-div start*/
            .agency-div{
                height:95px;padding:80px 33px;
                width:1200px;
            }
            .agency-div .agency-apply{
                width:96px;height:96px;float:left;
            }
            .agency-apply h3{
                font-size:22px;font-weight:normal;margin-top:21px;
                margin-bottom:4px;display:block
            }
            .agency-div .apply{
                font-size:14px;color:#188eee;
                text-decoration:none;
            }
            .agency-div .agency-list{
                width:1090px;height:92px;margin-left:14px;
                float:left;position:relative;overflow:hidden;
            }
            .agency-pre,.agency-next{
                width:26px;height:30px;display:block;position:absolute;
                top:35px;background:url("picture/button.png");
            }
            .agency-list .agency-pre{
                left:0px;background-position:-58px -130px;
            }
            .agency-list ul{
                list-style:none;margin-left:45px;position:absolute;
            }
            .agency-list ul li{
                float:left;padding-right:26px;
            }
            .agency-list ul li a{
                display:inline-block;border:1px solid #eee;
            }
            .agency-list .agency-next{
                right:0px;background-position:-116px -130px;
            }
            /*end agency-div*/

            /*cooperation-div start*/
            .cooperation-div{
                width:1200px;height:250px;background:#444546;
                padding:41px 33px;
            }
            .cooperation-div h3{
                font-size:22px;color:#999;font-weight:normal;
                
            }
            .cooperation-div ul{
                list-style:none;margin-top:27px;border-bottom:1px solid #4a4b4c;height:53px;
            }
            .cooperation-div ul li{
                float:left;margin-right:40px;
            }
            .cooperation-div ul li a{
                text-decoration:none;color:#999;font-size:14px
            }
            .cooperation-div ul li a:hover{
                text-decoration:underline;
            }
            .cooperation-div .icon-logo-bottom{
                margin:0 auto;width:42px;height:32px;display:block;
                background:url("picture/icon_logo_bottom.png");
                margin-top:40px;margin-bottom:5px;
            }
            .cooperation-div p{
                text-align:center;color:#777;line-height:24px;
            }
            /*end cooperation-div*/

            /*jump-container start*/
            .jump-container{
                width:50px;height:120px;position:fixed;
                right:20px;bottom:50px;
            }
            .jump-top,.support{
                display:block;
            }
            .jump-container .jump-container-div div{
                width:50px;height:82px;overflow:hidden;cursor:pointer;position:absolute;top:0
            }
            .jump-container div .jump-plane{
                background:url("picture/jump-plane.png") no-repeat;
                display:block;width:42px;height:56px;position:absolute;top:82px;left:3px
            }
            .jump-top{
                width:42px;height:56px;opacity:0;filter:alpha(opacity=0);
                background:url("picture/bg-side-jump.png") no-repeat;
                background-position:0px 7px;
                margin-top:23px;margin-left:4px
            }
            .jump-top-hover{
                background:url("picture/bg-side-jump-hover.png") no-repeat;
                background-position:-4px -25px
            }
            .support{
                width:40px;height:40px;
                background:url("picture/button.png") no-repeat;
                background-position:-74px -73px;margin-top:3px;
                margin-left:5px;position:absolute;
            }           
            .jump-container span{
                position:absolute;z-index:2;line-height:18px;color:white;
                width:40px;height:40px;font-size:14px;text-align:center;
                background:#188eee;margin-top:3px;margin-left:5px;cursor:pointer;display:none
            }
            /*end jump-container*/
        style>

    head>
<body>
        /*回到顶部点击事件*/
        $(".jump-container-div").find("div .jump-plane").click(function(){
            $('body,html').animate({scrollTop:0},"normal");
            $(".jump-container-div").find("div").animate({"top":-1300},"normal",function(){
                topFlag = false;
            });
            topFlag =true;
        })
    })
    /*自动定时切换banner图*/
    function loop_banner_change(){
        timer = setInterval(function(){
            $(".ban-next").trigger("click");
        },5000);
    }
    
    /*切换banner图特效*/
    function banner_change(index){
        $("#ban-nav li").eq(index).css("backgroundPosition","-74px -116px");
        $("#ban-nav li").eq(index).siblings().css("backgroundPosition","-87px -116px");
        var background=$("#ban-nav li").eq(index).data("color");
        $("#ban-ul a").stop();
        $("#ban-ul a:visible").hide();
        $("#ban-ul li").eq(index).find("a").fadeIn("slow").show();
        $(".big-bg").css("background",background);
    }
    /*延时加载*/
    function timeout(){
        var setTimer = setTimeout(function(){
            flag = true;
            clearTimeout(setTimer);
        },1000);
    }
script>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661
    • 662
    • 663
    • 664
    • 665
    • 666
    • 667
    • 668
    • 669
    • 670
    • 671
    • 672
    • 673
    • 674
    • 675
    • 676
    • 677
    • 678
    • 679
    • 680
    • 681
    • 682
    • 683
    • 684
    • 685
    • 686
    • 687
    • 688
    • 689
    • 690
    • 691
    • 692
    • 693
    • 694
    • 695
    • 696
    • 697
    • 698
    • 699
    • 700
    • 701
    • 702
    • 703
    • 704
    • 705
    • 706
    • 707
    • 708
    • 709
    • 710
    • 711
    • 712
    • 713
    • 714
    • 715
    • 716
    • 717
    • 718
    • 719
    • 720
    • 721
    • 722
    • 723
    • 724
    • 725
    • 726
    • 727
    • 728
    • 729
    • 730
    • 731
    • 732
    • 733
    • 734
    • 735
    • 736
    • 737
    • 738
    • 739
    • 740
    • 741
    • 742
    • 743

    学的反而越迷茫

    有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

    当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

    这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

    所以，放松心态吧，好好享受大学时光
    —————————————————

    学习更多

    关注我 | 点赞博文 | 每天带你涨知识

    在这里插入图片描述

  • 相关阅读:
    Windows bat 脚本设计-开机自启动服务的方法、bat 调用另外的 bat 脚本 -没有java环境也能运行jar，在不安装jdk下如何运行jar包
    MySQL关联数据表操作方式
    第一章《嵌入式系统原理与实践》--沈建华 王慈 清华大学出版社 课后部分习题个人答案
    智能手机收入和出货量双双下滑,造车成本不断增长,小米集团仍面临风险
    RK3399_安卓SDK编译报错解决方案整理
    基于android的物流管理系统APP(ssm+uinapp+Mysql)
    数码管的动态显示（三）
    360T7路由器进行WiFi无线中继教程
    在vue2项目中使用vue-quill-editor实现富文本编译器
    [译]2023年 Web Component 现状
  • 原文地址：https://blog.csdn.net/m1_46321522/article/details/127910853