1. Toy模板网首页
  2. > Toy博客

学成在线项目note

9月前 作者：日子如影儿 分类：Toy博客 阅读(58) 违法举报

这篇具有很好参考价值的文章主要介绍了学成在线项目note。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一、index.html

1、头部header

2、轮播图banner

3、精品推荐

4、精品推荐课程

 5、footer

二、index.css

1、重要的代码

一、index.html

<!-- 网站的首页, 所有网站的首页都叫index.html, 因为服务器找首页都是找index.html -->

 <!-- 布局: 从外到内, 从上到下, 从左到右 -->

 <link rel="stylesheet" href="./css/index.css">

1、头部header

学成在线项目note

<!-- 头部header: 负责头部区域的样式, wrapper只负责版心效果 -->
    <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </h1>

        <!-- 导航 -->
        <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" placeholder="输入关键词"><button></button>
        </div>
        <!-- 用户 -->
        <div class="user">
            <img src="./images/user.png" alt="">
            <span>lilei</span>
        </div>
    </div>

2、轮播图banner

学成在线项目note

<div class="banner">
        <div class="wrapper">
            <div class="left">
                <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="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                </ul>
            </div>
            <div class="right">
                <h2>我的课程表</h2>
                <div class="content">
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                </div>
                <a href="#" class="more">全部课程</a>
            </div>
        </div>
    </div>

3、精品推荐

学成在线项目note

<div class="goods wrapper">
        <h2>精品推荐</h2>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="xingqu">修改兴趣</a>
    </div>

ul是无序列表

学成在线项目note 

ol是有序列表

学成在线项目note

4、精品推荐课程

学成在线项目note

 <div class="box wrapper">
        <div class="title">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>

        <div class="content clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  •  1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  •  1125人在学习</p>
                    </a>
                </li>
           </ul>
        </div>
    </div>

 <!-- 版权 : 注意要清除浮动的影响, 课程的li 的 父级 -->

 <!-- li都浮动了, 脱标, 撑不开父级的高度 -->

 5、footer

学成在线项目note

 

<div class="footer">
        <div class="wrapper">
            <div class="left">
                <img src="./images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <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>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>

 <br> 换行

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

二、index.css

index.css是用来美化首页的

1、重要的代码

* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}
a {
    text-decoration: none;
}

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }


body {
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper {
    width: 1200px;
    margin: 0 auto;
}

学成在线项目note

 2、

margin：表示元素的外边距

·形如：margin:5px 10px 15px 20px;

依次表示 上右下左

上 margin-top 5px

右 margin-right 10px

下 margin-bottom 15px 

左 margin-left 20px

缺省情况下 margin:5px;

表示 上下左右都是5px

缺省情况下 margin:5px 10px;

表示 上下是5px,左右是10px

缺省情况下 margin:5px auto 10px;

表示 上是5px,左右是auto,下为10px

属性值是auto的时候,默认只支持margin-left:auto;和margin-right:auto; 上下暂时不支持auto

说明：margin:0 auto;可以实现一个有宽度的块元素盒子水平居中

3、导航

.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li {
    float: left;
    margin-right: 26px;
}

.nav li a {
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom: 2px solid #00a4ff; */

    font-size: 18px;
    color: #050505;
}

.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}

 4、

 <!-- 搜索 -->

        <div class="search">

            <input type="text" placeholder="输入关键词"><button></button>

        </div>

/* 控制placeholder的样式 */

.search input::placeholder {

    font-size: 14px;

    color: #bfbfbf;

}

学成在线项目note

5、

.user img {

    /* 调节图片垂直对齐方式, middle:居中 */

    vertical-align: middle;

}

6、轮播图

/* 轮播图 */
.banner {
    height: 420px;
    background-color: #1c036c;
}

.banner .wrapper {
    height: 420px;
    background-image: url(../images/banner2.png);
}

 

.banner .left {
    float: left;

    padding: 0 20px;

    width: 190px;
    height: 420px;
    background-color: rgba(0,0,0, 0.3);

    /* 行高属于控制文字的属性, 能继承 */
    line-height: 44px;
}
.banner .left a:hover {
    color: #00b4ff;
}

7、

学成在线项目note

.banner .right h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}

.banner .right .content {
    padding: 0 18px;
}

.banner .right .content dl {
    padding: 12px 0;
    border-bottom:2px solid #e5e5e5;
}

.banner .right .content dt {
    font-size: 16px;
    color: #4e4e4e;
}

.banner .right .content dd {
    font-size: 14px;
    color: #4e4e4e;
}

.banner .right .more {
    display: block;
    /* margin: 4px 14px 0; */
    margin: 4px auto 0;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;

    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;

    text-align: center;
    line-height: 40px;
}

padding设置方法：
padding:10px 四周
padding:10px 20px 上下 左右
padding:10px 20px 30px 上 左右 下
padding:10px 20px 30px 40px 上右下左

给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

left,right,center,这三个取值。

text-align属性的设置，对于块级元素是无效的，但是对于行内元素是可以起作用的。

通过给父元素设置line-height来实现垂直居中，line-height值和父元素高度值相同。

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。

