米修在线

头部区域

　　头部区域运用 header 标签包裹。导航部分运用 nav 标签包裹，左边的 logo 用 h1 包裹，因为有跳转的功能所以里面要有一个a链接，a链接里面再写"米修在线"。右边三个用一个ul包裹，因为可以跳转所以要在 li 里面添加a，在里面再写内容。

<!-- 头部 -->
  <header>
    <nav id="navbar">
      <div class="content">
        <!-- 左边logo -->
        <h1><a href="index.html">米修在线</a></h1>
        <ul>
          <li><a class="home" href="index.html">首页</a></li>
          <li><a href="about.html">关于我们</a></li>
          <li><a href="contact.html">联系我们</a></li>
        </ul>
      </div>
    </nav>
  </header>

　　在 style.css 里首先要重置默认样式。让 margin 和 padding 等于0，并且给 box-sizing 添加 border-box 属性，作用是为了给内容添加 padding 的时候不影响布局。

　　给类名为 content 的盒子添加水平居中和最大宽度：margin: 0 auto; max-width: 1100px;。当 margin 的值有两个时第一个指的是 X 轴，第二个指的是 Y 轴

　　给 h1 添加左浮动让它到左边，给 ul 添加右浮动让它到右边。给 ul 里的 li 添加左浮动，可以让它变成一行。给 li 里的 a 添加 display: block; 属性，让它变为块级元素这样才能让 padding: 20px; 生效，然后再给 a 添加 text-align: center; 让它居中

　　给 a 添加 :hover，鼠标移到 a 上面的时候让背景色变为 #444，并且让字体颜色变为橙色，并且让 class 为 home 的 a 的样式也变成这样

*{
  margin: 0;
  padding: 0;
  /* 给内容添加padding的时候不影响布局 */
  box-sizing: border-box;
}
/* a标签的默认样式 */
a{
  color: #333;
  /* 取消下划线 */
  text-decoration: none;
}
p{
  /* margin只有两个值是 第一个指的是x轴 第二个指的是y轴 */
  margin: 10px 0;
}
.content{
  /* 水平居中 */
  margin: 0 auto;
  /* 最大宽度 */
  max-width: 1100px;
  /* 防止margin塌陷，清除浮动 */
  overflow: hidden;
  padding: 0 20px;
}

#navbar{
  background-color: #333;
  color: #fff;
  overflow: auto;
}
#navbar a{
  color: #FFFFFF;
}
#navbar h1{
  float: left;
  padding-top: 20px;
}
#navbar ul{
  float: right;
  list-style: none;
}
#navbar ul li{
  float: left;
}
#navbar ul li a{
  /* 转换为块级元素 */
  display: block;
  padding: 20px;
  text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.home{
  background-color: #444;
  color: #f7c08a;
}

背景部分

　　用 id 名为 showcase 的盒子包裹着存放内容的盒子。给 showcase 盒子添加背景图片，并设置不平铺，然后将高设置为 600 px。米修在线、中间的文字和 a 链接都被放在 showcase-content 盒子里。米修在线四个字用 span 标签包住，设置类名为 text，因为要给这四个字设置成橙色。将 h1 的字号设置成 60 px ，将内容设置成 20 px。将 text 类名设置成橙色。将 a 标签设置成行内块元素，修改背景色为 #333 、字体大小为 18 px 并添加内边距 padding: 13px 20px;，给 a 添加 hover，效果是将背景色变为橙色

/* 背景 */
#showcase{
  background: url('../img/pexels-felix-mittermeier-957061.jpg') no-repeat center center/cover;
  height: 600px;
}
/* 为背景上的文本添加样式 */
#showcase .showcase-content{
  color: #FFFFFF;
  text-align: center;
  padding-top: 170px;
}
/* 给h1添加样式 */
#showcase .showcase-content h1{
  font-size: 60px;
  line-height: 1.2em;
}
/* 给p添加样式 */
#showcase .showcase-content p{
  font-size: 20px;
  line-height: 1.73em;
  padding-bottom: 20px;
}
/* 米修在线 */
.text{
  color: #F2B77A;
}
/* a标签 */
.btn{
  display: inline-block;
  font-size: 18px;
  color: #FFFFFF;
  background: #333;
  padding: 13px 20px;
  /* 过渡 */
  transition: 0.2s;
}
.btn:hover{
  background: #f7c08a;
}

