学成在线源码下载

学成在线借鉴了MOOC(大型开放式网络课程,即MOOC(massive open online courses))的设计思想,是一 个提供IT职业课程在线学习的平台,它为即将和已经加入IT领域的技术人才提供在线学习服务,用户通过在线学 习、在线练习、在线考试等学习内容,最终掌握所学的IT技能,并能在工作中熟练应用。

网盘源码链接:https://pan.baidu.com/s/1Ji1gqaI5iU3_PiCDebhyMQ

示例图

image-20201125164605251

image-20201125164642610

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>学成在线</title>
        <link rel="stylesheet" type="text/css" href="css.css"/>
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <img src="images/logo.png" >
            </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="text" value="输入关键词"/ style="outline: none;">
                <button type="button"></button>
            </div>
            <div class="user">
                <img src="images/user.png" style="vertical-align: middle;" >
                尼古拉斯~宇
            </div>
        </div>
    <div class="banner">
        <div class="banner-o">
            <div class="subnav">
                <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="course">
                <h2>我的课程表</h2>
                <div class="course-o">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <div class="shoping">
        <h3>精品推荐 </h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark  </a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb </a></li>
            <li><a href="#"> MySQL</a></li>
            <li><a href="#"> JavaWeb </a></li>
        </ul>
        <a href="#" class="shoping-o">修改兴趣  </a>                                                                                   
    </div>
    <div class="box">
        <div class="box-head">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-body">
            <ul>
                <li> 
                <em><img src="images/hot.png" ></em>
                <img src="images/pic1.png"  class="img">
                <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div>
                </li>
                <li><em><img src="images/new.png" ></em><img src="images/pic2.png" class="img">
                <h3>Android 网络图片加载框架详解 </h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><img src="images/pic3.png" class="img">
                <h3>Angular 2 最新框架+主流技术+项目实战  </h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><img src="images/pic45.png" class="img">
                <h3>Android Hybrid APP开发实战 H5+原生!</h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><img src="images/pic45.png" class="img">
                <h3>Android Hybrid APP开发实战 H5+原生! </h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><em><img src="images/hot.png" ></em><img src="images/pic1.png" class="img">
                <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><em><img src="images/new.png" ></em><img src="images/pic2.png" class="img">
                <h3>Android 网络图片加载框架详解 </h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><img src="images/pic3.png" class="img">
                <h3>Angular 2 最新框架+主流技术+项目实战  </h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><img src="images/pic45.png"class="img" >
                <h3>Android Hybrid APP开发实战 H5+原生!</h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
                <li><img src="images/pic45.png" class="img">
                <h3>Android Hybrid APP开发实战 H5+原生! </h3>
                <div class="box-body-div"><span>高级 </span> •  1125人在学习</div></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>


    <div class="footer">
          <div class="footer-o">
            <div class="footer-o-left"><img src="images/logo.png" >
            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            <a href="#" class="footer-o-left-app">下载APP</a>
            </div>
            <div class="footer-o-right">
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
                <dl>
                    <dt>新手指南</dt>
                    <dd>如何注册</dd>
                    <dd>如何选课</dd>
                    <dd>如何拿到毕业证</dd>
                    <dd>学分是什么</dd>
                    <dd>考试未通过怎么办</dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd>合作机构</dd>
                    <dd>合作导师</dd>
                </dl>
            </div>
          </div>
    </div>
    <div class="fix">
        <img src="images/left.png" >
    </div>
    </body>
</html>

css.css

