项目实战 -2【学成在线】完结！终于肝完了～～～

最新推荐文章于 2023-05-24 01:12:05 发布
最新推荐文章于 2023-05-24 01:12:05 发布
阅读量295 收藏 1
点赞数 1
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43321726/article/details/104864842
版权

非常不容易呀！来一波图～～～～～～有任何问题可以私聊小编喔！！！！
资源下载地址：https://github.com/feishanglantian/HEGUOBAO-Example.git【学成在线】
在这里插入图片描述在这里插入图片描述在这里插入图片描述index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[heguobao]学成在线教育平台-不是每个网站都叫学成在线</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="bigbox">
        <!-- 顶部 -->
        <div class="top">
            <div><img src="images/logo.png" alt=""></div>
            <div><a href="#">首页</a></div>
            <div><a href="#">课程</a></div>
            <div><a href="#">职业规划</a></div>
            <!-- 输入框 -->
            <div class="search" id="search">
                <div><input type="search" name="search" value="请输入关键字"></div>
                <button></button>
            </div>
            <!-- 个人中心 -->
            <div id="man">个人中心</div>
            <!-- 铃铛图片 -->
            <div id="ld"><img src="images/ld.png" alt=""></div>
            <!-- 人头像 -->
            <div id="ren"><img src="images/pic.png" alt=""></div>
        </div>


        <!-- 横幅 -->
        <div class="banner">
            <!-- bianlan边栏 -->
            <div class="bianlan">
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
            </div>
            <ul class="timebook">
                <!-- timebook课程表 -->
                <h4>我的课程表</h4>
                <li id="xian">继续学习 编程语言设计
                    <p>正在学习-面向对象</p>
                </li>

                <li>继续学习 编程语言设计
                    <p>正在学习-面向对象</p>
                    <p></p>
                </li>

                <li style="border: 0px;">继续学习 编程语言设计
                    <p>正在学习-面向对象</p>

                </li>

                <a href="#" id="buyiyang">全部课程</a>
            </ul>

        </div>

        <div>

        </div>
    </div>

    <!-- 推荐栏 -->
    <div class="rec">
        <a href="#"><strong id="strong">精品推荐</strong></a>
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>|
        <a href="#" id="hover">JQury</a>
        <span>修改兴趣</span>
    </div>
    <!-- 推荐栏列表1 -->
    <div class="rec-l-one">
        <h3>精品推荐</h3>

        <a href="#">查看全部</a>
    </div>
    <!-- 推荐栏商品1 -->
    <div class="shangpin">
        <div>
            <img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
    </div>
    <!-- 推荐栏列表2 -->
    <div class="rec-l-one">
        <h3>精品推荐</h3>

        <a href="#">查看全部</a>
    </div>
    <div class="shangpin">
        <div>
            <img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
        <div><img src="images/pic1.png">
            <p>Think PHP 5.0 博客系统实战项目演练</p>
            <p id="gaoji">高级<span>•  1125人在学习</span></p>
        </div>
    </div>

    <!-- 底部 -->
    <div class="bottom">
        <!-- left -->
        <div class="left">
            <p><img src="images/logo.png"></p>

            <p id="bottom">学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
            <p id="bottom">© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            <p id="xiazai">下载</p>
        </div>
        <!-- right -->
        <div class="right1">
            <dl>
                <dt>关于学成网</dt>
                <dd>关于</dd>
                <dd>管理团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>帮助</dd>
            </dl>

        </div>
        <div class="right2">
            <dl>
                <dt>关于学成网</dt>
                <dd>关于</dd>
                <dd>管理团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>帮助</dd>
            </dl>

        </div>
        <div class="right3">
            <dl>
                <dt>关于学成网</dt>
                <dd>关于</dd>
                <dd>管理团队</dd>
                <dd>工作机会</dd>
                <dd>客户服务</dd>
                <dd>帮助</dd>
            </dl>

        </div>
    </div>


    </div>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
}


/* 整个屏幕 */

body {
    background-color: #f3f5f7;
}


/* ----------------顶部(nav)-----------------*/

