3. 学成在线页面制作

页面展示：

学成在线，是典型的企业级网站。

学习学成网的目的，是为了整体感知企业级网站布局流程，带着大家复习以前的知识。

3.1. 前期准备素材

• 学成在线 PSD 源文件
• 开发工具 = PS（切图） + sublime（代码） + chrome（测试）

3.2. 前期准备工作

先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。

1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。

2. 用 vscode 打开 study 目录文件夹.

3. study 目录内新建 images 文件夹，用于保存图片。

4. 新建首页文件 index.html（以后我们的网站首页统一命名规定为 index.html )。

5. 新建 style.css 样式文件。我们本次采用外链样式表。

6. 将样式引入到我们的 HTML 页面文件中。

7. 样式表写入清除内外边距的样式，来检测样式表是否引入成功。

3.3. 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路，具体如下：

​ 1.必须确定页面的版心（可视区），我们测量可得知。

​ 2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.

​ 3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则

​ 4.制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.

​ 5.所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.

3.4. 页面制作

确定版心：

​ 这个页面的版心是 1200 像素 ，每个版心都要水平居中对齐，所以，我们可以定义版心为公共类：

.w {
  width: 1200px;
  margin: auto;
}

3.4.1. header 头部制作

结构图如下：

• 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐, 上下给一个 margin 值就好了。
• 版心盒子 里面包含 2 号盒子 logo 图标
• 版心盒子 里面包含 3 号盒子 nav 导航栏
• 版心盒子 里面包含 4 号盒子 search 搜索框
• 版心盒子 里面包含 5 号盒子 user 个人信息
• 注意，要求里面的 4 个子盒子 必须都浮动

导航栏注意点:

实际开发中，重要的导航栏，我们不会直接用链接 a ，而是用 li 包含链接(li+a)的做法

​ 1.li+a 语义更清晰，一看这就是有条理的列表型内容。

​ 2.如果直接用 a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

注意:

​ 1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.

​ 2.这个 nav 导航栏可以不给宽度,将来可以继续添加其余文字

​ 3.因为导航栏里面文字不一样多,所以最好给链接 a 左右 padding 撑开盒子,而不是指定宽度

4 号盒子 search 的细节：

​ search 搜索框的意思: 一个 search 大盒子里面包含 2 个 表单

​ 技巧：input 和 button 都，属于行内块元素，会有缝隙，使用浮动，可以去缝隙。

3.4.2. banner 制作

结构图如下：

• 1 号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景。
• 2 号盒子是版心 w， 要水平居中对齐。
• 3 号盒子版心内，左对齐 subnav 侧导航栏。
• 4 号盒子版心内，右对齐 course 课程。

3.4.2.1 subnav 侧导航栏 (左侧的)

• subnav 盒子 背景色 黑色半透明
• 重要的导航栏，li 包 a ，行高 45px
• a 里面包含文字和 span，span 右浮动
• 当鼠标经过 a ，a 里面的内容（文字和 span）变蓝色

3.4.2.2 course 课程表模块 (右侧的)

结构图如下：

• 1 号盒子 是 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题
• 1 号盒子内 分为 上下 两个 子盒子
• 2 号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)
• 3 号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)

3.4.3. 精品推荐小模块

结构图如下：

• 复习点： 因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了，还记得 那些 样式可以继承吗？？？ font- line- text- color

• 大盒子水平居中 goods 精品 ，注意此处有个盒子阴影

• 1 号盒子是标题 H3 左侧浮动

• 2 号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）

• 3 号盒子 右浮动 mod 修改

3.4.4. 精品推荐大模块

结构图如下：

• 1 号盒子为最大的盒子 box 版心水平居中对齐
• 2 号盒子为上面部分 box-hd -- 里面 左侧标题 H3 左浮动 右侧 链接 a 右浮动
• 3 号盒子为底下部分 box-bd --- 里面是无序列表 有 10 个 小 li 组成
• 小 li 外边距的问题， 这里有个小技巧。 给 box-hd 宽度为 1215 就可以一行装开 5 个 li 了
• 复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。