学成在线项目note

 8、

box-shadow: 0px 2px 3px 0px 
		rgba(118, 118, 118, 0.2);

学成在线项目note  

.goods li a {
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}

学成在线项目note

.box .content li:nth-child(5n) {
    margin-right: 0;
}

 9、

/* 版权 */
.footer {
    margin-top: 40px;

    padding-top: 30px;

    height: 417px;
    background-color: #fff;
}

 <a href="#">下载APP</a>

.footer .left a {
    display: inline-block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #00a4ff;
}

学成在线项目note

display属性详解_display详解_木森林哥哥的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-470815.html

到了这里，关于学成在线项目note的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微服务实战项目-学成在线-项目优化(redis缓存优化)

    微服务实战项目-学成在线-项目优化(redis缓存优化)

    视频播放页面用户未登录也可以访问，当用户观看试学课程时需要请求服务端查询数据，接口如下： 1、根据课程id查询课程信息。 2、根据文件id查询视频信息。 这些接口在用户未认证状态下也可以访问，如果接口的性能不高，当高并发到来很可能耗尽整个系统的资源，将整

    2024年02月12日
    浏览(38)
  • 微服务实战项目-学成在线-内容管理模块(有项目实战实现)

    微服务实战项目-学成在线-内容管理模块(有项目实战实现)

    1.1 什么是需求分析 在百度百科中对需求分析的定义如下： 需求分析也称为软件需求分析、系统需求分析或需求分析工程等，是开发人员经过深入细致的调研和分析，准确理解用户和项目的功能、性能、可靠性等具体要求，将用户非形式的需求表述转化为完整的需求定义，从

    2024年02月13日
    浏览(68)
  • 学成在线项目开发技巧整理---第一部分

    学成在线项目开发技巧整理---第一部分

    视频项目链接: 学成在线 整理的是我个人认为偏生疏的知识点,不一定涉及的全面。 在系统中某些选项是几个特定的值的一个或多个，并且随着还可以动态添加。比如支付方式，配送方式等。 此时我们应该设计一个数据字典模块，在后台进行管理，然后前台要从后端查询。并

    2023年04月22日
    浏览(58)
  • 微服务实战项目-学成在线-媒资管理模块(有项目实战实现)

    微服务实战项目-学成在线-媒资管理模块(有项目实战实现)

    1.1 模块介绍 媒资管理系统是每个在线教育平台所必须具备的，查阅百度百科对它的定义如下： 媒体资源管理(Media Asset Management，MAM)系统是建立在多媒体、网络、数据库和数字存储等先进技术基础上的一个对各种媒体及内容(如视/音频资料、文本文件、图表等)进行数字化存储

    2024年02月11日
    浏览(58)
  • 【微服务 | 学成在线】项目易错重难点分析（媒资管理模块篇·上）

    【微服务 | 学成在线】项目易错重难点分析（媒资管理模块篇·上）

    媒资管理模块主要负责以下几件事情： 上传图片 上传视频 处理视频 对需要转码处理的视频系统会自动对其处理，处理后生成视频的URL 处理视频没有用户界面，完全是后台自动执行 审核媒资 分为自动审核和人工审核 可调用第三方鉴别接口协助审核 绑定媒资 课程计划创建好

    2024年02月06日
    浏览(51)
  • 《学成在线》微服务实战项目实操笔记系列（P92~P120）【下】

    《学成在线》微服务实战项目实操笔记系列（P92~P120）【下】

    史上最详细《学成在线》项目实操笔记系列【下】，跟视频的每一P对应，全系列18万字，涵盖详细步骤与问题的解决方案。如果你操作到某一步卡壳，参考这篇，相信会带给你极大启发。 4.1 (课程发布)模块需求 P92 课程预览：在发布课程之前需要预览一下，看最终的效果有没

    2024年02月19日
    浏览(46)
  • http请求头部（header）详解

    http请求头部（header）详解

    通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行，一个或者多个头域，一个只是头域结束的空行和可 选的消息体组成。HTTP的头域包括通用头，请求头，响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域

    2024年02月12日
    浏览(39)
  • 【JS】获取 Headers 头部信息

    【JS】获取 Headers 头部信息

    当我们请求一个接口的时候，会发现 res 里面包含一个 headers 响应头信息： 首先他里面肯定是有值的，只不过是一个Headers 对象，直接提供对象点语法是取不出来的 这时候就要用到 Headers 对象 自带的方法了 创建一个空的 Headers 对象是简单的： 2.1、追加：append() append() 方法：

    2024年02月10日
    浏览(43)
  • 什么是HTTP头部（HTTP headers）？

    什么是HTTP头部（HTTP headers）？

    前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(39)
  • 学成在线----day5

    学成在线----day5

    当前要开发的是媒资管理服务，目前为止共三个微服务：内容管理、系统管理、媒资管理，如下图： 后期还会添加更多的微服务，当前这种由前端直接请求微服务的方式存在弊端： 如果在前端对每个请求地址都配置绝对路径，非常不利于系统维护，比如下边代码中请求系统

    2024年02月08日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包