.top {
    width: 100%;
    height: 100px;
}


/* 顶部所有div样式 */

.top>div {
    float: left;
    padding: 25px 0 0px;
    margin: 0 40px 0 0;
    height: 70px;
}


/* 链接 */

.top>div a {
    display: block;
    font-size: 18px;
    height: 44px;
    color: #050505;
    text-decoration: none;
    text-align: center;
    margin: 7px 0;
    padding: 0 10px;
}


/* 鼠标经过的时候变色 */

.top a:hover {
    color: red;
    border-bottom: 2px solid #00a4ff;
}


/* 输入框样式 */

#search {
    margin-left: 80px;
}

.search input {
    font-size: 6px;
    color: gray;
    float: left;
    width: 361px;
    height: 40px;
    border: 1px solid #00a4ff;
}


/* 输入框点击按钮 */

.search button {
    width: 49px;
    height: 40px;
    float: right;
    background: url(images/search-button.png) no-repeat;
    margin-top: -40px;
    margin-right: -46px;
    border: 1px solid #00a4ff;
}


/* 个人中心 */

#man {
    height: 21px;
    width: 48px;
    font-size: 12px;
    margin-left: 47px;
    margin-top: 12px;
}


/* 铃铛 */

#ld {
    height: 20px;
    margin-left: -10px;
    margin-top: 12px;
}


/* 人头像 */

#ren {
    height: 9px;
    width: 8px;
    margin-left: -7px;
    margin-top: 3px;
    border-radius: 0px;
}


/* --------------顶部到此--------------- */


/* --------------横幅------------------  */


/* 背景图 */

.banner {
    width: 1265px;
    height: 420px;
    background: url(images/banner.jpg);
    background-color: #fff;
}


/* 边栏 */

.bianlan {
    float: left;
    width: 190px;
    height: 420px;
    background-color: #14024b;
}

.bianlan a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    padding-top: 20px;
    text-indent: 2em;
}


/* 边栏鼠标经过变色 */

.bianlan a:hover {
    color: #00b4ff;
}

.bianlan a span {
    float: right;
    margin-right: 10px;
}


/* 课程表 */

.timebook {
    float: right;
    width: 228px;
    height: 300px;
    background-color: #fff;
}

.timebook h4 {
    font-size: 17.5px;
    width: 228px;
    height: 50px;
    color: #fff;
    background-color: #9bcaea;
    text-align: center;
    line-height: 50px;
}

.timebook li {
    font-size: 16px;
    width: 228px;
    height: 50px;
    text-align: center;
    list-style: none;
    margin-top: 15px;
    border-bottom: 1px solid gray;
}

.timebook li p {
    font-size: 10px;
    color: gray;
    text-align: center;
    text-indent: -6.2em;
}


/* 框 */

#buyiyang {
    display: block;
    width: 188px;
    height: 40px;
    border: 1px solid #2288f6;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    text-decoration: none;
}


/* 鼠标经过变色 */

#buyiyang:hover {
    background-color: #2288f6;
}


/* ---------横幅到此 ----------*/


/* ----------推荐栏-----------*/


/* 布局 */

.rec {
    width: 1200px;
    height: 61px;
    background-color: #fff;
    margin: 10px auto;
    line-height: 61px;
}


/* a */

.rec>a {
    text-decoration: none;
    margin: 0px 15px;
    font-size: 14px;
    padding-left: 15px;
    color: #000;
}


/* 鼠标经过 */

.rec #hover:hover {
    color: red;
}


/* 特殊 */

#strong {
    color: #22b0ff;
}


/* 特殊 */

span {
    float: right;
    font-size: 12px;
    color: #22b0ff;
    margin-right: 15px;
}


/* ～～～～～～～～～～～推荐栏～～～～～～～～～～～～ */


/* 推荐栏列表1 */

.rec-l-one {
    width: 1200px;
    height: 27px;
    background-color: #f3f5f7;
    margin: 0px auto;
    margin-top: 30px;
}

.rec-l-one h3 {
    display: inline-block;
    height: 27px;
    color: gray;
}

