如何为创建的多个本地网页添加CSS并实现nav导航跳转？

一、为本地网页统一添加CSS样式 #

推荐使用外部样式表方案，一次修改即可全站生效，维护成本最低：

• 第一步：在所有网页文件所在的根目录新建一个CSS文件，命名为style.css
• 第二步：打开每个HTML文件（home.html、reservation.html、price.html、about-me.html、contact.html），在<head>标签内插入样式引入代码：

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

• 第三步：直接在style.css文件内编写全局样式即可，以下是导航栏样式示例可参考：

  /* 导航栏基础样式 */
  nav {
    background-color: #f8f9fa;
    padding: 12px 20px;
  }
  /* 导航链接样式 */
  nav a {
    margin-right: 18px;
    text-decoration: none;
    color: #212529;
  }
  /* 导航链接 hover 效果 */
  nav a:hover {
    color: #0d6efd;
    text-decoration: underline;
  }
  

如果需要给单个页面加专属样式，也可以在对应HTML文件的<head>标签内插入<style>标签编写内部样式，不推荐使用行内样式，后续维护难度高。

二、实现Contact选项跳转本地联系页 #

你只需要给导航栏的<a>标签配置正确的相对路径即可，所有页面统一使用以下导航结构即可：

<nav>
  <a href="./home.html">Home</a>
  <a href="./reservation.html">Reservation</a>
  <a href="./price.html">Price</a>
  <a href="./about-me.html">About Me</a>
  <a href="./contact.html">Contact</a>
</nav>

配置注意事项：

• 确保所有HTML文件存放在同一个根目录下，用./开头的相对路径即可正确识别文件
• 建议把文件名中的空格替换为连字符-，比如把about me.html重命名为about-me.html，避免路径识别出错
• contact.html内的图片也用相对路径引入即可，示例：![联系二维码](./img/contact-qrcode.jpg)

内容的提问来源于stack exchange，提问作者Bilal