学成在线案例

最新推荐文章于 2023-07-17 21:50:10 发布
最新推荐文章于 2023-07-17 21:50:10 发布
阅读量356 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41909678/article/details/118354878
版权

目录

案例准备工作

CSS 属性书写顺序（重点）

页面布局的整体思路

学成在线 header 区域​

学成在线 banner 区域

精品推荐小模块

精品推荐大模块

footer区域

总效果图

案例准备工作

采取结构和样式相分离的思想：

  1. 创建 study 目录文件夹，内部创建 images 文件夹用于存放图片
  2. 新建首页文件 index.html 
  3. 新建 style.css 样式文件，此次案例采用外链样式表
  4. 将样式引入到 HTML 文件中
  5. 样式表中写入清除内外边距的样式，来检测样式表是否成功引入

CSS 属性书写顺序（重点）

规范标准，优雅高质量，一个字：专业

属性书写顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow ( display 第一个写 )
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient ......
.rules {
    /*布局定位属性*/
    display: block;
    position: relative;
    float: left;
    /*自身属性*/
    width: 100px;
    height: 100px;
    margin: 0 auto;
    padding: 20px 0;
    /*文本属性*/
    font-family: Arial, 'Microsoft YaHei UI';
    color: #000;
    /*其他属性*/
    background: rgba(0,0,0, .5);
    border-radius: 10px;
}

页面布局的整体思路

  1. 必须确定页面的版心（可视区），测量得知
  2. 分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则
  3. 一行中的列模块经常浮动布局，先确定每一列的大小，之后确定列的位置。页面布局第二准则
  4. 制作 HTML 结构。遵循先有结构，后有样式的原则。结构永远最重要
  5. 先理清布局结构，再写代码

学成在线 header 区域

导航栏注意

实际开发中，导航栏是用链接 a ，而是用 li 包含链接（ li + a ）的做法

  1. li + a 语义更清晰，有条理的列表型内容
  2. 如果直接用 a ，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎降权），从而影响网站排名
  3. 让导航栏在一行显示，给 li 加浮动。因为 li 是块级元素，需要在一行上显示
  4. nav 导航栏可以不给宽度，将来可以继续添加元素
  5. 因为导航栏里面文字不一样多，所以最好给链接 a 左右设置 padding 撑开盒子，而不是指定宽度
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学成在线首页</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="banxin header">
            <div class="logo">
                <img src="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="text" value="输入关键词">
                <button></button>
            </div>
            <div class="user">
                <img src="images/user.png" alt="">
                qq-lilei
            </div>
        </div>
    </body>
</html>
* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    background-color: #f3f5f7;
}
.banxin {
    width: 1200px;
    margin: 0 auto;
}
.header {
    height: 42px;
    background-color: #f3f5f7;
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px;
    background-color: #f3f5f7;
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff ;
}
.search {
    float: left;
    width: 412px;
    height: 42px;
    background-color: #f3f5f7;
    margin-left: 70px;
}
/* input和button 都属于行内块元素，行内块元素之间默认有空隙存在，需要进行浮动清除 */
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0px;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    background: url("images/button.png");
    border: 0;
}
.user {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
    line-height: 42px;
}

效果图

学成在线 banner 区域

<div class="banner">
            <div class="banxin">
                <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="text">
                        <ul>
                            <li>
                                <h4>继续学习 程序语言设计</h4>
                                <p>正在学习-使用对象</p>
                            </li>
                            <li>
                                <h4>继续学习 程序语言设计</h4>
                                <p>正在学习-使用对象</p>
                            </li>
                            <li>
                                <h4>继续学习 程序语言设计</h4>
                                <p>正在学习-使用对象</p>
                            </li>
                        </ul>
                        <a href="#" class="total">全部课程</a>
                    </div>
                </div>
            </div>
        </div>
        <!--banner区域结束-->
/*banner区域*/
.banner {
    height: 421px;
    background-color: #033db2;
}
.banner .banxin {
    height: 421px;
    background: #ff5b00 url("images/banner2.png") no-repeat top center;
}
.banner .subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0,.3);
}
.banner .subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.banner .subnav ul li a {
    font-size: 14px;
    color: #ffffff;
}
.banner .subnav ul li a:hover {
    color: #00a4ff;

}
.banner .subnav ul li a span {
    float: right;
}
.banner .course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #ffffff;
    /*浮动的盒子不会有外边距合并的问题*/
    margin-top: 50px;
}
.banner .course h2 {
    width: 230px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    background-color: #9bceea;
    color: #fff;
}
.banner .course .text ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.banner .course .text ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.banner .course .text ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.banner .text {
    padding: 0 20px;
}
.banner .total {
    display: block;
    height: 38px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #00a4ff;
    margin-top: 5px;
}

效果图

精品推荐小模块

        <div class="goods banxin">
            <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="#">Oracle</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
            <h5 class="hobby">修改兴趣</h5>
        </div>
/*精品推荐*/
.goods {
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

.goods h3 {
    float: left;
    padding: 0 35px;
    font-size: 16px;
    font-weight: 700;
    color: #00a4ff;

}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 35px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #bfbfbf;
}
.goods .hobby {
    float: right;
    margin-right: 35px;
    font-size: 14px;
    color: #00a4ff
}

效果图