.rec-l-one a {
    float: right;
    text-decoration: none;
    font-size: 12px;
    color: gray;
}

.rec-l-one a:hover {
    color: red;
}


/* 推荐栏商品1 */

.shangpin {
    width: 1200px;
    height: 570px;
    margin: 0px auto;
    margin-top: 13px;
}

.shangpin>div {
    float: left;
    width: 225px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
}


/* 鼠标经过盒子出现阴影 */

.shangpin>div:hover {
    box-shadow: 7px 23px 32px 24px green;
}


/* 图片超出设置范围 */

.shangpin>div img {
    width: 100%;
    background-color: pink;
}

.shangpin div p {
    font-size: 14px;
    width: 185px;
    height: 42px;
    margin: 18px auto;
}

#gaoji {
    font-size: 12px;
    height: 20px;
    color: red;
}

#gaoji span {
    font-size: 12px;
    color: gray;
    margin-right: 77px;
}


/* 底部 */

.bottom {
    width: 1265px;
    height: 460px;
    background-color: #fff;
    margin-top: 45px;
}

.bottom .left {
    display: inline-block;
    font-size: 12px;
    width: 432px;
    height: 165px;
    background-color: #fff;
}

#bottom {
    width: 432px;
    height: 23px;
    margin-top: 14px;
    color: gray;
}

#xiazai {
    height: 35px;
    width: 120px;
    border: 1px solid #22b0ff;
    text-align: center;
    line-height: 35px;
    color: #22b0ff;
}

#xiazai:hover {
    background-color: #698594;
}

.right1 {
    height: 400px;
    float: right;
    color: gray;
    font-size: 12px;
    margin: 0 183px;
    padding: 20px 0;
}

.right1 dl dt {
    font-size: 15px;
}

.right2 {
    height: 400px;
    float: right;
    color: gray;
    font-size: 12px;
    margin: 0 -82px;
    padding: 20px 0;
}

.right2 dl dt {
    font-size: 15px;
}

.right3 {
    height: 400px;
    float: right;
    font-size: 12px;
    color: gray;
    margin: 0 -418px;
    padding: 20px 0;
}

.right3 dl dt {
    font-size: 15px;
}

完结！！！

