PC端静态网页应用开发及项目（拉勾网项目案例）

大大大石头
435 阅读28分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

PC端静态网页应用开发及项目（拉勾网项目案例）

网页项目开发流程

  1. 需求分析：对开发产品进行初始定位（类型、功能、目标人群、达成目的）
  2. 整体规划：根据分析结论，确定网站内容、层次、形式，有策划人元给出对应的文案
  3. 界面设计：设计师根据规划方案、出设计方案，最终给出设计图、颜色、数据信息等
  4. 前端程序设计：开发人员根据设计图转化为代码、实现功能、界面
  5. 前后端系统整合：后端开发人员进行数据库设计，将程序功能和界面进行整合，前后端配合进行功能调试。
  6. 测试验收：项目经历和相关测试人员，根据项目前期策划需求对产品进行测试、验收，发现问题、反馈意见给前面步骤，进行优化

页面开发的常见概念和布局流程

版心

网页中主要内容所在的区域，一般在浏览器窗口中水平居中显示，从而让用户视线更集中

  • 常见版心宽度包括960px、980px、1000px、1200px（目前常用）等
  • 使用标准流中的margin居中方法margin：垂直 auto

页面布局流程

  1. 确定页面版心：使用测量工（PS等）工具测量版心宽度
  2. 分析页面中的行模块，以及每个行模块中的列模块
  3. 制作HTML页面、CSS文件
  4. CSS初始化，然后开始运用盒模型原理，通过DIV+CSS布局来控制各模块

常见布局类型

一列固定宽度居中：所有模块在版心内部从上到下一行一行排列

两列左窄右宽：在上面的基础上，将内容区域分成左右两栏，左边侧边栏导航

通栏平均分布：头部和尾部宽度等于body宽度，中间部分分栏平均分布

更多情况下，一个网也可能包含两个或者两个以上布局类型

拉勾网项目制作案例（以下内容全部参考拉勾设计图）

文件结构

最基本文件夹结构：

  • index.html
  • CSS文件夹
    • css文件
  • images文件夹
    • 素材文件

head标签内部配置

title：网站标题
标签页icon图标：
  • 图标文件要求以favicon.ico命名，文件需要与index.html同级存储
  • 通过link标签引入，设置的属性包括
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
CSS分级引入
  • CSS文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共的部分，提供给多个HTML文件使用，公共的不分可以划分范围，有的是所有网站都能用，有的是某些网站能用的
  • CSS常见的分层组织：清除默认样式CSS + 网站公共样式CSS + 每个页面独有CSS
  • 注意书写顺序，多层隐引入时，需要按照后面层叠前面CSS进行引入，页面独有的样式放在最后（越是适用范围越小的越最后引入）
清除默认样式
  • 所有网站都可使用，一般是自己工作中积累或者使用的网络资源
  • 命名习惯：reset.css
  • 引入时作为第一层引入，网页中独有的样式可以层叠掉，reset.css写完后不允许再次更改
公共样式
  • 单独的一个网站所有页面、几个页面可以使用，可以从设计图中观察，找到多个页面中公共的部分，花分成不同的模块分别进行CSS书写
  • 命名习惯：common.css或者模块名.css
  • 多个页面的公共样式书写完之后不允许后期修改，一旦更改，可能会引起多个页面发生变化，需要注意类名的使用，公共文件的类名一般不要在其他文件中再使用，
  • 一般在清除默认样式的CSS文件之后引入，单独样式的前面
页面单独样式
  • 适用于单独HTML页面，，找到页面独有的样式，单独书写在一个css文件中，只能这个页面可以调用
  • 命名习惯：一般和HTML名保持一致，例如index.css，或者可以更细致的拆分，比如index_banner.css
  • 一般在公共样式后面引入，注意选择器权重的问题
例子
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css"">
<link rel="stylesheet" href="./css/index.css"">
base.css

一些网站里的公共样式（初始化），包括一些文字样式、版心样式等等

/* 初始化样式 */
body {
  font-size: 14px;
  font-family: "Hiragino Sans GB","Microsoft Yahei","SimSun","Arial","Helvetica Neue","Helvetica";
  color: #333;
}
/* 修改a默认样式 */
a {
  color: #555555;
  text-decoration: none;
}
a:hover {
  color: #00b38a;
}
/* 公共样式 */
/* 版心公共样式 */
.inner-c {
  width: 1200px;
  margin: 0 auto;
}

index.html结构布局

header（顶部）区域整体布局

BtBN7D.png

结构分析：

header宽度为body宽度，内容区域在最中间，宽度和版心宽度相同（1200px），版心水平居中，内容区域分为左右两部分，可以设置左侧向左浮动，右侧向右浮动，浮动元素不设置宽度会尽可能撑到最大，所以不需要设置宽度

代码：可以考虑新建一个header.css文件（因为头部属于通用部分，后面可以复用）

<!-- header部分开始 -->
<header class="header">
    <!-- 版心 -->
    <div class="inner-c header-c">
        <!-- header左侧 -->
        <div class="header-left">左浮动</div>
        <!-- header右侧 -->
        <div class="header-right">右浮动</div>
    </div>
</header>
<!-- header部分结束 -->

/* header区域 */
.header {
    width: 100%;
    height: 40px;
    background-color: #32373e;
    /* 方便查看 后期删除 */
    color: aliceblue;
    /* 内部元素行高继承 */
    line-height: 40px;
}
.header-c {
    /* 高度等于header高度 */
    height: 40px;
}
/* 左浮动 */
.header-c .header-left {
    float: left;
}
/* 右浮动 */
.header-c .header-right {
    float: right;
}
LOGO部分、城市选择

结构分析：

使用一个大盒子包裹城市名和切换城市，设置左浮动，内包括两个行内元素（span + i），注意文字颜色、鼠标移上变色、手型，距离等数据使用ps量取

<!-- 在左浮动盒子内增加元素 -->
<div class="header-left">
    <!-- logo区域 -->
    <h1 class="logo">
        <a href="index.html">拉勾招聘|招聘|求职|互联网培训|JAVA|前端</a>
    </h1>
    <!-- 城市切换 -->
    <div class="city">
        <span>全国站</span><i>[切换城市]</i>
    </div>
