xuecheng-online
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线教育平台-专注前端开发30年！</title>
    <style>
        *{
    margin:0;
    padding:0;
    list-style:none;
    text-decoration:none;
}
body{
    height: 2999px;
    background-color: #f3f5f7;
}
.w{
    width: 1201px;
    margin:auto;

}
.header{
    /* float:left; */
    /* background-color: #ffffff; */
    height: 101px;
}
.logo{
    float:left;
    padding-top:30px;
    margin-right:15px;
     width: 196px;
     height: 40px;

}

.nav ul{
    float:left;
}
.nav ul li{
    float:left;
    margin:35px 0 0 44px;
    text-decoration:none;
}
.nav ul li:hover{
    border-bottom:2px solid #00a4ff;

    padding-bottom:5px;
}
.nav ul li a{
    color:#050505;
    font-size:18px;
}
.nav ul li a:hover{
    color:#00a4ff;
}

.search{
    float:left;
    width: 411px;
    height: 40px;
    padding-top:30px;
    padding-left:95px;
    /* background-color: pink; */
}
.search input{
    float:left;
    width: 359px;
    height: 36px;
    border:1px solid #00a4ff;
    border-right:0;
    outline:none;
}
input::placeholder{
    padding-left:10px;
    /* color:pink; */
}
.search button{
    float:left;
    width: 50px;
    height: 36px;
    border:0;
    outline:none;
    background-image: url(../study/images/矩形\ 9.png);
}
.Sign-in img{
    padding-left:30px;
    padding-top:35px;
}
.Sign-in span{
    position:relative;
    top:-10px;
    left:2px;
    font-size:14px;
    color:#666666;
}

.banner{
    background-color: #1c036c;
    height: 421px;
    /* background-image: url(../study/images/banner2.png); */
}
.banner .box{
    height: 421px;
background-image: url(../study/images/banner2.png);
}
.banner .left{
    float:left;
}
.banner ul{
    float:left;
    height: 421px;
    width: 191px;
    background-color: rgba(0, 0, 0,.3);

}
.banner ul li a{
    /* display:inline-block; */
    font-size:14px;
    color:#ffffff;

}
.banner ul li a:hover{
    color:#00a4ff;
}
.banner ul li{
    /* float:left; */
    height: 45px;
    line-height: 45px;
    padding:0 20px 0 20px;
    /* margin-left:20px; */
}
.banner ul span{
    float:right;
}


.banner .right{
    float:right;
    margin-top:60px;
    width: 229px;
    height: 300px;
    background-color: #ffffff;
}
.banner .right h3{
    font-size :18px;
    color:#ffffff;
    /* line-height: 18px; */
    /* text-align: center; */
}
.banner .right h3 a:hover{
    color:#00a4ff;
}
.banner .title{
    width: 229px;
    height: 48px;
    background-color: #9bceea;
    line-height: 48px;
    text-align: center;
}
.banner .title h3{
    /* margin:auto; */
    padding-left:66px;
    padding-top:4px;
}
.banner .list{
    /* width: 53px;
    height: 70px; */
    margin:20px 20px 0 20px;
    margin-bottom:5px;
    /* padding-top:10px; */
    background-color: #ffffff;
    border-bottom:1px solid #a5a5a5;
}
.banner .list h3{
    font-size: 18px;
    color:#4e4e4e;
    font-weight:400;
}
.banner .list span{
    font-size:12px;
    color:#bdbdbd;
}
.banner  .a{
display: block;
font-size:16px;
color:#00a4ff;
border:1px solid #00a4ff;
width: 198px;
height: 38px;
line-height: 38px;
text-align: center;
margin-left:17px;
}