3.4.5. 底部模块制作

结构图如下：

• 1 号盒子通栏大盒子 底部 footer 给高度 底色是白色

• 2 号盒子版心水平居中

• 3 号盒子版权 copyright 左对齐

• 4 号盒子 链接组 links 右对齐

2. 综合案例：学成在线-hot 模块添加

2. 1 案例截图：

1571385860679

2.2 案例分析

1. 一个大的 li 中包含 一个课程图片，课程介绍文字信息，还有 hot 的小图标；
2. hot 图片重叠在课程图片上面—— 脱标，不占位置，需要使用绝对定位；
3. hot 图片重叠在li 的右上方 —— 需要使用边偏移确定准确位置。

2.3 案例小结

1. 子绝父相 —— 子元素使用绝对定位，父元素使用相对定位；
2. 与浮动的对比：
   • 绝对定位：脱标，利用边偏移指定准确位置；
   • 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。

课堂练习：模拟老师的随堂案例完成哈根达斯案例（5 分钟）。

结构修改：

<!-- 修改.box-bd里面的li标签内容，添加一个hot图标 -->

<li>
  <!-- 添加hot小图片 -->
  <em>
    <img src="images/hot.png" alt="" />
  </em>
  <img src="images/pic.png" alt="" />
  <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  <div class="info"><span>高级</span> • 1125人在学习</div>
</li>

样式修改：

.box-bd ul li {
  /* 子绝父相 */
  /* 父元素相对定位 */
  position: relative;
  float: left;
  width: 228px;
  height: 270px;
  background-color: #fff;
  margin-right: 15px;
  margin-bottom: 15px;
}
.box-bd ul li > img {
  width: 100%;
}
.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}
.box-bd ul li em {
  /* 子元素绝对定位 */
  position: absolute;
  top: 4px;
  right: -4px;
}

3. 定位(position)的应用

3.1. 固定定位小技巧： 固定在版心左侧位置。

小算法：

1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

案例效果：

1571389241926

<style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>

</body>

3.2. 堆叠顺序（z-index）

• 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z 轴)

• 语法：

  选择器 {
  	z-index: 1;
  }
  

• z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  2. 如果属性值相同，则按照书写顺序，后来居上；
  3. 数字后面不能加单位。

  注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

• 应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

zindex示意图

案例演示：堆叠顺序。

4. 定位(position)的拓展

4.1 绝对定位的盒子居中

注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法：

绝对定位水平居中

1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

盒子居中定位示意图

绝对定位居中示意图

4.2 定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

• 可以用 inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

4.3 脱标的盒子不会触发外边距塌陷

浮动元素、**绝对定位(固定定位）**元素的都不会触发外边距合并的问题。 （我们以前是用 padding border overflow 解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

4.4 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

5. 综合案例 - 淘宝轮播图(重点)

5.1 效果图

5.2 布局分析

1571397019689

5.3 步骤

1. 大盒子我们类名为： tb-promo 淘宝广告

2. 里面先放一张图片。

3. 左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next

   ​ 左按钮样式（border-radius：左上，右上，右下，左下），

   ​ 右按钮定位，提取左右按钮共同的样式代码（并集选择器）

4. 底侧小圆点 ul 继续做。 类名为 promo-nav

   ​ 中间长方形椭圆 ul 的定位（水平居中，离底部 15px）

   ​ 长方形需要五个小圆点，ul 无序列表，li 浮动，椭圆中小圆点的样式

5.4 知识点：圆角矩形设置 4 个角

圆角矩形可以为 4 个角分别设置圆度， 但是是有顺序的

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

• 如果 4 个角，数值相同

  border-radius: 15px;
  

• 里面数值不同，我们也可以按照简写的形式，具体格式如下:

border-radius: 左上角 右上角 右下角 左下角;

还是遵循的顺时针。

5.5 代码参考

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>淘宝轮播图做法</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }

      .tb-promo {
        position: relative;
        width: 520px;
        height: 280px;
        background-color: pink;
        margin: 100px auto;
      }

      .tb-promo img {
        width: 520px;
        height: 280px;
      }

      /* 并集选择器可以集体声明相同的样式 */
      .prev,
      .next {
        position: absolute;
        /* 绝对定位的盒子垂直居中 */
        top: 50%;
        margin-top: -15px;
        /* 加了绝对定位的盒子可以直接设置高度和宽度 */
        width: 20px;
        height: 30px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        line-height: 30px;
        color: #fff;
        text-decoration: none;
      }

      .prev {
        left: 0;
        /* border-radius: 15px; */
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
      }

      .next {
        /* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理  top  bottom  会执行 top */
        right: 0;
        /* border-radius: 15px; */
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }
      .promo-nav {
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -35px;
        width: 70px;
        height: 13px;
        /* background-color: pink; */
        background: rgba(255, 255, 255, 0.3);
        border-radius: 7px;
      }
      .promo-nav li {
        float: left;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
        margin: 3px;
      }
      /* 不要忘记选择器权重的问题 */
      .promo-nav .selected {
        background-color: #ff5000;
      }
    </style>
  </head>

  <body>
    <div class="tb-promo">
      <img src="images/tb.jpg" alt="" />
      <!-- 左侧按钮箭头 -->
      <a href="#" class="prev"> &lt; </a>
      <!-- 右侧按钮箭头 -->
      <a href="#" class="next"> &gt; </a>
      <!-- 小圆点 -->
      <ul class="promo-nav">
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