</div>

/* 左侧logo 左浮动、宽度（高度自动撑开）、上右外边距 */
.header-c .header-left .logo {
    float: left;
    width: 43px;
    margin-top: 9px;
    margin-right: 34px;
}
/* logo下面a标签 转块 宽高 背景 隐藏文字 */
.header-c .header-left .logo a {
    display: block;
    width: 43px;
    height: 21px;
    background: url(../images/logo.png) no-repeat;
    text-indent: -99em;
    overflow: hidden;
}
/* 城市切换模块 左浮动 宽度 右边距 鼠标移上手型 */
.header-c .header-left .city {
    float: left;
    width: 111px;
    margin-right: 33px;
    cursor: pointer;
}
/* 当前城市 文字颜色 右边距 */
.header-c .header-left .city span {
    color: #0dca9f;
    margin-right: 12px;
}
/* 切换城市 字号 文字颜色 */
.header-c .header-left .city i {
    font-size: 12px;
    color: #afb5c0;
}
/* 鼠标移上变色 */
.header-c .header-left .city:hover i {
    color: #fff;
}
左侧导航栏nav

BUrUSJ.png

结构分析：

导航栏可以使用ul无序列表构建，ul嵌套li标签，每个li嵌套a标签，最后一个课程右上角有一个小标签，可以使用span制作 然后使用定位

<!-- index.html-->

<ul class="nav">
    <li class="current"><a href="index.html">首页</a></li>
    <li><a href="javascricp:;">公司</a></li>
    <li><a href="javascricp:;">校园招聘</a></li>
    <li><a href="javascricp:;">职位</a></li>
    <li><a href="javascricp:;">言职</a></li>
    <li><a href="javascricp:;">课程<span class="tips">new</span></a></li>
</ul>

/* header.css*/

