莱恩在线

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

<!-- 头部区域 -->
  <header>
    <nav id="navbar">
      <div class="container">
        <h1><a href="index.html">米修在线</a></h1>
        <ul>
          <li><a class="current" 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 的样式也变成这样

/* reset */
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* main styling */
html,body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.7em;
}
a{
  color: #333;
  text-decoration: none;
}
h1,h2,h3{
  padding-bottom: 20px;
}
p{
  margin: 10px 0;
}
/* utility classes */
.container{
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
  padding: 0 20px;
}
/* navbar */
#navbar{
  background: #333;
  color: #fff;
  overflow: auto;
}
#navbar a{
  color: #fff;
}
#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.current{
  background: #444;
  color: #fabd80;
}

首页展示区域用 div 包裹，id 为 showcase，在这个盒子里面，我们还需要在用一个盒子进行包裹，类名为 container，在这里我们在创建一个 div 来进行中间部分内容的包裹，类名为 showcase-content ，在内容中， 我们添加一个 h1 标签，来写页面中的主题，“欢迎来到莱恩在线”，下面我们在用到一个 p 标签，里面的内容可以用 Lorem 来代替，下面我们在添加一个 a 标签，用来页面的跳转，接下来我们来设置下面的按钮，给 a 标签设置类名。

<!-- 首页展示区域 -->
    <div id="showcase">
      <div class="container">
        <div class="showcase-content">
          <h1>欢迎来到莱恩在线</h1>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat nihil, beatae fugit molestias deserunt
            quidem at! Eveniet deserunt vero voluptates.</p>
          <a class="btn" href="about.html">关于我们</a>
        </div>
      </div>
    </div>

在 style 样式中，给 showcase 盒子设置背景图片，给 showcase 盒子下的 showcase-content 设置文本颜色，然后给他设置一下文本居中，之后给他设置一下 padding-top，让他和顶部有一些距离，我们在 showcase-content 中的 h1标签，给他设置 font-size 设置为60px,然后在设置一个行高，为 1.2em ，之后我们在 html 中找到莱恩在线，用 span 标签进行包裹，设置类名为 text-primary，给他设置样式，可以将他的样式放在通用样式中，他的样式在页面多个地方都有用到，接下来，在 showcase-content 中的 p 标签，给 p 标签设置字体大小，还有行高和下外边距，接下来设置 btn 的样式，因为 a 标签是一个行标签，所以要将他转换为块标签， 然后给他设置一个字体大小和字体颜色还有背景颜色，我们在给他一个 hover 效果，给他一个背景颜色

.container{
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
  padding: 0 20px;
}
.text-primary{
  color: #f7c08a;
}

/* showcase */
#showcase{
  background: url('../img/beijing.jpg') no-repeat center center/cover;
  height: 600px;
}
#showcase .showcase-content{
  color: #fff;
  text-align: center;
  padding-top: 170px;
}
#showcase .showcase-content h1{
  font-size: 60px;
  line-height: 1.2em;
}
#showcase .showcase-content p{
  font-size: 20px;
  line-height: 1.7em;
  padding-bottom: 20px;
}
.btn{
  display: inline-block;
  font-size: 18px;
  color: #fff;
  background: #333;
  padding: 13px 20px;
}
.btn:hover{
  background: #f7c08a;
}

内容介绍区域，首先创建一个 section 标签，设置 id 名为 home-info ，当中有两个区域，我们设置两个 div ，在右侧 div 中，设置 h2 标签，当中在设置一个 span 标签，然后添加一个 p 标签，里面还是用 Lorem 来代替内容，下面还是用一个 a 标签。

<!-- 介绍区域 -->
  <section id="home-info">
    <!-- 左侧 -->
    <div class="info-img">

    </div>
    <!-- 右侧 -->
    <div class="info-content">
      <h2><span class="text-primary">莱恩在线</span> 介绍</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, porro quam voluptatibus nulla rem sapiente
        aperiam maxime totam alias accusantium, sit facilis quas nihil, eum quia magnam iure. Aut, vero.</p>
      <a class="btn" href="about.html">阅读更多</a>
    </div>
  </section>

在 style 中给 home-info 设置样式，然后在 #home-info 节点下，找到 .info-img 名，给他设置样式，然后在找到 #home-info 节点下的 info-eontent 给他设置样式，然后我们在设置背景颜色，给 home-info 设置类名，然后考虑到以后还会用这个，所以将他放在通用 css 当中，然后我们在给 a 标签设置一个类名，在给他添加背景颜色和字体颜色。

