学成在线案例

已于 2022-03-15 10:31:33 修改
阅读量206 收藏 2
点赞数 1
分类专栏： 前端知识 文章标签： html5 css chrome
于 2022-03-15 10:28:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45359288/article/details/123445007
版权

目录

1、准备工作

在这里插入图片描述

在这里插入图片描述
代码示例：
在这里插入图片描述

2、整体思路

在这里插入图片描述

在这里插入图片描述

3、分模块制作

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4、案例呈现

在这里插入图片描述

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-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 1、header--start -->
    <div class="header w">
        <!-- 多类名调用 -->
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <!--  导航栏部分 nav -->
        <div class="nav">
            <!-- ul>li>a -->
            <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="输入关键词">
            <button></button>
        </div>
        <!-- user模块 -->
        <div class="user">
            <img src="images/user.png" alt="">
            举一个栗子吖
        </div>
    </div>
    <!-- header--end -->

    <!-- 2、banner--start -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">后端开发<span>></span></a></li>
                    <li><a href="#">移动开发<span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">商业预测<span>></span></a></li>
                    <li><a href="#">云计算&大数据<span>></span></a></li>
                    <li><a href="#">运维&测试<span>></span></a></li>
                    <li><a href="#">UI设计<span>></span></a></li>
                    <li><a href="#">产品<span>></span></a></li>
                </ul>

            </div>

            <!-- 课程表模块 -->
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <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>
    <!--   banner--end -->

    <!-- 3、精品推荐模块--start -->
    <div class="goods w">
        <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="mood">修改兴趣</a>

    </div>
    <!--   精品推荐模块--end -->

    <!--  4、box核心内容区域start -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <em>
                        <img src="images/hot.png">
                    </em>
                    <img src="images/pic1.png">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <em>
                        <img src="images/new.png">
                    </em>
                    <img src="images/pic2.png">
                    <h4>
                        Android 网络图片加载框架详解
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1025人在学习
                    </div>
                </li>

                <li>
                    <img src="images/pic3.png">
                    <h4>
                        Angular 2 最新框架+主流技术+项目实战
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/pic4.png">
                    <h4>
                        Android Hybrid APP开发实战 H5+原生！
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/pic4.png">
                    <h4>
                        Android Hybrid APP开发实战 H5+原生！
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <em>
                        <img src="images/hot.png">
                    </em>
                    <img src="images/pic1.png">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <em>
                        <img src="images/new.png">
                    </em>
                    <img src="images/pic2.png">
                    <h4>
                        Android 网络图片加载框架详解
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1025人在学习
                    </div>
                </li>

                <li>
                    <img src="images/pic3.png">
                    <h4>
                        Angular 2 最新框架+主流技术+项目实战
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/pic4.png">
                    <h4>
                        Android Hybrid APP开发实战 H5+原生！
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/pic4.png">
                    <h4>
                        Android Hybrid APP开发实战 H5+原生！
                    </h4>
                    <div class="info">
                        <span>高级 </span>> • 1125人在学习
                    </div>
                </li>



            </ul>
        </div>
    </div>
    <!--   box核心内容区域end -->


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

            <div class="links">
                <dl>
                    <dt>关于学成网</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>新手指南</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>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>

            </div>

        </div>

    </div>
    <!-- 5、footer模块制作end -->


</body>