/* 左侧导航栏 向左浮动 */
.header-c .header-left .nav {
    float: left;
}
/* 导航栏内部标签也向左浮动 */
.header-c .header-left .nav li {
    float: left;
}
/* 标签下面的a元素设置相对定位、转块、左右内边距撑开、默认文字颜色 */
.header-c .header-left .nav li a {
    position: relative;
    display: block;
    padding: 0 21px;
    color: #afb5c0;
}
/* a标签鼠标移入改变颜色 */
.header-c .header-left .nav li a:hover {
    color: #fff;
}
/* li.current交集选择器，选择即是类名current的li元素，下面的a标签特殊样式 */
.header-c .header-left .nav li.current a {
    background: #24282c;
    color: #fff;
}
/* new小标签，绝对定位，宽高、背景色、居中、圆角矩形 */
.header-c .header-left .nav li a .tips {
    position: absolute;
    right: -2px;
    top: 3px;
    height: 18px;
    width: 29px;
    border-radius: 8px 9px;
    background: #ff7452;
    color: #FFF;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}
header右侧导航栏

BUHmMq.png

结构分析：

可以使用6个a标签来制作，每个a都向左浮动，整个右侧向右浮动即可，上面的小图标可以使用小标签绝对定位制作，这样不会影响标准流，登录和注册中间的|用span标签制作，注意每个a标签之间间距都不同，所以设置多个类名即可

<!-- index.html -->

<!-- header右侧 -->
<div class="header-right">
    <!-- 6个a标签 span书写分隔符 -->
    <a href="sprict:;" class="updown">上传简历</a>
    <a href="sprict:;" class="position">职位订阅</a>
    <a href="sprict:;" class="login"><i></i>登录</a>
    <span>|</span>
    <a href="sprict:;" class="register">注册</a>
    <a href="sprict:;" class="app"><i></i>拉勾APP</a>
    <a href="sprict:;" class="enterprise">进入企业版</a>
</div>

/* 右浮动 */
.header-c .header-right {
    float: right;
}
/* 所有a标签左浮动，相对定位、文字颜色 */
.header-c .header-right a {
    position: relative;
    display: block;
    float: left;
    color: #afb5c0;
}
/* a标签鼠标选中颜色 */
.header-c .header-right a:hover {
    color: #fff;
}
/* 设置右外边距，撑开距离 */
.header-c .header-right .updown {
    margin-right: 23px;
}
.header-c .header-right .position {
    margin-right: 66px;
}
/* 登录前面小图标，绝对定位、宽高，背景定位 */
.header-c .header-right .login i {
    position: absolute;
    top: 11px;
    left: -26px;
    width: 18px;
    height: 18px;
    background: url(../images/sprite_01.png) no-repeat;
    background-position: -76px -136px;
}
/* 鼠标移到登录修改小图标 */
.header-c .header-right .login:hover i {
    background-position: -76px -174px;
}
/* 登录和注册中间分割线 */
.header-c .header-right span {
    float: left;
    color: #5e5a50;
    margin: 0 8px;
}
/* 注册右边距 */
.header-c .header-right .register {
    margin-right: 51px;
}
/* app右边距和默认颜色 */
.header-c .header-right .app {
    margin-right: 20px;
    color: #1ac295;
}
/* app鼠标划过变色 */
.header-c .header-right .app:hover {
    color: #81deaf;
}
/* app前面小图标绝对定位、尺寸、背景定位 */
.header-c .header-right .app i {
    position: absolute;
    top: 11px;
    left: -20px;
    width: 12px;
    height: 17px;
    background: url(../images/sprite_01.png) no-repeat;
    background-position: -64px -212px;
}
/* 小图标鼠标划过变色 */
.header-c .header-right .app:hover i {
    background-position: -96px -212px;
}

login-banner大结构

Bameqx.png

结构分析：

整体上是一个大的通栏，版心部分和header相同，可分为左右浮动盒子，左浮动广告区域，右浮动登录form表单，可以把图片部份设置给大结构的背景，后面文字设置左边距，可以设置一个大盒子的padding-top，这样所有文字都会自动下来

至于CSS可以新建一个CSS文件（loginBanner.css）书写

注意：

在实际工作中，部分表单效果通常使用其他标签+CSS进行模拟，例如按钮、下拉菜单等

<!-- index.html -->

<!-- login-banner部分开始 -->
<div class="login-banner">
  <div class="inner-c login-banner-c">
      <!-- 广告区域 -->
      <div class="ad">1</div>
      <!-- 登录表单区域 -->
      <div class="login-form">2</div>
  </div>
</div>
<!-- login-banner部分开始 -->

/* 新建login-banner.css */

/* login-banner区域样式 */
.login-banner {
    width: 100%;
    height: 120px;
    background: #00b38a;
}
/* 版心上内边距38px、高度填充剩下的，设置背景图片大小 */
.login-banner .login-banner-c {
    height: 82px;
    padding-top: 38px;
    background: url(../images/logo_ad.png) no-repeat;
    background-size:  228px 120px;
}
/* 左浮动盒子，左边距238 */
.login-banner .login-banner-c .ad {
    float: left;
    padding-left: 238px;
}
/* 右浮动 */
.login-banner .login-banner-c .login-form {
    float: right;
}
左侧广告部分

BwAum6.png

cursor: default;设置光标为箭头

结构分析：分为上下两层，上面是一张图片，下面是一段文字

<!-- index.html -->

<!-- 广告区域 -->
<div class="ad">
    <img src="./images/text_01.png" alt="">
    <p>989992家公司7609558个职位， 在拉勾等你</p>
</div>

/* 左浮动盒子，左边距238 */
.login-banner .login-banner-c .ad {
    float: left;
    padding-left: 238px;
}
/* 图片固定宽高 */
.login-banner .login-banner-c .ad img {
    width: 330px;
    height: 29px;
}
/* p元素行高=高度，默认颜色，鼠标箭头 */
.login-banner .login-banner-c .ad p {
    height: 30px;
    height: 30px;
    color: #fff;
    cursor: default;
}
右侧from表单部分

BwAUnP.png

结构分析：

可以分为三个大盒子，左侧手机号，中间验证码，右侧按钮，验证码可以分为下拉菜单和手机号input标签，验证码可以分为验证码input和获取按钮（中间有个小竖线，可以使用小标签模拟），右侧是一个按钮

<!-- index.html -->

<!-- 登录表单区域 -->
<div class="login-form">
    <!-- 手机号 -->
    <div class="tel">
        <div class="area-code">区号</div>
        <input type="text" class="user-tel" placeholder="请输入手机号">
    </div>
    <!-- 验证码 -->
    <div class="yzm">
        <input type="text" class="yzm-txt" placeholder="验证码">
        <i>|</i>
        <span>获取</span>
    </div>
    <!-- 登录注册按钮 -->
    <div class="login-or-register">登录/注册</div>
</div>

/* 右浮动 */
.login-banner .login-banner-c .login-form {
    float: right;
}
/* 手机号左浮动、宽高、背景色、右边距 */
.login-banner-c .login-form .tel {
    float: left;
    width: 212px;
    height: 35px;
    margin-right: 8px;
    background: #fff;
}
/* 区号左浮动、宽高（下一小节写） */
.login-banner-c .login-form .tel .area-code {
    float: left;
    width: 66px;
    height: 35px;
}
/* 输入框左浮动、宽高、左边距 */
.login-banner-c .login-form .tel .user-tel {
    float: left;
    width: 136px;
    height: 35px;
    padding-left: 10px;
}
/* 验证码左浮动、宽高、右边距、背景色 */
.login-banner-c .login-form .yzm {
    float: left;
    width: 146px;
    height: 35px;
    margin-right: 8px;
    background: #fff;
}
/* 输入框左浮宽高、左边距、行高 */
.login-banner-c .login-form .yzm .yzm-txt {
    float: left;
    width: 80px;
    height: 35px;
    padding-left: 10px ;
    text-align: 35px;
}
/*分 割线左浮动、宽高、居中对齐、文字颜色 */
.login-banner-c .login-form .yzm i {
    float: left;
    width: 9px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #d5dadf;
}
/* 获取按钮左浮动、宽高、行高、居中、文字颜色、手型鼠标 */
.login-banner-c .login-form .yzm span {
    float: left;
    width: 43px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #00b398;
    cursor: pointer;
}
/* 登录注册按钮左浮动、宽高、边右边距、行高、居中、文字颜色 */
.login-banner-c .login-form .login-or-register {
    float: left;
    width: 107px;
    height: 33px;
    border: 1px solid #fff;
    margin-right: 4px;
    line-height: 33px;
    text-align: center;
    color: #ccefe7;
}
/* 登录按钮鼠标划过变色效果 */
.login-banner-c .login-form .login-or-register:hover {
    background-color: #85c3a2;
    color: #e0f0e8;
}
下拉菜单区域

Bwlpon.png

结构分析：

可以分为上下两层，上部就在tel内部，下部是一个列表区域，当属表文划入显示，划开隐藏，可以使用display控制，列表底部有一段文字，可以使用p标签

<!-- index.html -->

<div class="area-code">
  <!-- 当前显示的编码 -->
  <span class="area-code-now">0086</span>
  <!-- 下拉菜单 -->
  <div class="area-code-list">
      <dl>
          <dt>常用</dt>
          <dd>中国<span>0086</span></dd>
          <dd>中国香港<span>00852</span></dd>
          <dd>中国台湾<span>00886</span></dd>
          <dd>中国澳门<span>00853</span></dd>
          <dd>美国<span>001</span></dd>
          <dt>A</dt>
          <dd>澳大利亚<span>0061</span></dd>
          <dd>中国澳门<span>00853</span></dd>
          <dd>爱尔兰<span>00353</span></dd>
          <dt>B</dt>
          <dd>巴西<span>0055</span></dd>
          <dt>D</dt>
          <dd>德国<span>0049</span></dd>
          <dt>E</dt>
          <dd>俄罗斯<span>007</span></dd>
          <dt>F</dt>
          <dd>法国<span>0033</span></dd>
          <dt>H</dt>
          <dd>韩国<span>0082</span></dd>
          <dd>荷兰<span>0031</span></dd>
      </dl>
      <p>如果没有找到您的所在归属地，请拨打客服电话4006282835解决。</p>
  </div>
</div>

/* 下面是我抄的，我没有设计图 */
.login-banner-c .login-form .tel .area-code .area-code-now {
    display: block;
    width: 56px;
    height: 35px;
    padding-left: 10px;
    background: url(../images/arrow_down_small.png) no-repeat right center;
    color: #999;
    line-height: 35px;
    cursor: pointer;
}
.login-banner-c .login-form .tel .area-code .area-code-list {
    position: absolute;
    display: none;
    left: 0;
    top: 35px;
    width: 214px;
    height: 288px;
    border: 1px solid #eeeeee;
    background-color: #fff;
    overflow: auto;
    cursor: default;
}.login-banner-c .login-form .tel .area-code:hover .area-code-list{
    display: block;
}.login-banner-c .login-form .tel .area-code .area-code-list dl dt {
    height: 36px;
    padding-left: 12px;
    background-color: #fbfbfb;
    line-height: 36px;
    color: #555555;
}
.login-banner-c .login-form .tel .area-code .area-code-list dl dd {
    height: 36px;
    padding: 0 12px;
    line-height: 36px;
    color: #999999;
}
.login-banner-c .login-form .tel .area-code .area-code-list dl dd:hover {
    color: #66b48b;
    background-color: #f4f4f4;
}
.login-banner-c .login-form .tel .area-code .area-code-list dl dd span {
    float: right;
}
.login-banner-c .login-form .tel .area-code .area-code-list p {
    padding: 40px 12px;
    line-height: 22px;
    color: #b5b5b5;
}
/* 上面是我抄的，我没有设计图 */

Search（搜索）区域

BwJu2q.png

结构分析：

整体通栏，中间可以看做一个from表单，表单中有一个输入框，一个按钮，可以新建一个CSS文件（seach.css）书写样式

<!-- index.html -->

<!-- seach部分开始 -->
<div class="seach">
    <!-- 搜索表单 -->
    <form action="" class="seach-form">
        <!-- 输入框 -->
        <input type="text" class="form-input" placeholder="搜索职位、公司或地点">
        <!-- 搜索按钮 -->
        <input type="submit" class="btn" value="搜索">
    </form>
</div>
<!-- seach部分结束 -->

/* 新建search.css */

/* 搜索框区域 */
/* 整个大结构宽高、上边距、背景色 */
.seach {
    width: 100%;
    height: 102px;
    padding-top: 30px;
    background: #f2f5f4;
}
/* form表单区域宽高、居中 */
.seach .seach-form {
    width: 937px;
    height: 44px;
    margin: 0 auto;
}
/* 输入框左浮动、宽高、边框、左边距、字体行高 */
.seach .seach-form .form-input {
    float: left;
    width: 777px;
    height: 42px;
    border: 1px solid #e8e8e8;
    border-right: 0;
    padding-left: 16px;
    font-size: 16px;
    line-height: 42px;
}
/* 按钮区域左浮动、宽高、背景、字号行高、颜色居中 */
.seach .seach-form .btn {
    float: left;
    width: 142px;
    height: 44px;
    background: #00b38a;
    font-size: 18px;
    line-height: 46px;
    color: #fff;
    text-align: center;
}
/* 按钮鼠标划入颜色 */
.seach .seach-form .btn:hover {
    background: #5ea680;
}

content（内容）区域

BBKLfx.jpg

结构分析：

最后热门链接部分可以看到是一个通栏，所以整体的主题区域我们还是要设置通栏，内容版心居中，从上到下我们可以分成四个结构，分别是main ：主要区域列表焦点图、.hot_ recruit： 热门职位、.hot_ company：热门公司、.hot_ links：热门链接。

<!-- index.html -->

<!-- content部分开始 -->
<div class="content">
  <div class="inner-c">
      <!-- main区域（列表、轮播图） -->
      <div class="main"></div>
      <!-- hot-recruit区域（热门职位） -->
      <div class="hot-recruit"></div>
      <!-- hot-company区域（热门公司） -->
      <div class="hot-company"></div>
      <!-- hot-links区域（热门链接） -->
      <div class="hot-links"></div>

  </div>

</div>
<!-- content部分结束 -->

/* 新建content.css文件 */

/* content区域 */
/* 整体大结构宽度、背景色、下边框 */
.content {
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    background: #ffffff;
}
.main部分大结构

BB3Dde.png

结构分析：左窄右宽两栏布局，通过浮动实现

左侧（aside）：整体为无序列表，每个li内部包含一个下拉菜单的效果，鼠标移上后显示下拉菜单，下拉菜单内部建议使用定义列表标签

右侧（banner）：焦点图为轮播图效果，点击滚动先不需要做，整体使用定位制作，与淡入淡出轮播图不同的是图片所在无序列表中，图片需要浮动显示，而不是定位到同一-点。特殊的需要添加魔术替换图片，方便后期JavaScript制作。

<!-- index.html -->

<!-- main区域（列表、轮播图） -->
<div class="main">
    <!-- 列表 -->
    <ul class="aside">
    </ul>
    <!-- 轮播图 -->
    <div class="banner">轮播图</div>
</div>

/* content.css */

/* main宽高、上边距 */
.content .main { 
    height: 100%;
    height: 410px;
    padding-top: 33px;
}
/* 左栏浮动、宽高 */
.content .main .aside {
    float: left;
    width: 310px;
    height: 377px;
}
/* 轮播图浮动、宽高、上下边距 */
.content .main .banner {
    float: right;
    width: 839px;
    height: 346px;
    margin-top: 13px;
    margin-bottom: 18px;
}
aside部分

BBD6HA.png

结构分析：

整体是一个大的ul结构，里面有很多li标签，li标签中包含常显部分和鼠标悬停隐藏部分，隐藏区域可以使用display控制，常显部分前面的大文字可以使用h2标签，中间可以用p标签包裹多个a标签，右边箭头可以使用图片背景制作

<!-- index.html -->

<!-- 左侧列表 -->
<ul class="aside">
    <!-- 列表区域（标题+链接+下拉菜单）一共8个li，我删掉了7个 后期补上就可以了 -->
    <li>
        <h2>技术</h2>
        <p>
            <a href="javascript:;">java</a>
            <a href="javascript:;">PHP</a>
            <a href="javascript:;">C++</a>
            <a href="javascript:;">区块链</a>
        </p>
        <div class="list">
            <dl>
                <dt>产品经理</dt>
                <dd>产品经理</dd>
                <i>|</i>
                <dd>网页产品经理</dd>
                <i>|</i>
                <dd>移动产品经理</dd>
                <i>|</i>
                <dd>产品助理</dd>
                <i>|</i>
                <dd>数据产品经理</dd>
                <i>|</i>
                <dd>电商产品经理</dd>
                <dd>游戏策划</dd>
                <i>|</i>
                <dd>产品实习生</dd>
            </dl>
            <dl>
                <dt>产品经理</dt>
                <dd>产品经理</dd>
                <i>|</i>
                <dd>网页产品经理</dd>
                <i>|</i>
                <dd>移动产品经理</dd>
                <i>|</i>
                <dd>产品助理</dd>
                <i>|</i>
                <dd>数据产品经理</dd>
                <i>|</i>
                <dd>电商产品经理</dd>
                <dd>游戏策划</dd>
                <i>|</i>
                <dd>产品实习生</dd>
            </dl>
        </div>
    </li>
</ul>

/* 左栏浮动、宽高 */
.content .main .aside {
    float: left;
    width: 310px;
    height: 384px;
}
/* 列表li标签宽高、小图标、行高 */
.content .main .aside li {
    position: relative;
    width: 310px;
    height: 48px;
    background: url(../images/main_list_arrow.png) no-repeat 292px center;
    line-height: 48px;
}
/* 下拉菜单悬停显示 */
.content .main .aside li:hover .list {
    display: block;
}
/* li下面的h2标签浮动、右边距、文字属性 */
.content .main .aside li h2 {
    float: left;
    margin-right: 12px;
    font-size: 18px;
    color: #333;
}
/* li下面的p标签浮动，文字属性 */
.content .main .aside li p {
    float: left;
    font-size: 14px;
    color: #555;
}
/* li下面的a标签浮动、右边距 */
.content .main .aside li p a {
    float: left;
    margin-right: 24px;
}
/* a标签鼠标悬停样式 */
.content .main .aside li p a:hover {
    text-decoration: underline;
}
/* 下拉菜单默认隐藏、绝对定位、宽度、边距、圆角、背景色、文字属性 */
.content .main .aside .list {
    display: none;
    position: absolute;
    right: -623px;
    top: 0;
    width: 554px;
    padding: 10px 47px 19px 22px;
    border-radius: 2px;
    box-shadow: 1px 1px 5px #ccc;
    background: #ffffff;
    font-size: 14px;
    line-height: 30px;
}
/* 下拉菜单下面吧的列表，清除浮动 */
.content .main .aside .list dl {
    overflow: hidden;
}
/* 文字颜色 */
.content .main .aside dl dt {
    color: #404040;
}
/* 浮动、颜色 */
.content .main .aside dl dd {
    float: left;
    color: #afafaf;
}
/* 分割线浮动、宽度 、居中、颜色*/
.content .main .aside dl i {
    float: left;
    width: 21px;
    text-align: center;
    color: #d3d2d3;
}
banner轮播图区域

BDPeNF.png

结构分析：

和之前的轮播图非常相似，不同点就是这个轮播图图片采用浮动的方式显示

<!-- index.html -->

<div class="banner">
    <!-- 图片列表 -->
    <ul class="banner-images">
        <li><a href="javasprict:;"><img src="./images/banner_01.jpg" alt=""></a></li>
        <li><a href="javasprict:;"><img src="./images/banner_02.jpg" alt=""></a></li>
        <li><a href="javasprict:;"><img src="./images/banner_03.jpg" alt=""></a></li>
        <li><a href="javasprict:;"><img src="./images/banner_04.jpg" alt=""></a></li>
        <li><a href="javasprict:;"><img src="./images/banner_05.jpg" alt=""></a></li>
    </ul>
    <!-- 左右按钮 -->
    <div>
        <i class="btn left-btn"></i>
        <i class="btn right-btn"></i>
    </div>
    <!-- 底部导航小图标 -->
    <ol class="tips">
        <li></li>
        <li></li>
        <li class="now"></li>
        <li></li>
        <li></li>
    </ol>
</div>

/* 轮播图浮动、宽高、上下边距 */
.content .main .banner {
    position: relative;
    float: right;
    width: 840px;
    height: 346px;
    margin-top: 13px;
    overflow: hidden;
}
/* 轮播图图片列表绝对定位、宽高 */
.content .main .banner .banner-images {
    position: absolute;
    top: 0;
    left: -1680px;
    width: 5000px;
    height: 346px;
}
/* 图片浮动、宽高 */
.content .main .banner .banner-images li {
    float: left;
    width: 840px;
    height: 346px;
}
/* 左右按钮绝对定位、宽高、居中 */
.content .main .banner .btn {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 34px;
    margin-top: -17px;
}
/* 下面四个是左右按钮的背景图片和鼠标划入更改背景图片 */
.content .main .banner .left-btn {
    left: 20px;
    background: url(../images/banner_arrow_left.png) no-repeat;
}
.content .main .banner .left-btn:hover {
    background: url(../images/banner_arrow_left_highlight.png) no-repeat;
}
.content .main .banner .right-btn {
    right: 20px;
    background: url(../images/banner_arrow_right.png) no-repeat;
}
.content .main .banner .right-btn:hover {
    background: url(../images/banner_arrow_right_highlight.png) no-repeat;
}
/* 底部小按钮绝对定位、宽高 */
.content .main .banner .tips {
    position: absolute;
    bottom: 16px;
    left: 50%;
    width: 75px;
    height: 6px;
    margin-left: -37.5px;
}
/* 小按钮浮动、宽高、边距、背景 */
.content .main .banner .tips li {
    float: left;
    width: 7px;
    height: 6px;
    margin: 0 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
}
/* 选中的按钮样式 */
.content .main .banner .tips .now {
    width: 13px;
    margin: 0 1px;
    background: #fff;
}
热门职位选项卡

BDaNmn.png

结构分析：

上部为一个公共区域没可以看到下面两个模块都有上面的标题和提示区域，所以这部分可以单独拿出来设置公共样式

结构上来说可以分为四块，最上面是一个标题区域，可以使用div包含两个span标签制作，下面有一个小提示区域，其中包括左侧小问号，中间文字，右侧我知道了的a标签，再往下是一个主要的内容区域，每行三个，可以使用浮动来制作，最下面是一个查看更多的小按钮

公共样式部分

这部分其实是一个公共样式，因为下面也用到了这一部分，所以可以考虑将这部分的CSS写一个单独的CSS公共样式表

BDwJZn.png

结构分析：

顶部两个标题可以使用DIV标签包裹span制作，下面小提示可以使用div包裹i+span+a标签制作

<!-- index.html -->

<div class="module-tabs">
  <!-- 标题 -->
  <div class="title">
      <span class="now">24Hour热门</span>
      <span>最新职位</span>
  </div>
  <!-- 提示 -->
  <p class="hot-tips">
      <i>?</i>
      <span>过去24小时，最多人看过的岗位在这里</span>
      <a href="javasprict:;">我知道了</a>
  </p>
  <div class="detail"></div>
</div>

/* 新建module-tips.css */

/* module-tips公共样式 */
.content .module-tabs {
    width: 100%;
    margin-top: 36px;
}
/* 标题宽高、边框、文字属性 */
.content .module-tabs .title {
    width: 100%;
    height: 51px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
    line-height: 49px;
}
/* 标题下面的标签浮动、高度、右边距、颜色、手型 */
.content .module-tabs .title span {
    float: left;
    height: 49px;
    margin-right: 58px;
    color: #999;
    cursor: pointer;
}
/* 选中标题颜色 */
.content .module-tabs .title span.now {
    border-bottom: 2px solid #333;
    color: #333;
}
/* 提示信息高度、边距、文字属性 */
.content .module-tabs .hot-tips {
    height: 18px;
    margin: 28px 0 18px;
    font-size: 14px;
    line-height: 18px;
}
/* 小问号浮动、宽高、边距、圆角、颜色、居中 */
.content .module-tabs .hot-tips i {
    float: left;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    border-radius: 50%;
    background: #e6e6e6;
    color: #FFF;
    text-align: center;
}
/* 提示文字浮动、边距、颜色 */
.content .module-tabs .hot-tips span {
    float: left;
    margin-right: 22px;
    color: #999;
}
/* a标签浮动、颜色 */
.content .module-tabs .hot-tips a {
    float: left;
    color: #00b38a;
}

下面可能会用到的两个属性

超出隐藏省略号

overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

基线对齐父元素中心

vertical-align: middle;

主要内容区域

BfDlY8.png

结构分析：

浮动可以写在公共样式里面，包括每个浮动块还分为上下两部分，都可以写在公共样式中，除开公共样式，基本就是基本的元素堆砌，从上到下依次写即可

<!--index.html-->

<!--演示代码，这里只列出一份，可以复制生成多个浮动块-->
<li>
  <div class="top">
      <div class="top-title">
          <h3>高级Java工程师</h3>
          <span class="top-time">[一天前发布]</span>
          <i class="top-call-me"></i>
          <span class="top-money">25k-45k</span>
      </div>
      <p>
          <span>经验3-5年</span>
          <i>/</i>
          <span>本科</span>
      </p>
      <div class="tips">
          <span>后端</span>
          <span>服务器端</span>
          <span>Java</span>
      </div>
  </div>
  <dl class="bottom">
      <dt></dt>
      <dd>
          <p>字节跳动</p>
          <p>
              <span>文娱丨内容</span>
              <i>/</i>
              <span>C轮</span>
              <i>/</i>
              <span>北京</span>
          </p>
      </dd>
  </dl>
</li>

/* 新建hot-recruit.css */
/* 热门职位独占样式 */
.content .inner-c .hot-recruit .list li .top .top-title {
    width: 100%;
    line-height: 28px;
    overflow: hidden;
}

/* topH3标签 */
.content .inner-c .hot-recruit .list li .top .top-title h3 {
    float: left;
    max-width: 120px;
    margin-right: 9px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 发布时间 */
.content .inner-c .hot-recruit .list li .top .top-title .top-time {
    float: left;
    margin-right: 8px;
    font-size: 14px;
    color: #999;
}

/* 小图标 */
.content .inner-c .hot-recruit .list li .top .top-title i {
    float: left;
    width: 16px;
    height: 16px;
    margin-top: 6px;
    background: url(../images/icon_chat.png) no-repeat 0 0;
}

/* 薪资 */
.content .inner-c .hot-recruit .list li .top .top-title .top-money {
    float: right;
    margin-right: 0;
    font-size: 16px;
    color: #fa6041;
}

/* 经验和学历 */
.hot-recruit .list li .top p:nth-child(2) {
    overflow: hidden;
    font-size: 14px;
    line-height: 26px;
    color: #777;
}

/* 标签 */
.hot-recruit .list li .top .tips {
    margin-top: 8px;
}

/* 标签 */
.hot-recruit .list li .top .tips span {
    float: left;
    width: 71px;
    height: 26px;
    margin-right: 10px;
    border: 1px solid #f0f0f0;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
    color: #999;
}

/* 标签图片 */
.hot-recruit .list li .bottom dt {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 14px;
    background: url(../images/zijie.jpeg) no-repeat;
    background-size: 40px 40px;
}

/* 文字 */
.hot-recruit .list li .bottom dd {
    float: left;
    line-height: 20px;
}

/* 两个文字颜色 */
.hot-recruit .list li .bottom dd :nth-child(1) {
    color: 555;
}

.hot-recruit .list li .bottom dd :nth-child(2) {
    color: #999;
}
热门公司选项卡

BfsdRU.png

结构分析：

热门公司和热门职位选项卡非常类似，需要改动的知只是其中浮动块里面的内容，所以这里直接贴代码

<!-- hot-company区域（热门公司） -->
<div class="module-tabs hot-company">
  <!-- 标题 -->
  <div class="title">
      <span class="now">互联网热门公司榜</span>
  </div>
  <!-- 提示 -->
  <p class="hot-tips">
      <i>?</i>
      <span>互联网行业实力热门企业</span>
      <a href="javasprict:;">我知道了</a>
  </p>
  <ul class="list">
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
      <li>
          <div class="top">
              <a class="logo" href="javascript:;"><img src="./images/huixiaoer.jpg" alt="LOGO"></a>
              <h3>会小二网</h3>
              <p><span>企业服务</span><i> / </i><span>B轮</span></p>
              <p>获得国际知名VC投资的会议资源预订平台，致力于让企业办会议活动更轻松！</p>
          </div>
          <dl class="bottom">
              <div>
                  <p>16</p>
                  <p>面试评价</p>
              </div>
              <div>
                  <p>16</p>
                  <p>在招职位</p>
              </div>
              <div>
                  <p>100%</p>
                  <p>简历处理率</p>
              </div>
          </dl>
      </li>
  </ul>
  <a href="sprict:;" class="more">查看更多</a>
</div>
<div class="hot-company"></div>

/* 新建hot-company.css */
/* 热门公司 */
/* 覆盖公共样式 */
.content .hot-company .list li {
    width: 261px;
    padding: 18px 12px;
}
/* 私有样式 */
/* logo */
.content .hot-company .list li .top a {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto 17px;
}
/* 图片 */
.content .hot-company .list li .top .logo img {
    width: 100%;
}
/* 公司名称 */
.content .hot-company .list li .top h3 {
    margin-bottom: 11px;
    font-size: 16px;
    text-align: center;
}
/* 类型 */
.content .hot-company .list li .top p {
    text-align: center;
}
/* 公司类型下边距 */
.content .hot-company .list li .top p:nth-child(3) {
    margin-bottom: 15px;
    color: #999;
}
/* 公司介绍下边距 */
.content .hot-company .list li .top p:nth-child(4) {
    margin-bottom: 19px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #555;
}
/* bottom */
.content .hot-company .list li .bottom div {
    float: left;
    height: 30px;
    border-right: 1px solid #ededed;
}
/* 三个信息条宽度 */
.content .hot-company .list li .bottom div:nth-child(1) {
    width: 76px;
}
.content .hot-company .list li .bottom div:nth-child(2) {
    width: 89px;
}
.content .hot-company .list li .bottom div:nth-child(3) {
    width: 93px;
    border-right: 0;
}
/* 整体文字信息居中行高 */
.content .hot-company .list li .bottom div p{
    line-height: 15px;
    text-align: center;
}
/* 上下两行单独样式 */
.content .hot-company .list li .bottom div p:nth-child(1) {
    color: #00b38a;
}
.content .hot-company .list li .bottom div p:nth-child(2) {
    font-size: 12px;
}
热门链接

BfyQFx.png

结构分析：

热门链接结构相对简单，上面部分就是公司和职位的头部，下面就是一堆链接，可以使用li标签实现，另外右侧有一个展开，所以下面的结构应该是链接左浮动，展开右浮动

<!-- hot-links区域（热门链接） -->
<div class="module-tabs hot-links">
    <!-- 标题 -->
    <div class="title">
        <span class="now">互联网热门公司榜</span>
    </div>
    <div class="links">
        <span>展开</span>
        <ul>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
            <li><a href="javasprict:;">深圳就业网</a></li>
        </ul>
    </div>
</div>

/* 热门链接 */
/* 设置边距 */
.content .hot-links {
    margin-bottom:80px;
}
/* links */
.content .hot-links .links {
    width: 100%;
    padding-top: 20px;
    overflow: hidden;
}
/* 链接列表 */
.content .hot-links .links ul {
    float: left;
    max-height: 20px;
    width: 1120px;
    overflow: hidden;
}
/* 链接 */
.content .hot-links .links ul li {
    float: left;
    margin-right: 18px;
}
/* 展开按钮 */
.content .hot-links .links span {
    float: right;
    width: 48px;
    background: url(../images/arrow_down.png) no-repeat 32px 6px;
    background-size: 12px 5px;
}
/* 划入展开 */
.content .hot-links .links span:hover + ul {
    min-height: 100px;
}

footer区域

Bfy20s.png

结构分析：

可以看出来，很明显的两侧浮动结构，左边小按钮向左浮动，右边快捷链接👉🏻浮动，链接可以使用定义列表来做

<!-- fotter部分开始 -->
  <footer class="fotter">
      <div class="inner-c fotter-c">
          <!-- 左侧 -->
          <div class="fotter-left">
              <a href="script:;"><i></i><span>下载拉勾APP</span></a>
              <a class="weixin" href="script:;"><i class="wx"></i><span>微信小程序</span><img src="./images/mini_pro.png" alt=""></a>
              <p>
                  <span class="l wx"><i></i>拉勾微信<img src="./images/qr_code.png" alt=""></span>
                  <span class="r wb"><i></i>拉勾微博</span>
              </p>
          </div>
          <!-- 右侧 -->
          <div class="fotter-right">
              <!-- 定义列表 -->
              <dl>
                  <dt>企业服务</dt>
                  <dd><a href="javascript:;">招聘抢人宝典</a></dd>
                  <dd><a href="javascript:;">公司搜索</a></dd>
                  <dd><a href="javascript:;">拉勾APP</a></dd>
              </dl>
              <dl class="dl2">
                  <dt>用户帮助</dt>
                  <dd><a href="javascript:;">用户服务协议</a></dd>
                  <dd><a href="javascript:;">隐私政策</a></dd>
                  <dd><a href="javascript:;">在线提问</a> </dd>
              </dl>
              <dl>
                  <dt>联系方式</dt>
                  <dd><a href="javascript:;">服务热线：4006 2828 35（9:00 - 18:00）</a></dd>
                  <dd><a href="javascript:;">企业服务邮箱：cc@lagou.com</a></dd>
                  <dd><a href="javascript:;">联系我们</a></dd>
              </dl>
          </div>
      </div>
  </footer>
  <!-- fotter部分结束 -->

/* fotter部分 */
.fotter {
    width: 100%;
    height: 205px;
    padding-top: 50px;
}
/* 版心 清除浮动 */
.fotter .fotter-c {
    height: 140px;
}
/* 左侧 */
.fotter-c .fotter-left {
    float: left;
    height: 100%;
    width: 312px;
    border-right: 1px solid #e8e8e8;
}
/* 按钮 */
.fotter-c .fotter-left a {
    display: block;
    position: relative;
    width: 180px;
    height: 40px;
    margin-bottom: 16px;
    border: 1px solid #00b38a;
    line-height: 40px;
    text-align: center;
    color: #00b38a;
}
/* 按钮图标 */
.fotter-c .fotter-left a i {
    display: inline-block;
    width: 12px;
    height: 15px;
    margin-right: 7px;
    background: url(../images/sprite_02.png) no-repeat;
    background-position:  -150px -220px;
    vertical-align: middle;
}
/* 文字对齐 */
.fotter-c .fotter-left a span {
    vertical-align: middle;
}
/* 微信小程序按钮 */
.fotter-c .fotter-left a .wx {
    width: 14px;
    height: 14px;
    background: url(../images/sprite_02.png) no-repeat;
    background-position:  -215px -54px;
}
/* 微信小程序图片 */
.fotter-c .fotter-left a img {
    display: none;
    position: absolute;
    top: 0;
    left: 191px;
    width: 140px;
    height: 140px;
    box-shadow: 2px 2px 10px #ccc;
}
/* 鼠标划入显示 */
.fotter-c .fotter-left a:hover img {
    display: block;
}
/* 变色 */
.fotter-c .fotter-left a:hover {
    background: #37b38a;
    color: #fff;
}
/* 鼠标划过更改图标 */
.fotter-c .fotter-left a:hover i {
    background-position: -182px -220px;
}
.fotter-c .fotter-left a:hover .wx {
    background-position: -173px -54px;
}
/* 微信和微博 */
.fotter-c .fotter-left p {
    width: 182px;
    height: 22px;
    line-height: 22px;
    color: #555;
}
/* 左浮动 */
.fotter-c .fotter-left p .l {
    float: left;
    position: relative;
}
/* 微信二维码图片 */
.fotter-c .fotter-left p .l img {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 120px;
    height: 120px;
    box-shadow: 2px 2px 10px #ccc;
}
/* 鼠标划入显示 */
.fotter-c .fotter-left p .l:hover img {
    display: block;
}
/* 右侧微博 */
.fotter-c .fotter-left p .r {
    float: right;
}
/* 小图标 */
.fotter-c .fotter-left p span i {
    display: inline-block;
    width: 16px;
    height: 14px;
    margin-top: 5px;
    margin-right: 5px;
    background: url(../images/sprite_02.png) no-repeat -114px -185px;
}
/* 微博图标 */
.fotter-c .fotter-left p .r i {
    background: url(../images/sprite_02.png) no-repeat -214px -20px; 
}
/* 鼠标划入变色 */
.fotter-c .fotter-left p span:hover {
    color: #42bd99;
}
/* 鼠标划入更改图标 */
.fotter-c .fotter-left p span:hover i {
    background-position: -114px -221px;
}
.fotter-c .fotter-left .r:hover i {
    background-position: -172px -20px;
}
/* 右侧 */
.fotter-c .fotter-right {
    float: right;
}
/* 列表 */
.fotter-c .fotter-right dl {
    float: left;
    line-height: 32px;
    color: #555;
}
/* dt文字样式 */
.fotter-c .fotter-right dl dt {
    margin-bottom: 24px;
    line-height: 23px;
    font-size: 18px;
    font-weight: 700;
}
/* 第二个dl撑开宽度 */
.fotter-c .fotter-right .dl2 {
    margin-left: 170px;
    margin-right: 170px;
}

页面最底部

Bf6S1O.png

结构分析：同样是一个左右浮动结构，直接贴代码

<!-- 底栏开始 -->
<div class="bottom">
    <div class="inner-c bottom-c">
        <div class="l">
            <p>©2020 拉勾网 京ICP备14023790号-2</p>
            <p>京公网安备 11010802024043号</p>
            <div class="call-me">
                <i></i>
                <p>违法和不良信息举报</p>
                <p>电话：4006 2828 35</p>
                <p>邮箱：cc@lagou.com</p>
            </div>
        </div>
        <div class="r">
            <img src="./images/footer_lagou_icon.png" alt="">
        </div>
    </div>
</div>
<!-- 底栏结束 -->

/* 底栏 */
body > .bottom {
    width: 100%;
    height: 72px;
    padding-top: 28px;
    background: #fafafa;
}
.bottom .l {
    float: left;
    line-height: 60px;
    color: #999;
}
.bottom .l > p {
    float: left;
    margin-right: 16px;
}
.bottom .l .call-me {
    position: relative;
    float: left;
    width: 136px;
    height: 51px;
    padding-left: 50px;
    padding-top: 7px;
    border: 1px solid #d5dadf;
    font-size: 12px;
    line-height: 14px;
}
.bottom .l .call-me i {
    position: absolute;
    top: 17px;
    left: 20px;
    width: 20px;
    height: 24px;
    background: url(../images/sprite_02.png) no-repeat;
    background-position:  -132px -20px;

}
.bottom .r {
    float: right;
}
.bottom .r img{
    width: 198px;
    margin-top: 21px;
}
avatar
文章
阅读
粉丝