6. 网页布局总结

通过盒子模型，清楚知道大部分 html 标签是一个盒子。

通过 CSS 浮动、定位 可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

6.1. 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

6.2. 浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

6.3. 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

7. 元素的显示与隐藏

• 目的（本质）

  ​ 让一个元素在页面中消失或者显示出来

• 场景

  ​ 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

7.1. display 显示（重点）

• display 设置或检索对象是否及如何显示。

  display: none 隐藏对象
  
  display：block 除了转换为块级元素之外，同时还有显示元素的意思。
  

• 特点： display 隐藏元素后，不再占有原来的位置。

• 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

  配合后面 js 做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

7.2. visibility 可见性 （了解）

• visibility 属性用于指定一个元素应可见还是隐藏。

  visibility：visible ; 　元素可视
  
  visibility：hidden; 　  元素隐藏
  

• 特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

• 如果隐藏元素想要原来位置， 就用 visibility：hidden

• 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

7.3. overflow 溢出（重点）

• overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

• 但是如果有定位的盒子， 请慎用 overflow:hidden 因为它会隐藏多余的部分。

• 实际开发场景：

1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

7.4. 显示与隐藏总结

属性	区别	用途
display 显示 （重点）	隐藏对象，不保留位置	配合后面 js 做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

8 综合案例：土豆网鼠标经过显示遮罩

8.1. 效果图

8.2. 案例目标

1.练习元素的显示与隐藏

2.练习元素的定位

8.3. 核心原理

原先半透明的黑色遮罩看不见， 鼠标经过 大盒子，就显示出来。

遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用。

8.4. 代码参考

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>仿土豆网显示隐藏遮罩案例</title>
    <style>
      .tudou {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 30px auto;
      }

      .tudou img {
        width: 100%;
        height: 100%;
      }

      .mask {
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4) url(https://minio.h.wyix.top:558/images/docs/docfront/css/pyg/arr.png)
          no-repeat center;
      }

      /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
      .tudou:hover .mask {
        /* 而是显示元素 */
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="tudou">
      <div class="mask"></div>
      <img src="images/tudou.jpg" alt="" />
    </div>
    <div class="tudou">
      <div class="mask"></div>
      <img src="images/tudou.jpg" alt="" />
    </div>
    <div class="tudou">
      <div class="mask"></div>
      <img src="images/tudou.jpg" alt="" />
    </div>
    <div class="tudou">
      <div class="mask"></div>
      <img src="images/tudou.jpg" alt="" />
    </div>
  </body>
</html>

品优购项目-上

目标

• 能够遵循品优购代码规范
• 能够在品优购首页中引入 favicon 图标
• 能够说出三大标签 SEO 优化
• 能够在品优购首页中使用字体图标
• 能够说出 LOGO 需要哪些 SEO 优化

品优购项目规划

网站制作流程

原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容

**效果图：**告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等

品优购项目介绍

• **项目名称：**品优购
• **项目描述：**品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作

主页

列表页

注册页

品优购项目的学习目的

• 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术
• 品优购项目能复习、总结、提高基础班所学布局技术
• 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知
• 为后期学习移动端项目做铺垫

开发工具以及技术栈

开发工具

VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）

技术栈

• 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式
• 采取结构与样式相分离，模块化开发
• 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹--- 品优购代码规范.md）

品优购项目搭建工作

创建的文件夹如下（称为项目结构）

创建文件如下

初始化样式

有些网站初始化的不太提倡 * {
  margin: 0;
  padding: 0;
}
比如新浪： html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
  margin: 0;
  padding: 0;
}