　　米修介绍

　　用 section 标签包裹着，左边用一个名为 info-img 的盒子，右边用一个名为 info-content 的盒子，给 section 标签添加 height: 400px; 的属性。

　　给 info-img 添加左浮动、height: 100%; 属性。让宽变为 50% 。给 info-content 添加右浮动、宽高分别为 50% 和 100%，并且让它居中，添加 padding: 50px 30px;。让里面的 p 标签的 padding-bottom 为 30 px。给 section 添加类名 bg-back，让它的背景色变为 #3B3B3B，并且让字体颜色变为白色

/* home-info */
#home-info{
  height: 400px;
}
/* 左侧图片 */
#home-info .info-img{
  float: left;
  width: 50%;
  background: url('../img/2.jpg') no-repeat center center/cover;
  height: 100%;
}
/* 右侧文字 */
#home-info .info-content{
  float: right;
  width: 50%;
  text-align: center;
  height: 100%;
  padding: 50px 30px;
  overflow: hidden;
}
#home-info .info-content p{
  padding-bottom: 30px;
}
/* 背景色 */
.bg-back{
  background-color: #3B3B3B;
  color: #FFFFFF;
}

字体图标

　官网：http://www.fontawesome.com.cn/faicons/

　　进入后点击下载，下载后会得到一个压缩包，解压那个压缩包。解压之后会得到一个文件夹，在需要的地方引入 fonts 文件夹和 font-awesome.min.css 文件，使用的时候需要用到 i 标签，加上 class 名，需要用哪个图标就复制哪个类名

<i class="fa fa-graduation-cap fa-3x"></i>

　底部版权

　　使用 id 名为 main-footer 的 footer 标签包裹一个 p 标签，© 用的是 © 样式让它居中，添加背景色为 #333。字体颜色为白色，并且添加 padding: 20px; 属性

　关于我们页面

　　因为顶部和底部和首页一样只有内容不一样，所以复制首页代码粘贴到 about.html 文件中，然后把中间内容部分删除，只留顶部和底部。删的时候需要注意类名是 clr 的盒子不要删除，这个盒子的作用是清除浮动。

　　上部分用一个 id 为 about-info 的 section 标签包裹住，里面用一个盒子包裹内容。用类名是 info-left 的盒子包裹左边的那部分，用 h1 包裹关于米修在线，由于米修在线这四个字是橙色的所以用类名为 text 的 span 包裹住。用一个类名是 info-right 的盒子包裹住一张图片。

　　下部分写在 id 为 testimonials 的 section 标签里。里面用一个盒子包裹内容，在里面用一个类名为 l-heading 的 h2 写学员评价。用类名为 testimonial 的盒子包裹一张图片和一段文字

<!-- 上部分 -->
<section id="about-info" class="py bg-light">
    <div class="container">
      <div class="info-left">
        <h1 class="l-heading">关于<span class="text">米修在线</span></h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed voluptates minus blanditiis at voluptatem quia
          minima odio nam, reprehenderit libero omnis aut voluptatum quaerat voluptatibus! Eius repellat ducimus sint
          praesentium.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ex, exercitationem laborum veniam cumque
          facilis delectus at accusamus aspernatur quasi.</p>
      </div>
      <div class="info-right">
        <img src="./img/pexels-felix-mittermeier-957061.jpg" alt="">
      </div>
    </div>
    <div class="clr"></div>
  </section>
<!-- 下部分 -->
  <section id="testimonials">
    <div class="container">
      <h2 class="l-heading">学员评价</h2>
      <div class="testimonial bg-primary">
        <img src="./img/pexels-felix-mittermeier-957061.jpg" alt="">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, vel!</p>
      </div>
      <div class="testimonial bg-primary">
        <img src="./img/pexels-felix-mittermeier-957061.jpg" alt="">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, vel!</p>
      </div>
    </div>
  </section>

