构建一个响应式新闻网站主页

简介

在这个项目中，你将学习如何为 LabEx 日报网站创建主页。你需要负责搭建 HTML 结构，并使用 CSS 对主页的各个部分进行样式设计。

👀 预览

🎯 任务

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

• 如何为 LabEx 日报主页搭建 HTML 结构
• 如何为头部区域设置样式，包括标志和导航按钮
• 如何为横幅区域设置样式，包括手机图片和内容区域
• 如何为标签标题区域设置样式，包括“最新新闻”和“更多”文本
• 如何为新闻列表区域设置样式，包括新闻条目的布局和“更多”按钮
• 如何为页脚区域设置样式，包括左右两个部分

🏆 成果

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

• 为新闻网站创建一个响应式且视觉上吸引人的主页
• 使用 CSS 为网页的不同部分设置样式
• 使用 CSS 定位和对齐元素
• 应用各种 CSS 属性来实现所需的设计

Skills Graph

设置项目结构

在这一步中，你将设置项目结构并准备必要的文件和文件夹。

这个问题的初始代码已经提供。打开编码环境，目录结构如下：

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

其中：

• css/style.css 是本次挑战需要完成的样式文件。
• images 包含项目中使用的图像文件。
• index.html 是 LabEx 日报项目的主页。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开 “Web 8080” 并手动刷新，你将看到页面。

请完成 css/style.css 样式文件（不要修改已给出的基础 CSS 样式），使 LabEx 日报主页如下所示（页面总宽度为 1024px）：

为头部设置样式

在这一步中，你将学习如何为 LabEx 日报主页的头部区域设置样式。按照以下步骤完成此步骤：

1. 在代码编辑器中打开 css/style.css 文件。
2. 在 /* TODO */ 之后添加以下 CSS 规则以调整标题样式：

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

这些 CSS 规则为头部设置样式，包括 LabEx 日报的标志、“APP 下载”按钮及其悬停效果。

为横幅设置样式

在这一步中，你将学习如何为 LabEx 日报主页的横幅区域设置样式。按照以下步骤完成此步骤：

1. 在代码编辑器中打开 css/style.css 文件。
2. 将以下 CSS 规则添加到 css/style.css 文件中：

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

这些 CSS 规则为横幅区域设置样式，包括背景颜色、手机图片的定位以及带有标题和描述的内容区域。

为标签标题设置样式

在这一步中，你将学习如何为 LabEx 日报主页的标签标题部分设置样式。按照以下步骤完成此步骤：

1. 在代码编辑器中打开 css/style.css 文件。
2. 将以下 CSS 规则添加到 css/style.css 文件中：

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

这些 CSS 规则为标签标题部分设置样式，包括背景颜色、“浏览内容”和“最新内容”文本的定位以及它们各自的样式。

为新闻列表设置样式

在这一步中，你将学习如何为 LabEx 日报主页的新闻列表部分设置样式。按照以下步骤完成此步骤：

1. 在代码编辑器中打开 css/style.css 文件。
2. 将以下 CSS 规则添加到 css/style.css 文件中：

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

这些 CSS 规则为新闻列表部分设置样式，包括新闻条目的布局、图像大小和定位、文本样式以及底部的“在应用中查看更多！”按钮。

为页脚设置样式

在这最后一步中，你将学习如何为 LabEx 日报主页的页脚部分设置样式。按照以下步骤完成此步骤：

1. 在代码编辑器中打开 css/style.css 文件。
2. 将以下 CSS 规则添加到 css/style.css 文件中：

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

这些 CSS 规则为页脚部分设置样式，包括背景颜色、左右部分的布局、文本样式以及二维码图像的定位。

恭喜！你现在已经完成了 LabEx 日报主页的样式设置。你现在可以在网页浏览器中打开 index.html 文件以查看最终结果。

总结

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