项目模块化开发

所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点

代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有(如下图)。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

• 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
• 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
• 模块化开发具有重复使用、修改方便等优点

网站 favicon 图标（★★★）

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

制作 favicon 图标

• 把品优购图标切成 png 图片
• 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

使用 favicon 图标

favicon 图标放到网站根目录下

HTML 页面引入 favicon 图标

在 html 页面里面的 <head> </head>元素之间引入代码

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

TDK 三大标签 SEO 优化（★★）

SEO 是什么

**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化

TDK 是什么

T -- Title（网站标题）

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

**建议：**网站名（产品名）- 网站的介绍 （尽量不要超过 30 个汉字）

例如：

• 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
• 小米商城 - 小米 5s、红米 Note 4、小米 MIX、小米笔记本官方网站

D -- description（网站描述）

简要说明我们网站主要是做什么的。

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“××× 网作为…”、“电话：010…”之类语句。

例如：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

K -- keywords （关键字）

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords 最好限制为 6 ～ 8 个关键词，关键词之间用英文逗号隔开，采用 关键词 1,关键词 2 的形式

例如：

<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备

示例代码

<head>
  ...
  <title>
    品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  </title>
  <!-- 网站说明 -->
  <meta
    name="description"
    content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
  />
  <!-- 关键字 -->
  <meta
    name="keywords"
    content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
  />
  ...
</head>

品优购首页制作

我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到 common.css 里面

常用模块类名命名

公共部分 -- header 头部制作

快捷导航 shortcut 制作（★★）

布局思路

• 通栏的盒子命名为 shortcut ，是快捷导航的意思。 注意这里的行高，可以继承给里面的子盒子
• 里面包含版心的盒子
• 版心盒子里面包含 1 号左侧盒子左浮动
  • 1 号盒子 里面包含一个ul，ul包裹 li，第一个 li 里面包裹文字就行，因为不能点击，第二个 li 包含两个 a 标签
  • 里面的内容是水平排列，所以需要给li设置浮动
  • 文字要垂直居中，我们可以给 shortcut 设置行高，因为行高可以继承，里面的孩子就不需要设置了
• 版心盒子里面包含 2 号右侧盒子右浮动
  • 2 号盒子 里面包含一个ul，ul包裹li，中间的|可以用样式去设置，也可以用字符 |
  • 里面内容水平排列，给li设置浮动
  • 找到里面所有偶数的 li 设置样式（偶数的 li 显示是一个 | 竖线，所以需要单独选择出来设置样式，利用 nth-child 就可以实现）
• 需要用到字体图标
  • 利用伪元素的方式来实现字体图标，给需要添加的标签设置类名为 ： arrow-icon
  • 先要引入字体图片的资源
  • 在样式里面利用 font-face 来进行声明
  • 在伪元素的 content 属性设置 图标的编码
  • 给伪元素设置 font-family 属性

结构示例代码

