学成在线 制作分解版

学成在线

资源在 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 也不没有直接用 <button></button>，而是用了 <input type="button" value="" /> 对其进行绑定。

个人觉得，如果有 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-lilei</p>
</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"> &gt; </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="#">JQuery</a></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 />
    &copy; 2017年 XTGG Inc. 保留所有权利。-沪ICP备11111111号
  </p>
  <a href="#" class="app">下载APP</a>
</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 选择符