布局实战

navbar

　　由于网页往下滑的时候这部分一直都在顶部，所以这个要单独弄出来添加粘性定位。导航栏由一个 nav 标签包裹，左边由一个 h1 加字体图标制作 logo。右边用一个 ul 列表制作导航部分

  <nav id="navbar">
    <h1 class="logo">
      <span class="text">
        <i class="fa fa-book-open"></i>
        米修在线
      </span>
    </h1>
    <ul>
      <li><a>Home</a></li>
      <li><a>What</a></li>
      <li><a>Who</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>

　　样式

　　　　让它的背景色变为黑色，然后添加弹性布局，并让元素左右对齐。粘性定位用的是 sticky，临界值是 top: 0；由于弹性布局只对直接子元素起作用，所以还要给 ul 添加弹性布局。让元素上下居中。给 a 标签添加内边距为 0.75rem，添加左右外边距 0.25rem，并添加鼠标滑入出现背景色

#navbar{
  background: #333;
  display: flex;
  color: #fff;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1rem;
}
#navbar ul{
  display: flex;
  list-style: none;
  align-items: center;
}
#navbar ul li a{
  color: #FFF;
  padding: 0.75rem;
  margin: 0 0.25rem;
  transition: 0.3s;
}
#navbar ul li a:hover{
  background: #93cb52;
  border-radius: 5px;
}
/* ho

home 页

　　home 页由一个 header 标签包裹，里面用一个类名为 home-content 的盒子来展示背景图，用 h1 来展示中间标题，用 p 来展示内容。h1 的通用类是 l-heading，p 的通用类是 lead，a 的通用类是 btn

  <header id="home">
    <div class="home-content">
      <h1 class="l-heading">欢迎来到米修在线</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae deserunt recusandae non,
        aspernatur eum nobis!</p>
      <a href="#what" class="btn">阅读更多</a>
    </div>
  </header>

　　样式

　　　　为 #home 添加背景图，并且让高等于 100vh，并添加相对定位，添加定位的原因是子元素需要添加绝对定位。给 .home-content 盒子添加弹性布局，让它纵向排列，上下左右居中。添加高度百分百，添加内边距左右 2rem，添加绝对定位，上下左右都是 0，最后添加背景色为 rgba(0,0,0,0.6)

#home{
  background: url('../img/1.jpg') no-repeat center center/cover;
  height: 100vh;
  color: #FFF;
  position: relative;
}
#home .home-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 0 2rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.6);
}

what 页

　　what 页用一个 id 为 what 的 section 标签包裹，里面的内容在类名为 container 的盒子中，这个盒子的作用是居中。标题由 h2 和类名为 text 的 span 制作，span 的作用是将字变为绿色。内容部分由类名为 items 的盒子包裹，每一个字体图标和内容都由一个 item 盒子包裹。

<section id="what">
    <div class="container">
      <h2 class="m-heading text-center"><span class="text">What</span> We Do</h2>
      <div class="items">
        <div class="item">
          <i class="fas fa-university fa-2x"></i>
          <div>
            <h3>前端基础课程</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, molestiae.</p>
          </div>
        </div>
        <div class="item">
          <i class="fas fa-book-reader fa-2x"></i>
          <div>
            <h3>前端进阶课程</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, molestiae.</p>
          </div>
        </div>
        <div class="item">
          <i class="fas fa-pencil-alt fa-2x"></i>
          <div>
            <h3>前端高阶课程</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, molestiae.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

样式

　　让 items 变成弹性布局，再给它添加内边距为 1rem。让每个 item 的 flex 为 1，并让它们居中。让每个字体图标的背景色变为绿色、内边距为 1rem、添加下外边距为 1rem 并变成圆角

#what .items{
  display: flex;
  padding: 1rem;
}
#what .items .item{
  flex: 1;
  text-align: center;
}
#what .items .item i{
  background: #93cb52;
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}

who 页

　　由 id 为 who 的 section 包裹。左边区域由一个类名是 who-img 的盒子组成，右边由一个类名是 who-text 的盒子包裹。由 h2 和 span 组成标题，下面的列表由一个类名是 list 的 ul 和 li 组成

  <section id="who">
    <div class="who-img"></div>
    <div class="who-text bg-bark p-2">
      <h2 class="m-heading"><span class="text">Who</span> We Are</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt perspiciatis corrupti eius distinctio ducimus
        excepturi adipisci ut corporis, ratione nostrum ad vero? Sunt expedita illo, harum porro ea obcaecati doloribus!
      </p>
      <h3>Our Team</h3>
      <ul class="list">
        <li>Mark Smith: CEO</li>
        <li>Shannon Jahnson: CFO</li>
        <li>John Cordit: Lead Accountant</li>
        <li>Janet Williams: Investment Nanager</li>
        <li>Kara Jackson: Senior Accountant</li>
      </ul>
    </div>
  </section>

　样式

　　让 #who 变成弹性盒子，让它下面的盒子 flex 为 1，让 flex-basis 为 50%。给 img 添加一张背景图

 #who{
   display: flex;
 }
 #who div{
   flex: 1;
   flex-basis: 50%;
 }
 #who .who-img{
   background: url('../img/2.jpg') no-repeat center center/cover;
 }

logo

　这里的标题由 h2 和 span 组成，剩下几张 logo 由 div 包裹住，放进一个 items 里。

 <section id="clients" class="py-1">
    <div class="container">
      <h2 class="m-heading text-center">
        <span class="text">Our</span> Clients
      </h2>
      <div class="items py-1">
        <div><img src="./img/l1.jpg" alt="clients"></div>
        <div><img src="./img/l2.jpg" alt="clients"></div>
        <div><img src="./img/l3.jpg" alt="clients"></div>
        <div><img src="./img/l4.jpg" alt="clients"></div>
        <div><img src="./img/l5.jpg" alt="clients"></div>
      </div>
    </div>
  </section>

样式

　　将 items 变成弹性布局，让宽高为 60%，并变成圆角

 #clients .items{
   display: flex;
 }
 #clients .items img{
   display: block;
   margin: 0 auto;
   width: 60%;
   height: 60%;
   border-radius: 50%;
 }

contact和底部版权

　　contact 主要是由包裹 label 和 input 的四个类名是 form-group 的盒子组成。底部版权用类名是 container 盒子包裹 p 标签组成。

  <section id="contact">
    <div class="contact-form bg-primary p-2">
      <h2 class="m-heading">Contact Us</h2>
      <p>如有疑问请填写一下信息联系我们</p>
      <form>
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" name="name" id="name" placeholder="请输入姓名">
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" name="email" id="email" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
          <label for="phone">电话</label>
          <input type="text" name="phone" id="phone" placeholder="请输入电话">
        </div>
        <div class="form-group">
          <label for="message">反馈信息</label>
          <textarea name="message" id="message"></textarea>
        </div>
      </form>
      <input type="submit" value="send" class="btn btn-bark">
    </div>
    <div class="contact-img"></div>
  </section>
  <!-- 版权 -->
  <footer id="main-footer" class="bg-bark text-center py-1">
    <div class="container">
      <p>Copyright &copy; 2021，米修在线，All Rights Reserved</p>
    </div>
  </footer>

样式

　　给 #contact 添加弹性布局，让 form 和 img 的 flex 为 1。给 .contact-img 添加一张背景图。每个包裹着 table 和 input 的盒子的外边距都是 0.75rem。让 label 变成块级元素。最后让 input 和 textarea 的宽为百分百，内边距为 0.5rem。

 #contact{
   display: flex;
 }
 #contact .contact-form,
 #contact .contact-img{
   flex: 1;
 }
 #contact .contact-img{
   background: url('../img/3.jpg') no-repeat center center/cover;
 }
 #contact .contact-form .form-group{
   margin: 0.75rem;
 }
 #contact .contact-form label{
   display: block;
 }
 #contact .contact-form input,
 #contact .contact-form textarea{
   width: 100%;
   padding: 0.5rem;
 }

　　如果当前窗口宽度大于等于 1100px，那么就让 #what 里的 item 变成弹性布局，并且左对齐。让里面的字体图标右外边距是 1.3rem，让它上下对齐，并且让下外边距变为 0，最后让 .contact-img 的 flex 变为 2。

#what .items .item{
  display: flex;
  text-align: left;
}
#what .items .item i{
  margin-right: 1.3rem;
  align-self: center;
  margin-bottom: 0;
}
#contact .contact-img{
  flex: 2;
}

　　如果当前宽度小于等于 768px，#what 下的 items 变成块级元素，让它下面的 item 变成弹性布局，并且左对齐。让里面的字体图标右外边距是 1.3rem，让它上下对齐，并且让下外边距变为 0。如果当前宽度小于 500px，就让 navbar 呈纵向排列，并且居中。让 logo 的下外边距是 0.5rem。让五张 logo 中的最后一张隐藏。如果高小于 568px，就让 .l-heading 的字体大小为 3rem，让 .lead 的字体大小 1rem。

#what .items{
  display: block;
}
#what .items .item{
  display: flex;
  text-align: left;
}
#what .items .item i{
  margin-right: 1.3rem;
  align-self: center;
  margin-bottom: 0;
}
@media screen and (max-width:500px) {
    #navbar{
      flex-direction: column;
      align-items: center;
    }
    #navbar .logo{
      margin-bottom: 0.5rem;
      text-align: center;
    }
    #navbar ul{
      padding: 0.5rem;
    }
    #who{
      display: block;
    }
    #who .who-img{
      height: 300px;
    }
    #clients .items img{
      width: 80%;
    }
    #clients .items div:last-child{
      display: none;
    }
    #contact{
      flex-direction: column;
    }
    #contact .contact-img{
      display: none;
    }
}
@media(max-height:568px){
  .l-heading{
    font-size: 3rem;
  }
  .lead{
    font-size: 1rem;
  }
}

通用类

　　里面类的样式有，黑色背景、绿色背景、绿色字体等

.text{
  color: #93cb52;
}
.text-center{
  text-align: center;
}
.bg-light{
  background: #f4f4f4;
  color: #333;
}
.bg-bark{
  background: #333;
  color: #fff;
}
.bg-primary{
  background: #93cb52;
  color: #FFF;
}
.l-heading{
  font-size: 4rem;
  margin-bottom: 00.75rem;
  line-height: 1.1;
}
.m-heading{
  font-size: 2rem;
  margin-bottom: 00.75rem;
  line-height: 1.1;
}
.lead{
  font-size: 1.3rem;
  margin-bottom: 2rem;
}
.py-1{
  padding: 1.5rem 0;
}
.py-2{
  padding: 2rem 0;
}
.py-3{
  padding: 3rem 0;
}
.p-1{
  padding: 1.5rem;
}
.p-2{
  padding: 2rem;
}
.p-3{
  padding: 3rem;
}
.btn{
  display: inline-block;
  color: #FFF;
  background-color: #93cb52;
  padding: 0.5rem 2rem;
  border: none;
  border-radius: 5px;
  transition: 0.3s;
}
.btn-bark{
  background: #333;
  color: #fff;
}
.btn:hover{
  background: #7ab436;
}
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}
.list{
  margin: 0.5rem 0;
  list-style: none;
}
.list li{
  padding: 0.5rem 0;
  border-bottom: #444 dotted 1px;
}