.sort{
    margin-top:10px;
    margin-bottom:35px;
    height: 60px;
    background-color: #ffffff;
}
.sort .sort-list:hover{
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0,.2);
}
 .sort .sort-list li,h3{
    /* display:inline-block; */
    float:left;

}
.sort .sort-list h3{
    padding:20px 35px 20px 35px;
    font-size:16px;
    color:#00a4ff;
}
.sort .sort-list li{
    margin:20px 0 20px 0;
    padding:0 30px 0 30px;
    border-left:1px solid #bfbfbf;
    font-size:16px;
    color:#050505;
}
.sort .sort-list h4{
    float:right;
    padding:25px 25px 25px 0;
    font-size: 14px;
    color:#00a4ff;
}
.dabox{
      /* width: 1202px; */
      height: 597px;
      background-color: #f3f5f7;
}
.core{
    width: 1300px;
}
.dabox .core h3{
    font-size:20px;
    font-weight:400;
    width: 1202px;
    height: 42px;
    background-color:#f3f5f7;
}
.dabox .core h6{
    position: relative;
    top:12px;
    left:-78px;
}
.core ul li{
    float:Left;
    margin-right:15px;
    margin-bottom:15px;
    width: 229px;
    height: 271px;
    background-color: #ffffff;
    /* filter:blur(5px); */
}
.core ul li:hover{
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0,.2);
    /* filter:blur(0); */
}
.core ul li img{
    width: 100%;
    height: 155px;
}
.core ul li h5{
    font-size :14px;
    /* color:#050505; */
    /* margin:25px 0 20px 25px; */
    padding-top:25px;
    margin-left:25px;
    font-weight:normal;

    /* color:blue; */
}
.core ul li p{
    font-size: 12px;
    color:#999999;
    padding-left:25px;
     margin-top:20px;

}
.core ul li  span{
    color:#ff7c2d;
}


.box-core{
    height: 433px;
    /* background-color: pink; */
    margin-top:38px;
}
/* .box-core .box-xiao{
    height: 392px;
    background-color: pink;
} */
.box-core  .title-nav{
    float:left;
    background-color: #f3f5f7;
    width: 100%;
    height: 41px;
}
.box-core .title-nav h3{
    font-size:20px;
    font-weight:400;
    color:#494949;
    padding-right:352px;

}
.title-nav h5{
    float:left;
    font-size:16px;
    /* color:#00a4ff; */
    font-weight:400;
    padding-right:70px;
    margin-top:7px;
}
.title-nav h6 {
    float:right;
    padding-right:32px;
    padding-top:5px;
    font-weight:400;
    font-size:12px;
    color:#a5a5a5;
}
.box-core .box-img .tu{
    float:left;
    padding-right:15px;
    width: 229px;
    height: 392px;
    /* float:left; */
}

.box-img ul li{
    float:left;
    width: 227px;
    height: 270px;
    background-color: #ffffff;
    /* padding-bottom:20px; */
    padding-right:16px;
}
.box-img ul{
    /* width: 1400px; */
}
.box-img ul li img{
    width: 100%;
}
.box-img ul li h4{
    font-size:14px;
    color:#050505;
    font-weight:400;
    padding-top:25px;
    padding-left:25px;
    padding-bottom:20px;
}
.box-img ul li:hover{
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0,.3);
}

.box-img ul li span{
    font-size:12px;
    color:#999999;
    padding-left:24px;
}
.box-img ul li span b{
    /* font-style:none; */
    font-weight:400;
    font-size:12px;
    color:#ff7c2d;

}
.u ul{
    margin-top:18px;
}
#i{
    padding-right:0;
}
.box-core #pic{
    margin-top:25px;
}


/* 清除浮动 */
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
/* 结束清除浮动 */
.botto{
    /* float:left; */
    margin-top:40px;
    width: 100%;
    height: 417px;
    background-color: #ffffff;
}
.botto img{
    padding:33px 0 25px 20px;
}
.botto p{
    font-size:12px;
    color:#666666;
    padding:0 0 17px 20px;
}
.botto .app{
    display: inline-block;
    border:1px solid #00a4ff;
    color:#00a4ff;
    /* background-color: #00a4ff; */
    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-left:20px;
}
.botto .app:hover{
    background-color: #00a4ff;
    color:#fff;
}

