学成在线 制作分解版

学成在线 制作分解版

• 学成在线
• • 实现
  • • 通用
    • 头部, header
    • • logo
      • 导航栏, nav
      • 搜索, search bar
      • 用户信息, user profile
    • banner
    • • 子导航，sub-nav
      • 课程表，course
    • 精品推荐(小区)
    • • 精品推荐(小区) 标题
      • 精品推荐(小区) ul
      • 精品推荐(小区) 修改兴趣
    • 精品推荐(大区)
    • • 精品推荐(大区) 头部
      • 精品推荐(大区) 主体
    • footer
    • • copyright（左浮动）
      • 尾部的超链（右浮动）
  • 其他资料

学成在线

资源在 github 上放了，在最下面，有 psd 有切图，需要的自取。

依旧是来自来自 黑马程序员 pink 老师前端入门视频教程 HTML5+CSS3+移动端布局-flex 布局 rem 布局响应式布局摹客蓝湖使用-简单有趣好玩 的教程。其实感觉从黑马视频里面学到蛮多的，特别是工具啊，Emmet 语法啊，但是感觉身边培训班出来的同事……

根据页面布局分成 5 个大模块，每个大块里面还有对应的子模块。

效果图如下：

效果截图在上面，PSD 在下面，具体实现过程中我就不放截图了。

实现

具体的模块分解实现部分。

通用

非页面布局的模块，甚至说与 HTML 的框架并没有特别大的关系。

通用部分是 CSS 的部分，包含重设预设的 margin, padding (* 部分) 以及一些会复用的 CSS，如 li 的去除 list-style， a 去除下划线，清除浮动的 clearfix 单独拉出来，等。

这部分的 CSS 如下：

* {margin: 0;padding: 0;
}
li {list-style: none;
}
a {text-decoration: none;
}
body {background-color: #f3f5f7;
}
.clearfix::before,
.clearfix::after {content: "";display: table;
}
.clearfix::after {clear: both;
}
.clearfix {*zoom: 1;
}
.container {width: 1200px;margin: auto;background-color: transparent;
}

头部, header

头部区是首页的最上面一块区域，根据功能分为以下 4 个子模块。根据页面设计，header 部分的所有元素都应该在同一行上。

头部模块的 HTML 如下：

<div class="header container">
div>

头部模块的 CSS 如下：

.header {height: 42px;margin: 30px auto;
}

其主要的意义是：

1. 先确认 header 部分，增加语义化结构
2. 复用 container 类，确定一块宽度为 1200px 的容器
3. 使用 CSS 对其美化和修饰，包括设置 header 的高度以及外边框
4. 为子元素的 float 属性做 wrapper

logo

logo 部分较为简单，主要是设定浮动、高度和宽度。

<div class="logo"><img src="./img/logo.png" alt="logo" />
div>

.logo {float: left;width: 198px;height: 42px;
}

导航栏, nav

通过 ul > li > a 的方式进行实现，一方面增强语义化结构，另外一方面直接使用很多的 a标签 会让搜索引擎有堆砌关键字的嫌疑，会降低网站排名。

HTML 部分相对简单，没有什么复杂的。

<div class="nav"><ul><li><a href="#">首页a>li><li><a href="#">课程a>li><li><a href="#">职业规划a>li>ul>
div>

CSS 部分较为复杂，首先，因为其中一个元素已经设定浮动了—— logo ——所以 header 中的其他部分也应该相应地设定浮动，或者清除浮动。根据布局的需求，nav 需要设置浮动。这句话后面就不再重复了，看页面就知道在同一个大元素之中的内容十有八九都是需要浮动的。

然后，再分别对 .nav 下的 ul, li, a 进行样式设计，主要包括 pading, margin, font-size, color, border 等，这方面所有出现 ul > li > a 的都会进行相应的适配，下文也就不再赘述。

其中需要注意的是，a 标签属于 行内元素，因此样式的适配不会对其产生作用，需要将其设置为 display: inline-block;。

CSS 部分如下：

.nav {float: left;margin-left: 60px;
}
.nav ul li {float: left;margin: 0 15px;
}
.nav ul li a {display: inline-block;height: 42px;line-height: 42px;padding: 0 10px;font-size: 18px;color: #050505;
}
.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}

搜索, search bar

用于搜索信息，用两个 input 进行实现。

我自己做的修改是使用了 伪类 进行实现，而没有多加一个 类名，并且 button 也不没有直接用 ，而是用了 对其进行绑定。

个人觉得，如果有 api 对应相对应的 search，是不是应该将 div 标签改为 form 比较好？毕竟要传数据到后台进行 query。

这里我将 .search input[type="text"] 部分的盒子模型计算方式改掉了: box-sizing: border-box;。pink 老师算完了整个盒子的宽度，然后再说要改宽度……我懒，就干脆改了计算方式。

