Logo

菜单

发布于 2026-01-06 1 阅读
0

CSS教程——仅使用HTML和CSS构建一个包含Flexbox和Grid的落地页。

CSS教程——仅使用HTML和CSS构建一个包含Flexbox和Grid的落地页。

在本教程中，我们将为名为Skilllz 的在线教育平台构建一个简单的着陆页。

ezgif.com-gif-maker.gif

本教程将涵盖 CSS Flexbox 和 CSS Grid 对齐方式的使用和实现，还会涉及许多其他 CSS 概念。

本教程将分为三个部分。

  • 导航部分
  • 展示区
  • 以及下部区域，

以上内容均与构成该项目的三个 HTML 部分相关。

创建 HTML 样板

如果你的 IDE 中安装了 Emmet，你可以输入!并点击键盘上enter的 或键来为你的项目生成 HTML 样板。tab

如果不行，您可以复制这段样板代码并将其粘贴到您的 HTML 文件中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

使用 Font Awesome 图标

如图所示，我们将使用一些字体图标来更好地展示我们的服务部分。为此，我们将使用来自 CDN 的 Font Awesome 图标库。如果您自己创建了 HTML 生物信息模板，请复制以下链接标签并将其粘贴到您的 <head> 标签中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
Enter fullscreen mode Exit fullscreen mode

入门

请确保您的样式表文件（.css）已正确链接到您的HTML页面。

测试.png

第一部分：导航区域

导航栏部分将包含我们网站的名称以及两个导航链接：Log in和check courses。

以下是导航栏的标记代码：

<div class="navbar">
        <div class="container flex">
          <h1 class="logo">Skilllz</h1>
            <nav>
              <ul>
                <li class="nav"><a class="outline" href="">Log in</a></li>
                <li class="nav"><a href="" class="outline">Check courses</a                 </li>
              </ul>
            </nav>
        </div>
      </div>
Enter fullscreen mode Exit fullscreen mode

在包裹此部分（导航栏）内元素的 div 元素上，我们注册了container和flex类。

  • .container我们将在每个部分使用此实用类，以确保内部元素的宽度不超过我们在 CSS 中指定的特定值。

  • .flex我们将使用这个实用类，通过 CSS flexbox 以水平对齐（并排）的方式显示子元素。

在内部，div我们有一个类h1为的元素logo和两个分别li>a带有outline类的导航链接。

我们的页面看起来会非常简陋。

navbarHTML1.png

应用 CSS 样式

现在我们需要应用一些 CSS 规则来设置导航栏的样式。首先，我们要做的是设置网页的基本样式：

/* Overide default style and setting padding and margin to nothing */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

/* White text throughtout */

body {
  font-family: "lato", sans-serif;
  color: white;
}

/* Make all link texts black with no text decoration */
a {
  color: black;
  text-decoration: none;
}


h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.2;
}


h2 {
  font-size: 25px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

p {
  font-size: 30px;
}

/* All images must not be larger than parent container */
img {
  width: 100%;
}

/* No styling on list items */
li {
  list-style-type: none;
}



p {
  font-size: 20px;
  margin: 10px 0;
}
Enter fullscreen mode Exit fullscreen mode

应用默认样式后，我们的页面现在看起来会是这样。

navbarHTML2.png

接下来，我们需要定义容器类的样式。

/* Centers it, sets a maximum width and make sure elements can flow past it*/

.container {
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}
Enter fullscreen mode Exit fullscreen mode

现在，我们的内容宽度将不会超过指定的最大宽度。

navbarHTML3.png

之后，我们需要将导航栏部分的背景颜色设置为紫色。

/* Sets background color, height and padding*/

.navbar {
  background-color: purple;
  height: 70px;
  padding: 0 30px;
}
Enter fullscreen mode Exit fullscreen mode

navbarHTML4.png

然后我们仅针对导航栏内的 h1 元素，并指定以下样式

/* Sets font size, reduces font-weight, adds margin and line height */

.navbar h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}
Enter fullscreen mode Exit fullscreen mode

应用该样式后，我们的h1标题将如下所示。

navbarH5.png

现在我们需要使用 Flexbox 将容器 h1 和 nav 中的两个子元素并排显示。

.navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

首先，我们将显示模式设置为弹性布局。默认情况下，这将使元素并排对齐。然后，我们对内容进行两端对齐，使用 space-between 值在元素之间添加足够的间距。

我们将项目对齐到容器的中心（中间），并将容器的高度设置为占据整个容器。

这就是我们页面现在应该的样子。

navrbarH6.png

但是，我们也不希望两个导航链接上下堆叠。相反，我们希望它们并排显示。猜猜我们是怎么做到的？用 FlexBox！

