/* ============================================================
   个人主页 · 固定样式表（style.css）
   本文件由老师提供，学生只需在 HTML 中用 <link> 引入即可，
   不需要理解或修改任何 CSS 代码。

   使用方法：在 <head> 中加入
   <link rel="stylesheet" href="style.css">
   ============================================================ */

/* 整体页面：字体、背景色、文字颜色 */
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background-color: #f5f6f8;
  color: #2c2c2a;
  margin: 0;
  line-height: 1.7;
}

/* 页头区块：对应 <div id="header"> */
#header {
  background-color: #185fa5;
  color: #ffffff;
  text-align: center;
  padding: 36px 20px;
}
#header h1 { margin: 0; font-size: 28px; }
#header p { margin: 8px 0 0; opacity: 0.9; }

/* 导航区块：对应 <div id="nav"> */
#nav {
  background-color: #0c447c;
  text-align: center;
  padding: 12px;
}
#nav a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 18px;
  font-size: 15px;
}
#nav a:hover { text-decoration: underline; }

/* 内容区块：对应 <div class="section"> */
.section {
  background-color: #ffffff;
  border: 1px solid #e3e5e8;
  border-radius: 10px;
  margin: 20px auto;
  padding: 20px 28px;
  max-width: 760px;
}

/* 高亮文字：对应 <span class="highlight"> */
.highlight {
  color: #d85a30;
  background-color: #faeeda;
  padding: 0 4px;
}

/* 标题 */
h2 { color: #185fa5; }
h3 { color: #0f6e56; }

/* 水平分隔线 */
hr {
  border: none;
  border-top: 1px solid #e3e5e8;
  margin: 14px 0;
}

/* 图片：圆角 */
img {
  border-radius: 10px;
}

/* 链接 */
a { color: #185fa5; }

/* 表格：对应 <table>，表头 <th>，单元格 <td> */
table {
  border-collapse: collapse;
  width: 100%;
}
caption {
  font-weight: bold;
  color: #0c447c;
  margin-bottom: 8px;
}
th, td {
  border: 1px solid #b4b2a9;
  padding: 8px 12px;
  text-align: center;
}
th { background-color: #e6f1fb; }

/* 页脚区块：对应 <div id="footer"> */
#footer {
  background-color: #2c2c2a;
  color: #ffffff;
  text-align: center;
  padding: 16px;
  font-size: 13px;
}
#footer p { margin: 0; }