<div class="search"><input type="text" name="" id="" placeholder="输入关键字" /><input type="button" value="" />
div>

.search {float: left;height: 42px;width: 412px;margin-left: 70px;
}
.search input[type="text"] {box-sizing: border-box;width: 360px;height: 42px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search input[type="button"] {float: right;width: 50px;height: 42px;border: 0;background: url("../img/fa-search.png");
}
.search input[type="button"]:hover {cursor: pointer;
}

用户信息, user profile

header 的最后一个模块，原本的视频中截取出来的图片就是圆形的，这里可以用 border-radius: 50%; 实现相同的功能。

另外原视频里面使用了一些 匿名块盒子，我做了一些相应的修改，也修正了一些 CSS 样式使得效果看起来差不多。

<div class="profile"><div class="profile-img"><img src="./img/pic.png" alt="" />div><p>qq-lileip>
div>

.profile {float: right;line-height: 42px;padding: 5px 30px 0 0;font-size: 14px;color: #666;
}
.profile div {float: left;
}
.profile img {border-radius: 50%;
}
.profile p {float: right;padding-left: 10px;
}

至此，header 区的实现就完成了。

一旦分解之后，整个页面的复杂度其实就下降很多了。

banner

banner 区是第二个大模块，也就是图片中 PHP 基础视频 为背景图的那个部分。

与 header 不太一样的是，banner 中包含了一个 container，因为 banner 的背景色需要占据整个页面的宽度。

banner 分为两个子模块，分别对应左右浮动（页面上也能看出来这样的效果）。

<div class="banner"><div class="container">div>
div>

.banner {height: 421px;background: #1c036c;
}
.banner .container {height: 421px;background: url("../img/banner.jpg") no-repeat top center;
}

子导航，sub-nav

依旧采取了 ul > li > a 的实现方法，其中有意思的是右侧的 > 效果是使用了 HTML 码 > 进行的实现，没有额外使用图片。

所有的 > 向右靠拢，这个实现方法就可以依靠 float:right; 来实现。

CSS 中其实只要当前最里面这个类就行了，也就是 .subnav，我也不知道为什么我前面又嵌套了一个 .banner 写成了 .banner .subnav 这样……

为了控制篇幅，从这以下就只放一个 item 了，其他的实现效果相同，可以用 cv 大法。

<div class="subnav"><ul><li><a href="#"><span>前端开发span><span class="gt-sign"> > span>a>li>ul>
div>

.banner .subnav {float: left;width: 190px;height: 421px;background: rgba(0, 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: #fff;
}
.banner .subnav ul li a:hover {color: #00a4ff;
}
.banner .subnav .gt-sign {float: right;
}

课程表，course

其中也可以分成 2 个子模块：

• 一个 course 里面的 header，即课程表标题

• 主元素就是课程表

  其中，这里面再嵌套了两个元素

  • 真正需要展示的课表内容

    同样熟悉的 ul > li 结构，只不过这次 li 里面嵌套了 h4 + p 的结构

  • 超链接显示全部列表，点击之后应该产生事件导航到 课程表 这个分页面去

这个时候就已经发现，其实 HTML 的结构都不麻烦，麻烦的就是样式了。

<div class="course"><h2>我的课程表h2><div class="bd"><ul><li><h4>继续学习 程序语言设计h4><p>正在学习-适用对象p>li>ul><a href="#" class="more">全部课程a>div>
div>

.banner .course {float: right;width: 230px;height: 330px;background: #fff;margin-top: 50px;
}
.banner .course h2 {height: 48px;background-color: #6bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}
.banner .course .bd {padding: 0 20px;
}
.banner .course .bd ul li {padding: 17px 0;border-bottom: 1px solid #ccc;
}
.banner .course .bd ul li h4 {font-size: 16px;color: #4e4e4e;
}
.banner .course .bd ul li p {font-size: 12px;color: #a5a5a5;
}
.banner .course .bd .more {display: block;height: 38px;border: 1px solid #00a4ff;text-align: center;line-height: 38px;color: #00a4ff;font-weight: 700;margin-top: 5px;
}

精品推荐(小区)

这部分的实现还是很简单的，依旧三个区，一个标题，一个 ul，最后一个修改提示。

<div class="product-suggestion container">div>

.product-suggestion {box-sizing: border-box;padding: 0 30px;margin-top: 10px;height: 60px;background-color: #fff;box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);line-height: 60px;
}

精品推荐(小区) 标题

<h3>精品推荐h3>

.product-suggestion h3 {float: left;font-size: 16px;color: #00a4ff;margin-right: 30px;
}

精品推荐(小区) ul

熟悉的 ul > li > 一个或多个元素 的套路：

<ul><li><a href="#">JQuerya>li>
ul>

.product-suggestion ul {float: left;
}
.product-suggestion ul li {float: left;
}
.product-suggestion ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}

精品推荐(小区) 修改兴趣

一个 a 标签 搞定。

<a href="#" class="mod">修改兴趣a>

.product-suggestion .mod {float: right;font-size: 14px;color: #00a4ff;
}

精品推荐(大区)

也是分成两个区：头部 和 主体。

<div class="core-product-suggestion container">div>

.core-product-suggestion {margin-top: 30px;
}

精品推荐(大区) 头部

再分成两个区，左边的 heading 和右边的一个 a 标签，这个分别用左右浮动就可以完成排版了。

<div class="core-product-suggestion-hd"><h3>精品推荐h3><a href="#">查看全部a>
div>

.core-product-suggestion-hd h3 {float: left;font-size: 20px;color: #494949;
}
.core-product-suggestion-hd a {float: right;font-size: 12px;color: #a5a5a5;margin: 10px 30px 0 0;
}

精品推荐(大区) 主体

熟悉的 ul > li > element(s) 的搭配，依旧以一个 li 举例说明。

每个 li 中的元素都对应着一个课程，其内容可以分解为：

• 课程图片
• 课程标题
• 部分详情
  • 等级
  • XXX 人正在学习

上面的模块写完了，到这里的模块应该就已经比较熟悉了，我这里唯一改动的一个部分就是 .core-product-suggestion-bd ul li 的 margin 相关。原视频的做法是将这个部分的盒子再撑开来一些，撑到好像是 1220px，这样就能放得下所有的盒子。我的话选择了用伪类去做: :nth-child(5n)。这个伪类的语法会挑中 5 的倍数的 li，即第 5 个，第 10 个，第 15 个，等。

这样的话以下算式就成立了：

$5\ast 228+4\ast 15=1200$

228px 是每个 li 的宽度，因为第五个的 margin-right 被清楚了，所以只需要计算 4 个 margin-right 的的部分，也就是 $15\ast 4=60$，合计就是 1200px

其他方面就比较简单了。

最后注意要在父元素加一个 clearfix，这是因为当前模块并没有设置固定高度，这种情况下父元素的高度为 0，下面的模块元素会顶上来。必须要清除浮动才能够让父元素的高度被正确的计算，使得下面的块级元素不会到处乱飘。

<div class="core-product-suggestion-bd clearfix"><ul><li><img src="./img/course.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练h4><div class="info"><span>高级span> · 1120人正在学习div>li>ul>
div>

.core-product-suggestion-bd ul {float: left;
}
.core-product-suggestion-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin: 0 15px 15px 0;
}
.core-product-suggestion-bd ul li:nth-child(5n) {margin-right: 0;
}
.core-product-suggestion-bd ul li img {width: 100%;
}
.core-product-suggestion-bd ul li h4 {margin: 20px;font-size: 14px;color: #050505;font-weight: 400;
}
.core-product-suggestion-bd ul li .info {margin: 0 20px;font-size: 12px;color: #999;
}
.core-product-suggestion-bd ul li .info span {color: #ff2c2d;
}

footer

footer 和 banner 一样，本身组件的宽度是整个设备的宽度，因此 container 都是被包在里面的。其下也分为两个大模块：

• copyright（左浮动）
• 尾部的超链（右浮动）

<div class="footer"><div class="container">div>
div>

.footer {height: 415px;background-color: #fff;margin-top: 15px;
}
.footer .container {padding-top: 20px;
}

copyright（左浮动）

再分为三个块级盒子，到这里就不需要解释特别多的东西了吧。

<div class="copyright"><img src="./img/logo.png" alt="logo" /><p>学成在线致力于普及中国最好的教育。它与中国一流大学和机构合作，提供在线课程。<br />© 2017年 XTGG Inc. 保留所有权利。-沪ICP备11111111号p><a href="#" class="app">下载APPa>
div>

.copyright {float: left;
}
.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}
.copyright .app {display: inline-block;width: 118px;height: 33px;text-align: center;line-height: 33px;border: 1px solid #00a4ff;font-style: 16px;color: #00a4ff;
}

尾部的超链（右浮动）

这次倒不是 ul > li > element(s) 了，而是 div > dl > dt+dd，但是都是列表的一种展现方式，实现方法是差不多的。

<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>
div>

.links {float: right;
}
.links dl {float: left;margin-left: 100px;
}
.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}
.links dl dd a {font-size: 12px;color: #333;
}

至此，页面就完成了。

跳过的部分，例如说图片的轮播切换，说是讲完定位之后再做。

其他资料

本篇用得到的知识点即内容包括：

• 想要完整代码的、PSD 的，这里面用的图片的，欢迎到 github 页面 自取。

  我知道这个想要的人最多，其他的都不重要，毁灭吧

• 浮动部分的笔记

• 浮动部分的案例

• CSS 选择符

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！