</html>
举一个栗子吖
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学成在线案例（完整版）
weixin_45592339的博客
11-02 1485
CSS书写顺序 导航栏制作方法 不用很多a而是用li。li包含连接（li+a）的做法
学成在线案例（完整代码）
m0_63760882的博客
03-06 5924
头部区域 分四个模块： logo（图片） 导航栏（无序列表） 搜索（文本输入框、button按钮） 用户（图片） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
学成在线案例.zip
07-14
学习一个星期HTML&CSS后做的项目，内含学成在线网站首页PSD、制作静态页面的HTML代码及CSS代码。
HTML+CSS学成在线案例的素材和源码以及切图工具cutterman
07-22
内容概要：HTML+CSS学成在线案例的素材和源码，需要的小伙伴可以下载，里面还有最好用的切图工具cutterman，帮助你一秒切图，下载完注册个cutterman账号即可使用 适合人群：具有一定的前端基础，CSS学完浮动可以尝试做一下这个案例 能学到什么：做完这个案例，还是很有成就感的，也可以巩固一下自己的知识点，同时了解去写一个网站的流程 阅读建议：可以自己先想一下思路，再看源码，实现界面有很多种方式，不一定要和源码一模一样，只要方便快捷都可以 希望这个资源对你有所帮助！
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2590
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
HTML5+CSS3案例一：学成在线
zhaoyang_m的博客
07-17 1115
链接：https://pan.baidu.com/s/10KBDVULhIOW698yODAmvSQ?，包含 HTML、CSS、图片、JavaScript等等。布局思路：先整体再局部，从外到内，从上到下，从左到右。标签结构：h1 > a > 网站名称（搜索关键字）调整盒子位置 → flex 布局、内外边距。画盒子，调整盒子范围 → 宽高背景色。搜索引擎优化：提升网站百度搜索排名。文件夹，内部包含当前网站的。网站根目录是指存放网站的。控制图片、文字内容样式。
综合案例：学成在线案例
weixin_47481102的博客
05-26 1537
1.准备素材和工具 1.学成在线PDS源文件。 2.开发工具=PS（切图）/cutterman插件+vscode（代码）+Chrome（测试）。 2.案例准备工作 本次采取结构与样式相分离思想： 1.创建study目录文件夹（用于存放页面的相关内容） 2.用vscode打开这么目录文件夹 3.study目录内新建images文件夹，用于保存图片 4.新建首页文件index.heml(网站首页统一规定为index.html 5.新建style.css样式文件，采用外链接样式表 6.使用&l
学成在线案例（开发具体步骤）
qq_47412862的博客
05-02 2573
一、准备素材和工具 1．学成在线PSD源文件。 2．开发工具=PS(切图)/cutterman插件+vscode(代码) + chrome(测试)。 二、案例准备工作 我们本次采取结构与样式相分离思想: 1.创建study目录文件夹（用于存放这个页面的相关内容）。 2.用vscode打开这个目录文件夹。 3. study目录内新建images文件夹，用于保存图片。 4.新建首页文件index.html 。 5.新建style.css样式文件。这里采用外链样式表。 6.将样式引入到我们的
学成在线案例完整版（6）
weixin_45147894的博客
06-16 1560
html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --&g...
学成在线案例制作
qq_52992057的博客
04-03 1113
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 学成在线案例系列文章目录前言一、准备素材和工具二、案例准备工作三、CSS属性书写顺序四、页面布局分析五、确定版心六、头部制作七、banner 制作总结 前言 提示：这里可以添加本文要记录的大概内容： 本文档是个人对 Pink 老师课程的总结归纳及补充，以及！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、准备素材和工具 学成在线 PSD 源文件 开
学成在线项目实例web前端
11-29
学成在线项目源码，素材。
学成在线项目
08-26
学成在线服务端基于Spring Boot构建，采用Spring Cloud微服务框架。 持久层：MySQL、MongoDB、Redis、ElasticSearch 数据访问层：使用Spring Data JPA 、Mybatis、Spring Data Mongodb等 业务层：Spring IOC、Aop事务控制、Spring Task任务调度、Feign、Ribbon、Spring AMQP、Spring Data Redis 等。 控制层：Spring MVC、FastJSON、RestTemplate、Spring Security Oauth2+JWT等 微服务治理：Eureka、Zuul、Hystrix、Spring Cloud Config等
pink老师htmlcss学习 - 学成在线案例
03-26
2023.3.26
学成在线 案例代码.zip
09-12
学成在线 案例代码.zip
学成在线案例的图片和代码资源
09-28
只用到html+css
CSS学习——案例：学成在线网页
最新发布
2301_79729136的博客
11-25 1329
网页布局
学成在线案例（2）
weixin_45147894的博客
06-15 89
css代码书写顺序规范：
图像识别案例在线实验闯关
04-29
以下是一个简单的图像识别案例在线实验闯关： 任务1：熟悉Python和机器学习库 在本任务中，您将使用Python编程语言和一些流行的机器学习库来完成一些简单的任务。完成以下步骤： 1. 安装Python和Jupyter Notebook...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值