* {
    margin: 0;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
body {
    background-color: #f3f5f7;
}
a {
    text-decoration: none;
}
.header {
    width: 1200px;
    height: 42px;
    margin: 30px auto;
}
.logo {
    width: 197px;
    height: 42px;
    float: left;
}
.nav ul li a {
    text-decoration: none;
    padding: 0 10px;
    height: 42px;
    display: block;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
    font-family: 微软雅黑;
}
li {
    list-style: none;
}
.nav {
    height:  42px;
    float: left;
    margin-left: 80px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a:hover {
   border-bottom: 2px solid #00a4ff;    
   color: #00a4ff;
}
.search {
    width: 412px;
    height: 42px;
    float: left;
    margin-left: 50px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00A4FF;
    border-right: 0px;
    font-size: 14px;
    font-family: 微软雅黑;
    color: #bfbfbf;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    background:url(images/search.png);
    border: 0;
}
.user  {
    font-size: 14px;
    color: #666666;
    float: right;
    line-height: 42px;
    margin-right: 30px;
}
.banner {
    height: 420px;
    background-color: #1c036c;
}
.banner-o {
    width: 1200px;
    height: 420px;
    margin: 0 auto;
    background: url(images/banner2.png);
    background-repeat: no-repeat;
    background-position: top center;
}
.subnav {
    width: 190px;
    height: 420px;
    background: rgba(0,0,0,0.3);
    float: left;
}
.subnav ul li a {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover{
    color: #00b4ff;
}
.course {
    width: 230px;
    height: 300px;
    float: right;
    background-color: #ffffff;
    margin-top: 50px;
}
.course h2 {
    width: 230px;
    height: 48px;
    line-height: 48px;
    color:#ffffff;
    text-align: center;
    font-size: 18px;
    background-color: #9bceea;
}
.course-o {
    padding: 0 20px;
}
.course-o ul li {
    padding: 15px 0;
    border-bottom: 1px solid #a5a5a5;
}
.course-o ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
    }
.course-o ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.course-o .more{
    display: block;
    color: #00a4ff;
    border: 1px solid #00a4ff;
    height: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    margin-top: 3px;
    font-weight: 700;
}
.shoping {
    height: 60px;
    width: 1200px;
    background-color: #ffffff;
    margin: 10px auto;
    box-shadow: 0px 2px 3px 3px rgba(0,0,0,0.1);
    line-height: 60px;
}
.shoping h3{
    margin-left: 30px;
    float: left;
    font-size: 16px;
    color: #00a4ff;
}
.shoping ul li a {
    float: left;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}
.shoping .shoping-o{
    margin-right: 30px;
    float: right;
    font-size: 14px;
    color: #00a4ff;
    }
.box {
    width: 1200px;
    margin: 34px auto;
}
.box-head {
    height: 40px;

    }
    .box-head h3{
    font-size: 20px;
    color: #494949;
    line-height: 34px;
    float: left;
    }
.box-head a {
    font-size: 12px;
    color: #a5a5a5;
    float: right;
    line-height: 34px;
    padding-right: 30px;
}
.box-body ul {
    width: 1225px;
}
.box-body ul li {
    width: 228px;
    height: 270px;
    float: left;
    background-color: #ffffff;
    margin-right:15px ;
    margin-bottom: 15px;
}
.box-body ul li {
    position: relative;
}
.box-body ul li .img {
    width: 100%;
}
.box-body ul li h3 {
    font-size: 14px;
    color: #050505;
    margin: 25px 20px 15px 25px;
}
.box-body ul .box-body-div{
    font-size: 12px;
    color: #999999;
    margin-left: 25px;
}
.box-body ul .box-body-div span{
    color: #ff7c2d;
}
.box-body ul li em img{
    position: absolute;
    top: 4px;
    right: -4px;
}
.footer {
    height: 417px;
}
.clear {
    clear: both;
}
.footer-o {
    width: 1200px;
    margin: 0 auto;
    padding-top: 35px;
}
.footer-o-left{
    float: left;
}
.footer-o-right {
    float: right;
}
.footer-o-left p {
    font-size: 12px;
    color: #666666;
    margin: 20px 0px 15px 0px;
}
.footer-o-left-app {
    display: block;
    font-size: 16px;
    color: #00a4ff;
    border: 1px solid #00a4ff;
    width: 120px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
dl {
    float: left;
}
.footer-o-right dt {
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
}
.footer-o-right dd {
    font-size: 12px;
    color: #333333;
    padding-bottom: 5px;
}
.footer-o-right dl {
    margin-left: 150px;
}

.fix {
    position: fixed;
    top: 550px;
    left: 20px;
}

images

hot)pic3)pic45)pic2)search)user)pic3)pic2)pic1)new)logo)left)banner2


  转载请注明: 奇遇少年 学成在线源码下载

 上一篇
品优购 品优购
品优购网上商城是一个综合性的 B2B2C 平台,类似京东商城、天猫商城。网站采用商家入驻的模式,商家入驻平台提交申请,有平台进行资质审核,审核通过后,商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。以下是静态源码及展示页面。
下一篇 
吃热狗程序开发 吃热狗程序开发
项目介绍程序目标描述(即开发的目的):1.掌握使用标识符、数据类型、表达式、if、return、for、复合语句。2.了解面向对象的使用。包括(封装、继承、多态)基本特征。3.记住一些固定语句固定用法。 程序用途描述(即希望具备功能):1.
2020-11-11
  目录