.Left-column{
    float:left;
}
.Right-column{
    float:right;
}

.botto .Right-column dl{
    float:left;
   /*  padding-top:35px;
    padding-left:85px;
    padding-right:30px; */
    padding:35px 30px 0 85px;

}
.botto .Right-column dl dt{
    font-size:16px;
    color:#333333;
    padding-bottom:15px;
}
.botto .Right-column dl dt dd{
    font-size:12px;
    color:#333333;
    /* line-height: 15px; */
}

    </style>
    <link rel="icon" type="image/x-icon" href="../study/images/形状25拷贝2.png">
    <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
    <div class="header w">
        <div class="logo">
            <img src="../study/images/logo.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="search" placeholder="请输入关键字" autocomplete="off">
            <button>

            </button>
        </div>

            <div class="Sign-in">
                <a href="#"><img src="../study/images/头像.png" alt="">
                <span>qq-leishui</span></a>
            </div>
    </div>

    <div class="banner">
        <div class="box w">
        <div class="left">
            <ul>
                <li><a href="#">前端开发<span>&gt;</span></a></li>
                <li><a href="#">后端开发<span>&gt;</span></a></li>
                <li><a href="#">移动开发<span>&gt;</span></a></li>
                <li><a href="#">人工智能<span>&gt;</span></a></li>
                <li><a href="#">商业预测<span>&gt;</span></a></li>
                <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                <li><a href="#">运维&测试<span>&gt;</span></a></li>
                <li><a href="#">UI设计<span>&gt;</span></a></li>
                <li><a href="#">产品<span>&gt;</span></a></li>
            </ul>
        </div>
        <div class="right">
            <div class="title">
            <h3>我的课程表</h3>
            </div>
            <div class="list">
                <h3><a href="#">继续学习 程序语言设计</a></h3>
                <span>正在学习-使用对象</span>
            </div>
            <div class="list">
                <h3><a href="#">继续学习 程序语言设计</a></h3>
                <span>正在学习-使用对象</span>
            </div> <div class="list">
                <h3><a href="#">继续学习 程序语言设计</a></h3>
                <span>正在学习-使用对象</span>

            </div>
            <a href="#" class="a">全部课程</a>
        </div>
        </div>
    </div>
    <div class="sort w">
         <div class="sort-list">
             <h3>精品推荐</h3>
             <ul>
                 <li>
                     <a href="#">JQuery</a>
                 </li>
                 <li>
                    <a href="#">spark</a>
                </li>
                <li>
                    <a href="#">JQuery</a>
                </li>
                <li>
                    <a href="#">Mysql</a>
                </li>
                <li>
                    <a href="#">JavaWeb</a>
                </li>
                <li>
                    <a href="#">javaScript</a>
                </li>
             </ul>
             <h4><a href="#">修改兴趣</a></h4>
         </div>
    </div>
    <div class="dabox w">
    <div class="core ">
        <h3>精品推荐</h3>
        <h6><a href="#">查看全部</a></h6>
        <ul>
            <li><img src="../study/images/图层133.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层135.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层136.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层137.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层137.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层133.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层135.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层136.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层137.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>

            <li><img src="../study/images/图层137.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            </li>
        </ul>
    </div>
    </div>

    <div class="box-core w">

            <div class="title-nav">
            <h3>编程入门</h3>
            <h5>热门</h5>
            <h5>初级</h5>
            <h5>中级</h5>
            <h5>高级</h5>
            <h6><a href="#">查看全部</a></h6>
            </div>

            <div class="box-img">
                <img src="../study/images/PHP入门.png" alt="" class="tu">
                <img src="../study/images/图层155.png" alt=""class="pian">

                <div class="u">
                <ul>
                    <li>
                        <img src="../study/images/图层145.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                    <li>
                        <img src="../study/images/图层146.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                    <li>
                        <img src="../study/images/图层145.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                    <li id="i">
                        <img src="../study/images/图层144.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>

                </ul>
                </div>

            </div>


    </div>

    <div class="box-core w">

        <div class="title-nav">
        <h3>数据分析师</h3>
        <h5>热门</h5>
        <h5>初级</h5>
        <h5>中级</h5>
        <h5>高级</h5>
        <h6><a href="#">查看全部</a></h6>
        </div>

        <div class="box-img">
            <img src="../study/images/椭圆6拷贝16.png" alt="" class="tu">
            <img src="../study/images/python+人工智能打造您不一样的技术职场旅游.png" alt=""class="pian">

            <div class="u">
            <ul>
                <li>
                    <img src="../study/images/图层146.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
                <li>
                    <img src="../study/images/图层145.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
                <li>
                    <img src="../study/images/图层144.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
                <li id="i">
                    <img src="../study/images/图层144.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>

            </ul>
            </div>

        </div>


        <div class="box-core w">

            <div id="pic" class="title-nav">
            <h3>机械学习工程师</h3>
            <h5>热门</h5>
            <h5>初级</h5>
            <h5>中级</h5>
            <h5>高级</h5>
            <h6><a href="#">查看全部</a></h6>
            </div>

            <div class="box-img" >
                <!-- <img src="../study/images/PHP入门.png" alt="" class="tu">
                <img src="../study/images/图层155.png" alt=""class="pian"> -->

                <div class="u">
                <ul>
                    <li>
                        <img src="../study/images/图层145.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                    <li>
                        <img src="../study/images/图层143.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                    <li>
                        <img src="../study/images/图层144.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                 <!--    <li id="i">
                        <img src="../study/images/图层145.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li> -->
                    <li>
                        <img src="../study/images/图层142.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>
                    <li id="i">
                        <img src="../study/images/图层146.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span><b>高级</b>  •  1125人在学习</span>
                    </li>

                </ul>
                </div>

            </div>

    </div>


    <div class="box-core w">

        <div id="pic" class="title-nav">
        <h3>前端开发工程师</h3>
        <h5>热门</h5>
        <h5>初级</h5>
        <h5>中级</h5>
        <h5>高级</h5>
        <h6><a href="#">查看全部</a></h6>
        </div>

        <div class="box-img" >
            <!-- <img src="../study/images/PHP入门.png" alt="" class="tu">
            <img src="../study/images/图层155.png" alt=""class="pian"> -->

            <div class="u">
            <ul>
                <li>
                    <img src="../study/images/图层142.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
                <li>
                    <img src="../study/images/图层144.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
                <li>
                    <img src="../study/images/图层143.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
             <!--    <li id="i">
                    <img src="../study/images/图层145.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li> -->
                <li>
                    <img src="../study/images/图层146.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>
                <li id="i">
                    <img src="../study/images/图层145.png" alt="">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <span><b>高级</b>  •  1125人在学习</span>
                </li>

            </ul>
            </div>
        </div>
</div>

</div>

<!-- 清除浮动 -->
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>
<!-- 结束清除浮动 -->


<div class="botto">
<div class="dibu w">
<div class="Left-column">
    <img src="../study/images/logo.png" alt="">
    <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
        © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
        <a href="#" class="app">下载APP</a>
</div>

        <div class="Right-column">
            <dl>
                <dt><a href="#">关于学成网</a></dt>
                <dd><a href="#">关于</a></dd>
                <dd><a href="#">管理团队</a></dd>
                <dd><a href="#">工作机会</a></dd>
                <dd><a href="#">客服服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt><a href="#">新手指南</a></dt>
                <dd><a href="#">如何注册</a></dd>
                <dd><a href="#">如何选课</a></dd>
                <dd><a href="#">如何拿到毕业证</a></dd>
                <dd><a href="#">学分是什么</a></dd>
                <dd><a href="#">考试未通过怎么办</a></dd>
            </dl>
            <dl>
                <dt><a href="#">合作伙伴</a></dt>
                <dd><a href="#">合作机构</a></dd>
                <dd><a href="#">合作导师</a></dd>
            </dl>
        </div>

</div>
</div>
</body>
</html>