修复网站显示问题

介绍

在这个项目中，你将学习如何修复网站的显示问题，并确保其样式和布局正确。目标是接手一个未完成的网站，并使其看起来像预期的成品。

👀 预览

🎯 任务

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

• 如何识别和修复 HTML 文件中的问题
• 如何更新 CSS 文件以应用正确的样式
• 如何确保网站以所需的宽度和布局显示

🏆 成果

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

• 分析和排查 HTML 和 CSS 代码故障
• 应用正确构建和设计网页的技术
• 展示在网页开发中注重细节的重要性

设置项目结构

在这一步中，你将设置项目并在编辑器中打开文件。

1. 打开编辑器，你应该会看到以下文件：index.html、style.css，以及图像文件html5logo.png、css3-logo.png、nav-btn.png和evolution.png。
2. 点击 WebIDE 右下角的Go Live按钮来运行项目。
3. 在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

修复网站显示

在这一步中，你将查看页面的 HTML 结构，并从中找到修复页面显示混乱问题的方法。

1. 在代码编辑器中打开index.html文件。
2. 检查index.html文件，注意到 CSS 文件的<link>标签的文件名错误。将href属性更新为指向正确的文件style.css。

<link rel="stylesheet" href="style.css" />

3. HTML 文件包含以下主要部分：

   • <header>：包括网站标题和导航菜单。
   • <div class="content">：包含页面的主要内容，包括一个单列部分、一个三列部分和一个两列部分。
   • <footer>：包括带有链接的网站页脚。

4. 将对index.html文件所做的更改保存。

5. 在修复错误后，在浏览器中刷新页面，你将看到以下效果：

恭喜！你已通过更新 HTML 和 CSS 文件成功修复了网站显示问题。

总结

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