<!-- 快捷导航模块 start -->
<section class="shortcut">
  <div class="w">
    <div class="fl">
      <ul>
        <li>品优购欢迎您！&nbsp;</li>
        <li>
          <a href="#">请登录</a> &nbsp;
          <a href="#" class="style_red">免费注册</a>
        </li>
      </ul>
    </div>
    <div class="fr">
      <ul>
        <li>我的订单</li>
        <li></li>
        <li class="arrow-icon">我的品优购</li>
        <li></li>
        <li>品优购会员</li>
        <li></li>
        <li>企业采购</li>
        <li></li>
        <li class="arrow-icon">关注品优购</li>
        <li></li>
        <li class="arrow-icon">客户服务</li>
        <li></li>
        <li class="arrow-icon">网站导航</li>
      </ul>
    </div>
  </div>
</section>

样式示例代码

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?tomleg");
  src: url("../fonts/icomoon.eot?tomleg#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?tomleg")
      format("truetype"), url("../fonts/icomoon.woff?tomleg") format("woff"), url("../fonts/icomoon.svg?tomleg#icomoon")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* 快捷导航模块 */
.shortcut {
  height: 31px;
  line-height: 31px;
  background-color: #f1f1f1;
}
.shortcut ul li {
  float: left;
}
/* 选择所有的偶数的小li */
.shortcut .fr ul li:nth-child(even) {
  width: 1px;
  height: 12px;
  background-color: #666;
  margin: 9px 15px 0;
}
.arrow-icon::after {
  content: "\e91e";
  font-family: "icomoon";
  margin-left: 6px;
}

header 头部模块搭建（★★★）

• header 盒子必须要有高度

• 1 号盒子是 logo 标志定位，在正常开发过程中，logo 的布局其实是有讲究的，需要进行 logoSEO的优化 （★★★）

• logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要

• h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可

• 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来

  • 方法 1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法
  • 方法 2：直接给 font-size: 0; 就看不到文字了，京东的做法

• 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了

结构代码

<!-- logo模块 -->
<div class="logo">
  <h1>
    <a href="index.html" title="品优购商城">品优购商城</a>
  </h1>
</div>

样式代码

/* header 头部制作 */
.header {
  position: relative;
  height: 105px;
}
.logo {
  position: absolute;
  top: 25px;
  width: 171px;
  height: 61px;
}
.logo a {
  display: block;
  width: 171px;
  height: 61px;
  background: url(../images/logo.png) no-repeat;
  /* font-size: 0;京东的做法*/
  /* 淘宝的做法让文字隐藏 */
  text-indent: -9999px;
  overflow: hidden;
}

• 2 号盒子是 search 搜索模块定位

• search 盒子利用定位的方式放在对应的位置

• search 盒子设置绝对定位，header 盒子设置相对定位

• search 盒子里面包含两个子元素，一个是输入框，一个是按钮，分别跟定固定的宽高（搜索框 宽度：454px；按钮宽度：80px）

• 输入框和按钮本来就是行内块元素，在一行显示，但是中间会有间隙，所以我们可以让让这两个元素浮动起来

结构代码

<!-- search搜索模块 -->
<div class="search">
  <input type="search" name="" id="" placeholder="语言开发" />
  <button>搜索</button>
</div>

样式代码

.search {
  position: absolute;
  left: 346px;
  top: 25px;
  width: 538px;
  height: 36px;
  border: 2px solid #b1191a;
}
.search input {
  float: left;
  width: 454px;
  height: 32px;
  padding-left: 10px;
}
.search button {
  float: left;
  width: 80px;
  height: 32px;
  background-color: #b1191a;
  font-size: 16px;
  color: #fff;
}

• 3 号盒子是 hotwords 热词模块定位

• 热词模块怎么简单怎么来，直接在里面放 a 标签即可

• 给里面所有的 a 标签设置 左右 10px 的外边距

• 给第一个 a 标签设置文字变红色（#c81623）

结构代码

<!-- hotwords模块制作 -->
<div class="hotwords">
  <a href="#" class="style_red">优惠购首发</a>
  <a href="#">亿元优惠</a>
  <a href="#">9.9元团购</a>
  <a href="#">美满99减30</a>
  <a href="#">办公用品</a>
  <a href="#">电脑</a>
  <a href="#">通信</a>
</div>

样式代码

