创建美观的主页布局 | 网页设计教程

介绍

在这个项目中，你将学习如何为 LabEx 知识网络网站创建一个简单而美观的主页布局。目标是设计一个美观的主页，有效地展示网站的内容和功能。

👀 预览

LabEx 主页布局预览

🎯 任务

在这个项目中，你将学习：

如何设置项目文件和结构
如何设计页面顶部区域的样式，包括页眉和导航
如何设计页眉区域内内容的样式
如何设计页面的内容区域的样式
如何设计页面的页脚的样式

🏆 成果

完成这个项目后，你将能够：

使用 CSS 创建一个视觉上吸引人的布局
为网页构建和组织 HTML 和 CSS 文件
将 CSS 样式应用于网页的不同部分
确保布局在不同屏幕尺寸下具有响应性且保持一致

设置项目

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹，其中包含以下文件和目录：
- css/style.css
- index.html
在 css/style.css 文件中，添加以下代码以设置页面的基本样式：

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

此代码重置所有元素的默认边距和内边距，并将 box-sizing 属性设置为 border-box，这使得控制元素的大小更加容易。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。
在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

设计顶部区域的样式

在这一步中，你将设计页面的顶部区域的样式，该区域包括页眉和导航。

在 css/style.css 文件中，添加以下代码来设计顶部区域的样式：

.top {
  background-color: #a6b1e1;
}

.nav {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 10px;
}

.nav > span {
  font-size: 18px;
  color: white;
  margin-right: 365px;
  font-weight: 600;
}

.nav_c span {
  font-size: 16px;
  color: white;
  margin-right: 28px;
  font-weight: 600;
}

.nav_c span:nth-child(7) {
  margin-right: 0px;
}

这段代码将顶部区域的背景颜色设置为 #a6b1e1，将宽度为 1024px 的页眉区域居中，并设计导航菜单的样式。

设计头部内容的样式

在这一步中，你将设计页眉区域内内容的样式。

在 css/style.css 文件中，添加以下代码来设计页眉内容的样式：

.header {
  width: 1024px;
  margin: 0 auto;
  height: 440px;
  padding-top: 13px;
}

.header_text {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}

.title_header {
  font-size: 45px;
  color: black;
  margin-bottom: 62px;
}

.title_p {
  font-size: 21px;
  font-weight: 200;
  color: white;
  margin-bottom: 36px;
}

.join {
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}

这段代码将页眉内容在垂直和水平方向上居中，并设计了标题、段落和“加入”按钮的样式。

设计内容区域的样式

在这一步中，你将设计页面的内容区域的样式。

在 css/style.css 文件中，添加以下代码来设计内容区域的样式：

.content {
  width: 1024px;
  margin: 74px auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 302px;
}

.content.item {
  height: 144px;
  width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content.item span {
  font-size: 30px;
  font-weight: 200;
  color: black;
}

.content.item p {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}

这段代码将内容区域居中，创建一个每行有两个项目的弹性布局，并设计各个内容项目的样式。

设计页脚样式

在这一步中，你将设计页面的页脚样式。

在 css/style.css 文件中，添加以下代码来设计页脚样式：

.footer {
  width: 100%;
  height: 80px;
  border-top: 2px solid #aaa;
}

.footer_text {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  padding-top: 30px;
}

这段代码将页脚的高度设置为 80px，在顶部添加一条 2px 宽的颜色为 #aaa 的边框，并使页脚文本居中。

通过这些步骤，你已经完成了 LabEx 知识网络主页的布局和样式设计。

最终结果如下：

图片描述

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

简洁美观的主页设计

介绍