米修在线 | 前端在线学习平台

创建html页面、css样式文件、link引入css样式，先写入标题html内容和css内容

《标题部分》

<nav id="navbar">
    <h1 class="logo">
      <span class="text-primary">
        <i class="fas 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>

/* rest */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}
a {
  text-decoration: none;
}
p {
  margin: 0.75rem 0;
}
/* utility classes */
.text-primary {
  color: #93cb52;
}
/* navbar */
#navbar {
  display: flex;
  justify-content: space-between;
  background: #333;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1rem;
}
#navbar ul {
  display: flex;
  list-style: none;
  align-items: center;
}
#navbar ul li a {
  color: white;
  padding: 0.75rem;
  margin: 0 0.25rem;
}
#navbar ul li a:hover {
  background: #93cb52;
  border-radius: 5px;
}

写入home页面插入一个背景图片调整图片透明度、写入home里小标题和内容添加css样式

<!-- header:Home -->
  <header id="home">
    <div class="home-content">
      <h1 class="l-heading">欢迎来到米修在线</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus alias ut ipsa laudantium eveniet
        rerum!</p>
      <a href="#what" class="btn">阅读更多</a>
    </div>
  </header>

css样式

/* home页面 */
#home {
  background: url('../img/home.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, 0.4);
}

what we do界面内容小标题和三个模块分为三个字体图标,每个模块内都写入了一些内容

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

使用css调整what we do小标题和内容样式

/* section:what we do */
#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;
}

 修改内容设置字体插入图片，添加内容样式

<section id="who">
    <div class="who-img"></div>
    <div class="who-text bg-dark p-2">
      <h2 class="m-heading"><span class="text-primary">Who</span> We Are</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptatem, voluptatum omnis corrupti tempora
        magnam veritatis, aliquid dolore praesentium consectetur optio laudantium sed hic doloremque vero accusamus et!
        Vitae, quos.</p>
      <h3>Our Team</h3>
      <ul class="list">
        <li>Mark Smith:CEO</li>
        <li>Shannon Johnson:CFO</li>
        <li>John Corbit:Lead Accountant</li>
        <li>Janet Williams:Investment Manager</li>
        <li>Kara Jackson:Senior Accountant</li>
      </ul>
    </div>
  </section>

css样式

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

OurClients部分只需五个imglogo图片

<div class="items py-1">
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
      </div>

Contact Us 写入字体内容插入图片、input、button按钮

<!-- section:contact us -->
  <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" placeholder="请输入内容"></textarea>
        </div>
      </form>
      <input type="submit" value="send" class="btn btn-dark">
    </div>
    <div class="contact-img"></div>
  </section>

css样式

/* section:contact */
#contact {
  display: flex;
}
#contact .contact-form,
#contact .contact-img {
  flex: 1;
}
#contact .contact-img {
  background: url('../img/contact.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;
}