.navbar ul {
  display: flex;
}

/* Changes the color of both links to white, add padding between them and margin as well */

.navbar a {
  color: white;
  padding: 9px;
  margin: 0 10px;
}
Enter fullscreen mode Exit fullscreen mode

我们的页面现在看起来会是这样。

navbarH7.png

如果你看过简短的介绍视频，你会注意到，每当我将鼠标悬停在任何链接上时，文本颜色都会变成较浅的紫色，并且下方会出现实线边框。我们可以使用 CSS 的 `:hover` 伪元素来实现这种过渡效果：

.navbar a:hover {
  color: #9867C5;
  border-bottom: 3px solid #9867C5;
}
Enter fullscreen mode Exit fullscreen mode

现在观看这段视频

ezgif.com-gif-maker (1).gif

第二部分：展示区

展示区将包含标题文字、辅助文字、新用户注册表单以及标题图片。

本部分将分为左右两部分。换句话说，它将以两单元网格的形式显示。

以下是本部分的标记

<section class="showcase">
        <div class="container">
            <div class="grid">
              <div class="grid-item-1">
                <div class="showcase-text">
                  <h1>Learn any digital skill of your choice today</h1>
                  <p class="supporting-text"> Over 30,000 students currently learn with us</p>
                </div>
                <div class="showcase-form">
                  <form action="">
                    <input type="email" placeholder="Enter your email address">
                    <input type="submit" class="btn" value="Start Learning">
                  </form>
                  <p class="little-info">Try out our free courses today. No risk, no credit card required</p>
                </div>
              </div>

              <div class="grid-item-2">
                <div class="image">
                  <img src="./images/transparent.png" alt="">
                </div>
              </div>
           </div>

        </div>
      </section>
Enter fullscreen mode Exit fullscreen mode

目前，我们的应用程序看起来会有点杂乱。

展示H1.png

应用 CSS 样式

首先，我们设置展示区域的高度以及背景颜色。

.showcase {
  height: 300px;
  background-color: purple;
}
Enter fullscreen mode Exit fullscreen mode

我们的应用现在看起来会是这样。

展示H2.png

接下来，我们应用以下样式

/* Adds margin below the text */
.showcase p {
  margin-bottom: 30px;
}