精品推荐大模块

        <!--精品推荐大模块开始-->
        <div class="box banxin">
            <div class="box-hd">
                <h3>精品推荐</h3>
                <a href="#">查看全部</a>
            </div>
            <div class="box-bd">
                <ul>
                    <li>
                        <img src="images/pic1.png" alt="">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic2.png" alt="">
                        <h4>Android 网络图片加载框架详解</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic3.png" alt="">
                        <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic4.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic5.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic5.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic4.png" alt="">
                        <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic3.png" alt="">
                        <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic2.png" alt="">
                        <h4>Android 网络图片加载框架详解</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic1.png" alt="">
                        <h4>Android 网络图片加载框架详解</h4>
                        <div class="info"><span>高级</span> • 1125人在学习</div>
                    </li>
                </ul>
            </div>
        </div>
        <!--精品推荐大模块结束-->
/*精品推荐大模块*/
.box {
    margin-top: 30px;
}
.box .box-hd {
    height: 45px;
}
.box .box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box .box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/*把 ul 修改的足够宽，在添加外边距的时候就不会再换行了*/
.box .box-bd {
    float: left;
    width: 1225px;
}
.box .box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: #ffffff;
}
/*当图片大小和盒子大小不一致时，应该强制把图片大小修改为100%*/
.box .box-bd ul li img {
    width: 100%;
}
.box .box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    font-weight: 400;
    color: #050505;
}
.box .box-bd ul li .info {
    margin: 20px 20px 20px 25px;
    font-size: 12px;
    color: #999999;
}
.box .box-bd ul li span {
    color: #ff7c2d
}

效果图

footer区域

        <!--底部模块开始-->
        <div class="footer">
            <div class="box banxin">
                <div class="copyright">
                    <img src="images/logo.png" alt="">
                    <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>
        <!--底部模块结束-->
/*清除浮动*/
.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /* *zoom:1; */
}
/*底部区域*/
.footer {
    /*float: left;*/
    height: 415px;
    background-color: #fff;
}
.footer .banxin {
    padding-top: 35px;
}
.footer .copyright {
    float: left;
}
.footer .copyright p {
    margin: 20px 0 15px 0;
    font-size: 12px;
    color: #666666;
}
.footer .copyright .app {
    display: block;
    width: 118px;
    height: 33px;
    font-size: 16px;
    text-align: center;
    line-height: 33px;
    border: 1px solid #00a4ff;
}
.footer .links {
    float: right;
}
.footer .links dl {
    float: left;
    margin-left: 100px;
}
.footer .links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}
.footer .links dl dd a {
    font-size: 12px;
    color: #333;
}

效果图

总效果图

少年张狂
关注
学成在线(案例)
独特的懒人
08-13 1676
学成在线 2. CSS属性书写顺序（重点） 生活中衡量一个人有气质： ​ 穿着打扮 举止言行 等等 编程中如何衡量一个人的代码能力： ​ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验… 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding
学成在线案例（完整版）
weixin_45592339的博客
11-02 1572
CSS书写顺序 导航栏制作方法 不用很多a而是用li。li包含连接（li+a）的做法
学成在线案例.zip
07-14
在本项目中，“学成在线案例.zip”是一个包含学习成果的压缩文件，主要展示了学习者在为期一个星期的时间里，对HTML和CSS技术的理解与应用。这个压缩包的核心内容是学成在线网站首页的设计与实现，旨在帮助我们了解...
HTML+CSS学成在线案例的素材和源码以及切图工具cutterman
07-22
内容概要：HTML+CSS学成在线案例的素材和源码，需要的小伙伴可以下载，里面还有最好用的切图工具cutterman，帮助你一秒切图，下载完注册个cutterman账号即可使用 适合人群：具有一定的前端基础，CSS学完浮动可以尝试...
学成在线 案例代码.zip
09-12
【标题】"学成在线 案例代码.zip"是一个包含编程案例的压缩文件，可能源自学成在线教育平台，旨在帮助学员理解并实践各种编程概念。这样的资源通常包括多种编程语言的示例代码，或者特定技术或算法的实现。 【描述...
学成在线案例的图片和代码资源
09-28
在"学成在线"的案例中，你可以期待找到如何使用这些元素构建网页结构的实例。 【CSS】 CSS则是控制HTML元素样式的关键。通过选择器（如类名、ID名、元素类型等）定位HTML元素，并应用样式规则，如颜色、字体、布局...
学成在线案例（完整代码）
m0_63760882的博客
03-06 6060
头部区域 分四个模块： 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
学成在线项目实例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等
综合案例：学成在线案例
weixin_47481102的博客
05-26 1588
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
HTML5+CSS3案例一：学成在线
zhaoyang_m的博客
07-17 1359
链接：https://pan.baidu.com/s/10KBDVULhIOW698yODAmvSQ?，包含 HTML、CSS、图片、JavaScript等等。布局思路：先整体再局部，从外到内，从上到下，从左到右。标签结构：h1 > a > 网站名称（搜索关键字）调整盒子位置 → flex 布局、内外边距。画盒子，调整盒子范围 → 宽高背景色。搜索引擎优化：提升网站百度搜索排名。文件夹，内部包含当前网站的。网站根目录是指存放网站的。控制图片、文字内容样式。
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2787
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
综合案例-学成在线
syyy9090的博客
04-06 629
HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线</title> <link rel="stylesheet" href="style.css"> </head> &lt...
学成在线案例实战（1）
weixin_45147894的博客
06-15 181
把study文件放入一个盘中，然后新建子文件夹和新建文件 页面。并引入css样式。css样式建在同一级下即可。
前端学习笔记（学成在线案例）
zhangfei199507的博客
03-09 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body&...
学成在线案例完整版（6）
weixin_45147894的博客
06-16 1593
html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --&g...
学成在线项目案例代码
最新发布
06-15
学成在线项目案例代码通常指的是在学习过程中，为了解决实际问题或实践特定技术，学员们会在网上找到的示例代码或项目实例。这些代码可以涵盖各种编程语言和技术领域，比如Web开发（HTML、CSS、JavaScript、Node.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值