基于HTML+CSS+JS的学堂在线首页静态页面源码

1、HTML代码：

    
        
        
        
          
    

    
        

            

                

                    
                    
• 
                          首页
                      

                    
• 
                          全部课程
                      

                    
• 
                          学堂云
                      

                    
• 
                          雨课堂
                      

                    
• 
                          学分课
                      

                    
• 
                          更多 v
                      

                

            

            

                
                
            

            

                登录
            

            

                注册
            

        

        

            

                
                
                
            

            

                
                
                
                
                
                
            

            

                

新课速递

                

千呼万唤始出来，本月新课抢先看！

            

            

            

            

            

            

            

            

            

            

                

---

                

训练营

                

修炼CS内功，引领AI时代

            

            

            

            

            

            

        

    

2、css代码：

body {
    margin: 0px;
    padding: 0px;
}
/*head样式*/
.head {
    width: 100%;
    height: 100px;
}

.menu {
    position: absolute;
    left: 20px;
    top: 20px;
}

.head_logo {
    width: 140px;
    height: 43px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;/*图片与文字中心对齐*/
}

.head ul {
    list-style-type: none;
    margin: 0px;
    padding: 10px;
    overflow: hidden;
}

.head ul li {
    display: inline;/*水平*/
}

.head ul li a:link,
a:visited {
    text-decoration: none;/*去掉链接底线*/
    color: black;
    width: 120px;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    text-transform: uppercase;
}

.head ul li a:hover,
a:active {
    color: #4182fa;
}

.search {
    position: absolute;
    left: 800px;
    top: 25px;
    border: 1px solid #ebebeb;
    height: 30px;
    width: 300px;
    padding: 7px 16px;
    border-radius: 4px;
    background-color: #fcfcfc;
}

.search_data {
    width: 220px;
    height: 26px;
    font-size: 20px;
    border: none;/*去掉input的框*/
    outline: none;/*去掉input输入时的框*/
    line-height: 26px;
    font-family: inherit;
}

.search_logo {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 250px;
    top: 10px;
}

.login{
    position: absolute;
    left: 1120px;
    top: 30px;
}

.login a{
    text-decoration:none ;
    font-size: 20px;
}

.regin{
    position: absolute;
    left: 1200px;
    top: 28px;
    width: 120px;
    height: 40px;
    background-color: blue;
    text-align: center;
    border-radius: 20px;
    line-height: 40px;
    
}

.regin_btn{
    font-size: 20px;
    color: white;
    background-color: blue;
    border: none;
    outline: none;
}

.lunbo{
}

.imgOne{
    width: 100%;
    height: 500px;
    display: block;
}

.imgOther{
    width: 100%;
    height: 500px;
    display: none;
}

.imglogo{
    display: inline;
    width: 14%;
    padding: 15px;
}

.newClass{
    width: 97.5%;
    margin-left: 18px;
}

.newClass_tile{
    display: inline;
}

.newClass_con{
    display: inline;
    margin-left: 10px;
}

.newClass1{
    float: left;
    width: 23%;
    height: 200px;
    background-color: blue;
    margin-left: 24px;
    margin-top: 10px;
}
.newClass2{
    float: left;
    width: 23%;
    height: 200px;
    background-color: red;
    margin-left: 24px;
    margin-top: 10px;
}

.newClass3{
    float: left;
    width: 23%;
    height: 200px;
    background-color: green;
    margin-left: 24px;
    margin-top: 10px;
}

.newClass4{
    float: left;
    width: 23%;
    height: 200px;
    background-color: yellow;
    margin-left: 24px;
    margin-top: 10px;
}

.train{
    position: relative;
    top: 40px;
    left: 24px;
    width: 96.7%;
    height: 100px;
}

.train1{
    float: left;
    width: 23%;
    height: 200px;
    background-color: blue;
    margin-left: 24px;
    margin-top: 100px;
}
.train2{
    float: left;
    width: 23%;
    height: 200px;
    background-color: red;
    margin-left: 24px;
    margin-top: 100px;
}

.train3{
    float: left;
    width: 23%;
    height: 200px;
    background-color: green;
    margin-left: 24px;
    margin-top: 100px;
}

.train4{
    float: left;
    width: 23%;
    height: 200px;
    background-color: yellow;
    margin-left: 24px;
    margin-top: 100px;
}

3、js代码：

var index = 0;
//改变图片
function ChangeImg(){
    index++;
    var imgClass = document.getElementsByClassName("img_slide");
    if(index >= imgClass.length)
    {
         index = 0;
    }
    for(var i = 0; i< imgClass.length;i++){
         imgClass[i].style.display = 'none';
    }
    imgClass[index].style.display = 'block';
}
//设置定时器，每隔两秒切换一张图片
setInterval(ChangeImg,2000);
 

4、图片：

beijing.png
fudan.png
guofang.png
jiaoshou.png
microsoft.png
qinghua.png
renzheng.png
search.png
xian.png
xuetangzaixian.png
xuetangzaixianlogo.png
xuewei.png

5、效果：