pandaHe_Status
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2018年下半年黑马程序员课改之后最新Java企业级项目—学成在线学习平台。包含所有的资料和代码
03-27
2018年下半年黑马程序员课改之后最新Java企业级项目—学成在线学习平台。包含所有的资料和代码
学成在线——2.CMS需求分析
weixin_42270205的博客
06-04 308
目录CMS CMS 1、CMS是什么 ？ CMS （Content Management System）即内容管理系统，不同的项目对CMS的定位不同，比如：一个在线教育网 站，有些公司认为CMS系统是对所有的课程资源进行管理，而在早期网站刚开始盛行时很多公司的业务是网站制 作，当时对CMS的定位是创建网站，即对网站的页面、图片等静态资源进行管理。 2、CMS有哪些类型？ 上边也谈到每个公司对每个项目的CMS定位不同，CMS基本上分为：针对后台数据内容的管理、针对前端页面的 管理、针对样式风格的管理等 。比如
学成在线--内容管理模块
qq_33888850的博客
03-25 1145
百度百科汇总对需求分析的定义如下需求分析也称为软件需求分析、系统需求分析或需求分析工程等，是开发人员经过深入细致的调研和分析，准确理解用户和项目的功能、性能、可靠性等具体需求，将用户非形式的需求表叔转化为完整的需求定义，从而确定系统必须做什么的过程简单理解就是要高清问题域，问题域就是用户的需求，软件要为用户解决什么问题，实现哪些业务功能，满足什么样的性能要求那么如何做需求分析？首先确认用户需求用户需求即用户的原始需求。
微服务实战项目-学成在线-项目介绍以及环境搭建
爪蛙毁一生的博客
05-24 1625
在线教育行业是一个有着极强的广度和深度的行业，从校内到校外；从早幼教到职业培训；从教育工具到全信息化平台等等。2020年的新冠疫情外生冲击，让在线教育再次站在聚光灯下。疫情下教育领域获融资最多，而其中在线教育最受资本青睐。据艾瑞咨询统计，2020年教育行业累计融资1164亿元，其中在线教育融资金额1034亿元，占比89%。与此同时，在行业处于困境的情况下，会加速洗牌，资源向好的企业集中
学成在线案例
weixin_41909678的博客
06-30 205
案例准备工作 采取结构和样式相分离的思想： 创建 study 目录文件夹，内部创建 images 文件夹用于存放图片 新建首页文件 index.html 新建 style.css 样式文件，此次案例采用外链样式表 将样式引入到 HTML 文件中 样式表中写入清除内外边距的样式，来检测样式表是否成功引入 CSS 属性书写顺序（重点） 规范标准，优雅高质量，一个字：专业 属性书写顺序： 布局定位属性：display / position / float / clear / visibilit.
JavaScript项目实战-优学网.zip
07-07
优学网项目主要分为首页+登录注册页+视频播放页内容，使用html+css实现基本页面布局，完成ajax请求数据进行页面渲染以及表单正则验证的项目练习。 资源中含有基础布局项目以及项目优化两部分，代码中有详细的注解
Spring Boot 2.x整合微信支付在线教育网站项目实战--完整版视频下载
09-08
Spring Boot 2.x整合微信支付在线教育网站项目实战 完整版视频下载
一步一步学SpringBoot2微服务项目实战
07-22
资源名称：一步一步学Spring Boot 2微服务项目实战资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
项目实战-Python基于KMeans算法进行文本聚类项目实战.zip
最新发布
06-18
项目实战-Python基于KMeans算法进行文本聚类项目实战.zip本项目是一套成熟的大作业项目系统，获取98分，主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者，可作为课程设计、期末大作业。...
Python数据分析实战项目汇总~-readata.zip
01-30
在这些实战项目中，我们可以学到以下知识点： - **数据导入与预处理**：包括使用Pandas加载数据、处理缺失值、异常值，进行数据类型转换等。 - **数据探索**：学习如何利用描述性统计和可视化工具（如matplotlib和...
前端项目之学成在线
qq_61798306的博客
03-09 152
本项目仅使用html和css，用以巩固这部分的学习。
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2711
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
学成在线总结（1）
wmh1152151276的博客
05-17 6574
学成在线是一个在线教育平台，提供IT职业课程在线学习，它有门户、课程管理中心、系统管理中心、学习中心等系统。 门户系统负责，注册登录、门户首页展示、课程搜索等功能。 教学管理中心提供：课程管理、媒资管理、问答管理等功能。 系统管理中心提供：CMS页面管理、数据字典、分类管理等功能。 本项目采用前后端分离的技术架构、前端采用vue.js+elementui技术栈、后端采用springboot + s...
学成在线项目实训内容
qq_50651123的博客
06-09 308
学成在线项目实训内容 效果图： 使用的工具是HBuilder X 左边的目录 html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
学成在线案例完整版（6）
weixin_45147894的博客
06-16 1572
html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --&g...
学成在线案例（完整代码）
热门推荐
记录学编程后遇到的问题，注意点以及相关知识
11-14 2万+
首先同一目录下放置三个文件夹（images xxx.html style.css） 图片： 头部区域 分四个模块： logo（图片） 导航栏（无序列表） 搜索（文本输入框、button按钮） 用户（图片） <div class="header w"> <!-- logo部分 --> <div class="logo"> <!-- alt显示未加载时，所提示的文字，title显示鼠标放上时，所提示的文件
前端入门到熟悉day05
weixin_44160944的博客
12-26 153
学成在线（网页） &lt;!DOCTYPE html&gt; &lt;htmllang="en"&gt; &lt;head&gt; &lt;metacharset="UTF-8"&gt; &lt;title&gt;学成在线教育平台-不是每个网站都叫学成在线&lt;/title&gt; &lt;!-- css初始化文件 --&gt; &l
项目实战-1 学成在线
weixin_43321726的博客
03-14 244
今天对着网页敲了一天,～～～～～～～成果如下！！！！！ ⚠️老规矩照片还是要自己加。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值