极简风！纯CSS+HTML实现小米官网首页，无需使用框架

前端

2023-03-22 10:45:33

CSS+HTML 极简风设计：实现小米官网首页静态页面

背景与目标

如今，极简风设计在网页设计中备受推崇。本教程将指导您使用 CSS 和 HTML 创建小米官网首页的极简风静态页面，提升您的网页设计技能。

项目准备

着手之前，请确保具备以下工具：

文本编辑器（如 VSCode、Sublime Text、Atom）
现代浏览器（如 Chrome、Firefox、Safari）
图像编辑软件（如 Photoshop、GIMP）

项目结构

创建一个名为“mi_home”的项目文件夹，并添加以下文件和文件夹：

index.html
style.css
images/

HTML 代码

在 index.html 文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="logo">
      <img src="images/logo.png" alt="小米">
    </div>
    <nav>
      <ul>
        <li><a href="#">手机</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">智能家居</a></li>
        <li><a href="#">服务</a></li>
      </ul>
    </nav>
    <div class="search">
      <input type="text" placeholder="搜索">
      <button type="submit">搜索</button>
    </div>
  </header>

  <main>
    <section class="banner">
      <img src="images/banner.jpg" alt="小米手机">
      <div class="text">
        <h1>小米手机</h1>
        <p>引领潮流，触手可及。</p>
        <a href="#">立即购买</a>
      </div>
    </section>

    <section class="products">
      <div class="product">
        <img src="images/product1.jpg" alt="小米手机1">
        <div class="info">
          <h3>小米手机1</h3>
          <p>售价：1999元起</p>
          <a href="#">立即购买</a>
        </div>
      </div>
      <div class="product">
        <img src="images/product2.jpg" alt="小米手机2">
        <div class="info">
          <h3>小米手机2</h3>
          <p>售价：2999元起</p>
          <a href="#">立即购买</a>
        </div>
      </div>
      <div class="product">
        <img src="images/product3.jpg" alt="小米手机3">
        <div class="info">
          <h3>小米手机3</h3>
          <p>售价：3999元起</p>
          <a href="#">立即购买</a>
        </div>
      </div>
    </section>

    <section class="features">
      <div class="feature">
        <img src="images/feature1.png" alt="长续航">
        <div class="text">
          <h3>长续航</h3>
          <p>超大容量电池，持久续航。</p>
        </div>
      </div>
      <div class="feature">
        <img src="images/feature2.png" alt="快充">
        <div class="text">
          <h3>快充</h3>
          <p>支持快速充电，快速回血。</p>
        </div>
      </div>
      <div class="feature">
        <img src="images/feature3.png" alt="大屏幕">
        <div class="text">
          <h3>大屏幕</h3>
          <p>大视野，沉浸体验。</p>
        </div>
      </div>
    </section>

    <section class="testimonials">
      <div class="testimonial">
        <div class="avatar">
          <img src="images/avatar1.png" alt="用户头像">
        </div>
        <div class="content">
          <p>小米手机真的很棒！续航持久，拍照清晰，运行流畅。我已经用了一年多了，没有任何问题。</p>
          <div class="author">
            <span>用户1</span>
          </div>
        </div>
      </div>
      <div class="testimonial">
        <div class="avatar">
          <img src="images/avatar2.png" alt="用户头像">
        </div>
        <div class="content">
          <p>小米手机性价比很高，功能齐全，价格实惠。我非常满意。</p>
          <div class="author">
            <span>用户2</span>
          </div>
        </div>
      </div>
      <div class="testimonial">
        <div class="avatar">
          <img src="images/avatar3.png" alt="用户头像">
        </div>
        <div class="content">
          <p>小米手机外观时尚，手感舒适，拍照效果很好。我非常喜欢。</p>
          <div class="author">
            <span>用户3</span>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="copyright">
      <p>Copyright © 2023 小米公司。保留所有权利。</p>
    </div>
  </footer>
</body>
</html>

CSS 代码

在 style.css 文件中，添加以下代码：

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 整体布局 */
body {
  font-family: sans-serif;
  background-color: #fff;
}

/* 页眉 */
header {
  width: 100%;
  height: 60px;
  background-color: #000;
}

.logo {
  float: left;
  margin-left: 20px;
}

.logo img {
  width: 100px;
  height: 100px;
}

nav {
  float: right;
  margin-right: 20px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #fff;
}

nav a:hover {
  color: #ff6600;
}

.search {
  float: right;
  margin-right: 20px;
}

.search input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #ccc;
}

.search button {
  width: 60px;
  height: 30px;
  background-color: #ff6600;
  border: none;
  color: #fff;
}

.search button:hover {
  background-color: #ff8800;
}

/* 主体内容 */
main {
  width: 100%;
}

/* 横幅 */
.banner {
  width: 100%;
  height: 500px;
  background-image: url(images/banner.jpg);
  background-position: center;
  background-size: cover;
}

.banner .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.banner h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.banner p {
  font-size: 16px;
  margin-bottom: 20px;
}

.banner a {
  text-decoration: none;
  color: #ff6600;
  border: 1px solid #ff6600;
  padding: 5px 10px;
  border-radius: 5px;
}

.banner a:hover {
  background-color: #ff6600;
  color: #fff;
}

/* 产品展示 */
.products {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 50