.hotwords {
  position: absolute;
  top: 66px;
  left: 346px;
}
.hotwords a {
  margin: 0 10px;
}

• 4 号盒子是 shopcar 购物车模块

• 在shopcar里面添加一个 before 伪元素和 after 伪元素，分别放置 购物车的图标和 右箭头

• count 统计部分用绝对定位做

• count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度

• 一定注意左下角不是圆角，其余三个是圆角 写法： border-radius: 7px 7px 7px 0;

结构代码

<!-- 购物车模块 -->
<div class="shopcar">
  我的购物车
  <i class="count">8</i>
</div>

样式代码

.shopcar {
  position: absolute;
  right: 60px;
  top: 25px;
  width: 140px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #dfdfdf;
  background-color: #f7f7f7;
}
.shopcar::before {
  content: "\e93a";
  font-family: "icomoon";
  margin-right: 5px;
  color: #b1191a;
}
.shopcar::after {
  content: "\e920";
  font-family: "icomoon";
  margin-left: 10px;
}
.count {
  position: absolute;
  top: -5px;
  left: 105px;
  height: 14px;
  line-height: 14px;
  color: #fff;
  background-color: #e60012;
  padding: 0 5px;
  border-radius: 7px 7px 7px 0;
}

nav导航模块制作（★★★）

• nav 盒子通栏有高度，而且有个下边框，里面包含版心，版心里面包含 1 号盒子 和 2 号盒子

  结构代码

  <nav class="nav">
    <div class="w">
      <div class="dropdown">...</div>
      <div class="navitems">...</div>
    </div>
  </nav>
  

  样式代码

  .nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
  }
  

• 1 号盒子左侧浮动，dropdown

  • 1 号盒子有讲究，根据相关性 里面包含 .dt 和 .dd 两个盒子
  • .dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了
  • 给 .dd 盒子设置宽度 和 高度，以及背景颜色
  • 给 .dd 盒子里面定义 无序列表 （ul > li > a）
  • 每个 li 都有一个高度（31px），宽度可以不用设置，让文字垂直居中，左边设置 2 个像素的 margin 值
  • 给 li 里面的 a 设置文字大小（14px）
  • 给 li 设置 hover，当鼠标移入的时候，让li的背景变成白色，让里面的文字变成红色
  • li 右侧的三角 就可以利用 伪元素来实现，给伪元素设置字体图标，利用定位的方式放在li的右侧，那么给li设置相对定位

  结构代码

  <div class="dropdown">
    <div class="dt">全部商品分类</div>
    <div class="dd">
      <ul>
        <li><a href="#">家用电器</a></li>
        <li>
          <a href="#">手机</a>、 <a href="#">数码</a>、<a href="#">通信</a>
        </li>
        <li><a href="#">电脑、办公</a></li>
        <li><a href="#">家居、家具、家装、厨具</a></li>
        <li><a href="#">男装、女装、童装、内衣</a></li>
        <li><a href="#">个户化妆、清洁用品、宠物</a></li>
        <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
        <li><a href="#">运动户外、钟表</a></li>
        <li><a href="#">汽车、汽车用品</a></li>
        <li><a href="#">母婴、玩具乐器</a></li>
        <li><a href="#">食品、酒类、生鲜、特产</a></li>
        <li><a href="#">医药保健</a></li>
        <li><a href="#">图书、音像、电子书</a></li>
        <li><a href="#">彩票、旅行、充值、票务</a></li>
        <li><a href="#">理财、众筹、白条、保险</a></li>
      </ul>
    </div>
  </div>
  

  样式代码

  .dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
  }
  .dropdown .dd {
    display: none;
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
  }
  .dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
  }
  .dropdown .dd ul li:hover {
    background-color: #fff;
  }
  .dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    font-family: "icomoon";
    content: "\e920";
    font-size: 14px;
  }
  .dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
  }
  .dropdown .dd ul li:hover a {
    color: #c81623;
  }
  