样式

　　给 .info-left 和 .info-right 分别添加左右浮动并让它们的宽高分别为 50% 和 100%。给 id 为 testimonials 的元素设置高 600px、添加背景图并让 padding-top 为 100px。让 #testimonials 下的 h2 变成白色并让它居中。让 #testimonials下的 testimonial 的内边距为 35px、上外边距为 40px、它的四角稍微圆一点，并让它的透明度为 0.9。让 testimonial 里的图片宽高 100px、添加左浮动、让它变成圆，并让它的右外边距是 20px、上外边距是 -25px。

/* 左边 */
#about-info .info-left{
  float: left; 
  width: 50%;
  height: 100%;
}
/* 右边 */
#about-info .info-right{
  float: right;
  width: 50%;
  height: 100%;
}
#about-info .info-right img{
  display: block;
  width: 80%;
  margin: 0 auto;
  border-radius: 50%;
}
#testimonials{
  height: 600px;
  background: url('../img/3.jpg') no-repeat center center/cover;
  padding-top: 100px;
}
#testimonials h2{
  color: #FFFFFF;
  text-align: center;
  padding-bottom: 40px;
}
#testimonials .testimonial{
  padding: 35px;
  margin-bottom: 40px;
  border-radius: 5px;
  opacity: 0.9;
}
#testimonials .testimonial img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
  margin-top: -25px;
}

联系我们页面

　　顶部和底部跟首页基本一样，所以直接复制首页代码粘贴到 contact.html 文件中，然后把中间部分删除。联系我们的主要内容是由一个 from 表单和几个字体图标所构成。form 表单所在的区域由一个 section 标签包裹，联系我们用 h1 包裹，由于联系二字和首页的米修在线的样式相同，所以加一个类名为 text 的 span 标签。表单由 form 标签包裹，里面每个 input 都由一个盒子包裹，每个 input 上面都由一个 label 标签，label 的 for 属性对应的是 input 的 id，这样点击 label 的时候就可以选中 id 对应的 input。

  <section class="py" id="contact-form">
    <div class="container">
      <h1 class="l-heading"><span class="text">联系</span>我们</h1>
      <p>如有疑问请填写一下联系我们</p>
      <form action="process.php">
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" name="name" id="name">
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="text" name="email" id="email">
        </div>
        <div class="form-group">
          <label for="message">反馈内容</label>
          <textarea type="text" name="message" id="message"></textarea>
        </div>
      </form>
      <button type="submit" class="btn">提交</button>
    </div>
  </section>

样式

　　为每个包裹着 input 和 label 的盒子添加下外边距为 20px，让每个 label 变成块级元素并添加下外边距为 5px，让 input 和 textarea 的宽是百分百，内边距是 10px，并且加一个白色的边框。让 textarea 的高是 200px。给 textarea 和 input 添加一个 focus（获取焦点），去掉原本的边框，并让边框的颜色变成蓝色

/* form表单 */
#contact-form .form-group{
  margin-bottom: 20px;
}
#contact-form label{
  display: block;
  margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid #dddddd;
  transition: 0.3s;
}
#contact-form textarea{
  height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus{
  outline: none;
  border-color: cyan;
}

下面的字体图标部分

　　这部分和首页的字体图标部分基本一样所以直接复制过来。将 section 的 id 变为 contact-info，并添加一个 bg-back 的类名，作用是让字体变成白色。然后为字体图标所在的盒子添加一次类名为 conainer 的盒子，作用是居中。然后更改字体图标的 class 名就可以替换图标，最后更改图标下的内容就完成了

<section id="contact-info" class="bg-back">
    <div class="conainer">
      <div class="box">
        <i class="fa fa-home fa-3x"></i>
        <h3>联系地址</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="box">
        <i class="fa fa-phone fa-3x"></i>
        <h3>联系电话</h3>
        <p>028-12345678</p>
      </div>
      <div class="box">
        <i class="fa fa-envelope fa-3x"></i>
        <h3>邮箱地址</h3>
        <p>米修在线@163.com </p>
      </div>
    </div>
  </section>