/* home-info */
#home-info{
  height: 400px;
}
#home-info .info-img{
  float: left;
  width: 50%;
  background: url(../img/beijing1.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;
}

下载 Font Awesome 字体图标库，下载完之后进行解压使用，然后在 html 中使用。

<!-- 首页下滑区域 -->
  <section id="features">
    <div class="box">
      <i class="fa fa-users fa-3x"></i>
      <h3>讲师介绍</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum accusamus aspernatur ab, minus fugit molestiae!
        Est molestias excepturi sed nihil!</p>
    </div>
    <div class="box">
      <i class="fa fa-leanpub fa-3x"></i>
      <h3>讲师介绍</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum accusamus aspernatur ab, minus fugit molestiae!
        Est molestias excepturi sed nihil!</p>
    </div>
    <div class="box">
      <i class="fa fa-graduation-cap fa-3x"></i>
      <h3>讲师介绍</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum accusamus aspernatur ab, minus fugit molestiae!
        Est molestias excepturi sed nihil!</p>
    </div>
  </section>

在 style 中，设置了他们的背景颜色，和宽高

/* features */
.box{
  float: left;
  width: 33.3%;
  padding: 50px;
  text-align: center;
}
.box i{
  margin-bottom: 10px;
}
.bg-light{
  background: #f4f4f4;
  color: #333;
}
.bg-primary{
  background: #f7c08a;
  color: #333;
}

然后我们现在写底部。

<div class="clr">
    <footer id="main-footer">
      <p>莱恩在线 &copy; 2021，All Rights Reserved</p>
    </footer>
  </div>

下面我们来写第二部分。

about.html ，将index.html的代码复制到about.html中，除了头部和尾部之外全部删除，然后我们创建一个 section 标签，来代表我们的内容区域，首先先看顶部下面的第一个区域，这个区域是由两部分组成，所以我们在里面创建两个 div 一个取名为 info-left，一个为 info-right。

 <section id="about-info" class="py bg-light">
    <div class="container">
      <div class="info-left">
        <h1 class="l-heading">关于<span class="text-primary">莱恩在线</span></h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto vitae quisquam eum veritatis rem minima
          quibusdam corrupti ratione ad atque. Reprehenderit incidunt tempora recusandae illum voluptatibus voluptatem,
          impedit ea veritatis!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad delectus molestias adipisci cumque minus beatae
          dignissimos corrupti enim nulla distinctio!</p>
      </div>
      <div class="info-right">
        <img src="./img/about-1.jpg" alt="莱恩在线">
      </div>
    </div>
  </section>

样式没什么，左边部分左浮动，右边部分右浮动，img 给他设置成块级元素。

#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%;
}
.py{
  padding: 10px 0;
}
.l-heading{
  font-size: 40px;
  padding-top: 20px;
}

下面来写中间部分，中间部分用 section 包裹，里面是两部分，所以创建两个 div 里面分别是对应的照片和内容。

<section id="testimonials">
    <div class="container">
      <h2>学员评价</h2>
      <div class="testimonial">
        <img src="./img/about-1-1.jpg" alt="jan">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae reiciendis expedita aperiam, nam vero
          necessitatibus.</p>
      </div>
      <div class="testimonial">
        <img src="./img/about-1-2.jpg" alt="Lucy">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae reiciendis expedita aperiam, nam vero
          necessitatibus.</p>
      </div>
    </div>
  </section>

样式部分。

#testimonials{
  height: 600px;
  background: url('../img/about-bj.jpg') no-repeat center center/cover;
  padding-top: 100px;
}
#testimonials h2{
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
}
#testimonials .testimonial{
  padding: 20px;
  margin-bottom: 40px;
  border-radius: 5px;
  opacity: 0.9;
}
#testimonials .testimonial img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
}

下面来写联系我们页面，创建一个 contact.html ，来书写联系我们页面，把 index.html 文件复制到 contact.htnl 中，不需要的部分删除，下面我们创建一个 section 标签来进行包裹内容区域，创建一个 div 里面包裹这 h1 头部，还有三个 form 表单。

<section id="contact-form" class="py">
    <div class="container">
      <h1 class="l-heading"><span class="text-primary">联系</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>
        <button type="submit" class="btn">提交</button>
      </form>
    </div>
  </section>
  <section id="contact-info" class="bg-dark">
    <div class="container">
      <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>

样式。

/* contact-form */
#contact-from .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 #ddd solid;
}
#contact-form textarea{
  height: 300px;

}
#contact-form input:focus,
#contact-form textarea:focus{
 outline: none;
 border-color: #f7c08a;
}