• 2 号盒子左侧浮动，navitems 导航栏组

  • 里面结构是 ul > li > a
  • 导航栏都是能点击的，所以我们不能给定宽度，给a左右的padding把两侧撑开
  • 让文字垂直居中（行高等于高度）

  结构代码

  <div class="navitems">
    <ul>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
      <li><a href="#">服装城</a></li>
    </ul>
  </div>
  

  样式代码

  .navitems ul li {
    float: left;
  }
  .navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
  }
  

公共部分 -- footer 底部制作

• footer 页面底部盒子通栏给一个高度（415px）和灰色的背景

• footer 里面有一个大的版心

• 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思

  • 给 mod_service 设置高度（80px）和下边框
  • 在里面定义 ul > li ,每个li 宽度是 300px 高度是 50px，给每个li设置 35px 的左内边距
  • 在每个li里面，放一个 h5（里面放图标），一个div（里面放div和p）
  • 给 h5设置浮动，让 h5 与这个 div 左右排列
  • 通过精灵图技术（核心思路：利用 background-position 来实现），把图标设置给 h5

  结构代码

  <div class="mod_service">
    <ul>
      <li>
        <h5></h5>
        <div class="service_txt">
          <h4>正品保障</h4>
          <p>正品保障,提供发票</p>
        </div>
      </li>
      <li>
        <h5></h5>
        <div class="service_txt">
          <h4>正品保障</h4>
          <p>正品保障,提供发票</p>
        </div>
      </li>
      <li>
        <h5></h5>
        <div class="service_txt">
          <h4>正品保障</h4>
          <p>正品保障,提供发票</p>
        </div>
      </li>
      <li>
        <h5></h5>
        <div class="service_txt">
          <h4>正品保障</h4>
          <p>正品保障,提供发票</p>
        </div>
      </li>
    </ul>
  </div>
  

  样式代码

  /* 底部模块制作 */
  .footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
  }
  .mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
  }
  .mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
  }
  .mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -252px -2px;
    margin-right: 8px;
  }
  .service_txt h4 {
    font-size: 14px;
  }
  .service_txt p {
    font-size: 12px;
  }
  

• 版心里面包含 2 号盒子，mod_help 是帮助模块

  • 给 mod_help 设置 50px 的左内边距和 20px 的上内边距，给定高度（185px）
  • 里面的布局利用 自定义列表来实现（dl > dt + dd）
  • 给 dl 设置浮动，让其可以水平排列，给每个 dl 盒子设置宽度
  • 给 dt 设置文字大小（16px），设置下外边距（10px），让dt和dd之间有些距离
  • 最后一个 dl 结构和样式不一样，需要单独设置

  <div class="mod_help">
    <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>
      <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>
      <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>
      <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>
      <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>
      <dd><a href="#">联系客服</a></dd>
    </dl>
    <dl>
      <dt>帮助中心</dt>
      <dd><img src="images/wx_cz.jpg" alt="" /> 品优购客户端</dd>
    </dl>
  </div>
  

  样式代码

  .mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
  }
  .mod_help dl {
    float: left;
    width: 200px;
  }
  .mod_help dl:last-child {
    width: 90px;
    text-align: center;
  }
  .mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
  }
  

• 版心里面包含 3 号盒子，mod_copyright 是版权模块

  • 分为上下两块，上面是 links 友情链接，下面是 copyright，给 mod_copyright 大盒子设置 文字水平居中，20px 的上内边距，让上面内容和下面内容之间有些间隙
  • 把内容分别复制到相应模块中
  • 给 links 设置 15px 的下外边距，给links 里面 的 a 标签设置 左右 3px 的外边距
  • 给copyright 设置 20px 的行高

  结构代码

  <div class="mod_copyright">
    <div class="links">
      <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻
      | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 |
      English Site | Contact U
    </div>
    <div class="copyright">
      地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
      电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
      京ICP备08001421号京公网安备110108007702
    </div>
  </div>
  

  样式代码

  .mod_copyright {
    text-align: center;
    padding-top: 20px;
  }
  .links {
    margin-bottom: 15px;
  }
  .links a {
    margin: 0 3px;
  }
  .copyright {
    line-height: 20px;
  }
  

demo