/* Adds a shadow below the image */
.showcase img {
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

/* Adds some padding on the form content */
.showcase-form {
  padding-left: 7px;
}
Enter fullscreen mode Exit fullscreen mode

这就引出了我们的主要活动。如果你还记得，我说过我们将在展示容器内创建两个部分（网格）。通过在容器上注册网格类，我们可以使用 CSS 网格布局来对齐其内容。

.grid {
  overflow: visible;
  display: grid;
  grid-template-columns: 60% 40%;
}
Enter fullscreen mode Exit fullscreen mode

这将在我们的展示容器内创建两列。第一列将占据容器的 60%，第二列将占据剩余的 40%。溢出可见性将确保图像（如果大于容器）能够溢出容器。

我们的应用现在看起来会是这样。

展示H3.png

接下来，我们需要在导航区域和展示区域之间留出一些空间。

.grid-item-1,
.grid-item-2 {
  position: relative;
  top: 50px;
}
Enter fullscreen mode Exit fullscreen mode

因此，现在间距稍微拉大了一些。

展示H4.png

现在，我们需要设置两个表单输入框的样式，因为它们现在看起来不太美观。我们通过类型（email）选择第一个输入框，通过类名 btn 选择第二个输入框。

.showcase input[type='email'] {
  padding: 10px 70px 10px 0;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding-left: 6px;
}

.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

这种样式会将我们的表单输入转换为这种格式。

展示H5.png

或许还可以更改辅助文本的字体。

.showcase-form {
  margin: auto;
}

/* Change typeface and its size */
.little-info {
  font-size: 15px;
  font-family: "poppins", sans-serif;

}
Enter fullscreen mode Exit fullscreen mode

这是我们展示部分的最终效果图。

展示H7.png

本部分到此结束！

第三部分：下部区域

页面下半部分将包含两个部分：统计数据部分和用户评价部分。

显示 Skilllz 提供的服务的统计容器将由三个部分组成div，每个部分都包含一个 Font Awesome 图标、一个h3类title和一个p类段落text。

评价栏将显示三位随机选择的、使用 Skillz 学习过的人的评价。图片来自 Unsplash。

统计部分

首先，我们要处理统计信息区域。这里的文字只是占位符文本，属于占位符。

以下是它的标记。

<div class="lower-container container">
      <section class="stats">
        <div class="flex">
          <div class="stat">
            <i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
            <h3 class="title">Over 300 available courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
            <h3 class="title">Free certificate offered on all courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true"></i>
            <h3 class="title">Book 1on1 session for as low as $5</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </section>
Enter fullscreen mode Exit fullscreen mode

这部分将显示为空白页。这是因为我们将正文所有文本的颜色都设置为了白色。所以我们需要开始设置样式。

应用 CSS 样式

首先我们需要应用以下样式

/* Centers the container, sets a maximum width
.lower-container {
  margin: 120px auto;
  padding: 0;
  max-width: 1400px;
}


/* Targets all h3 with class of title */
.title {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

/* Targets the paragraphs with class name of text */
.text {
  color: black;
  font-size: 19px;
  width: 100%;
  padding: 10px;
  margin: 0, 20px;
  text-align: justify;
}
Enter fullscreen mode Exit fullscreen mode

这样一来，我们的文本就可见了。

lower1.png

请注意，Font Awesome 的字体图标目前无法显示。我们将尽快解决这个问题。

但在此之前，我们需要做一件重要的事情。我们希望这三个统计信息 div 元素水平对齐（并排排列）。为了实现这一点，我们将再次使用 CSS Flexbox。

/* Display horizontally, put a little space around them */
.flex {
  display: flex;
  justify-content: space-around;
}

/* Add some padding around the container. Align text centrally */
.stats {
  padding: 45px 50px;
  text-align: center;
}

/* Set margin and width */
.stat {
  margin: 0 30px;
  text-align: center;
  width: 800px;
}
Enter fullscreen mode Exit fullscreen mode

这就是我们的应用程序现在的样子

lower2.png

还是没有图标？该解决这个问题了！

.stats .fa {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

瞧！

lower4.png

用户评价部分

页面底部容器div内的第二个部分是客户评价部分。该部分将包含三张卡片，每张卡片上都包含客户的照片（照片被裁剪在一个圆圈内）、姓名以及客户的评价。

以下是相关的标记。

<section class="testimonials">
      <div class="container">
        <div class="testimonial grid-3">
          <div class="card">
            <div class="circle">
              <img src="./images/4.jpg" alt="">
            </div>
            <h3>Aston</h3>
            <p>I have learnt web development using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/5.jpg" alt="">
            </div>
            <h3>Beth</h3>
            <p>I have learnt copywriting using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/6.jpg" alt="">
            </div>
            <h3>Chris</h3>
            <p>I have learnt affilitate marketing using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
        </div>
      </div>
    </section>
Enter fullscreen mode Exit fullscreen mode

为其应用样式

首先，我们将文本颜色设置为黑色，以便我们能够看到它。

.testimonial {
  color: black;
  padding: 40px;
}
Enter fullscreen mode Exit fullscreen mode

应用后，应该会使文本可见，并为该部分添加一些内边距。

testi1.png

接下来，我们将图像的高度设置为与父容器的高度相同。


/* Wrap the image inside a cirle shape and set height to take up all of parent element */

.testimonial img {
    height: 100%;
    clip-path: circle();
}

/* Align text centrally */

.testimonial h3{
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

如果你查看 gif 中的最终布局，你会注意到所有三张客户评价卡片都并排排列在同一行上。

因此，我们需要div使用 CSS 网格布局创建三个等宽的列。

/* Create a grid of three equal columns. Set a gap of 40 px between them */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


/* Create a white card with some shadow around it */
.card {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
               7px  7px 20px rgba(0, 0, 0, 0.2)
}
Enter fullscreen mode Exit fullscreen mode

应用所有这些样式后，客户评价部分现在看起来会是这样。

testi2.png

最后，我们使用 CSS 设置圆形 div 的样式，并将其定位到卡片的上边缘。

.circle {
    background-color: transparent;
    border:3px solid purple;
    height:90px;
    position: relative;
    top: -30px;
    left: 120px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}
Enter fullscreen mode Exit fullscreen mode

这就是所有内容在浏览器上的显示效果。

testi4.png

总结

FlexBox 和 Grid 对齐方式是非常强大的工具，可以让你随心所欲地布局网页。

在本教程中，我们成功地使用 CSS Flexbox、Grid 以及许多其他 CSS 属性设计了一个简单的落地页。在下一个教程中，我将使用媒体查询使其更具响应性。

整个项目的代码可以从其GitHub代码库中获取。

希望这篇教程对你有所帮助。如果你有任何建议，请在Twitter上联系我。

感谢大家的关注，我们下次再见。

文章来源：https://dev.to/ubahthebuilder/css-tutorial-build-a-landing-page-using-just-html-and-css-featuring-flexbox-and-grid-179l
Delta：一款全新的 git d...
2分钟内停止泄露您的API密钥