/* 样式表 styles.css */

/* 基本样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 20px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  header {
    font-size: 18px;
  }
  nav li {
    display: block;
    margin: 10px 0;
  }
}
nav {
  background-color: #0077b6; /* 设置背景颜色为深蓝色 */
  color: #ffffff; /* 设置文字颜色为白色 */
  padding: 10px; /* 添加内边距，以增加可读性 */
}

/* 其他样式可以根据需求添加 */


/* 居中并样式化section内的内容 */
section {
  text-align: center;
}

section h2 {
  color: red;
  font-weight: bold;
}

/* 居中对齐footer */
footer {
  text-align: center;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  header {
    font-size: 18px;
  }
  nav li {
    display: block;
    margin: 10px 0;
  }
}
nav {
  background-color: #0077b6; /* 设置背景颜色为深蓝色 */
  color: #ffffff; /* 设置文字颜色为白色 */
  padding: 10px; /* 添加内边距，以增加可读性 */
}

/* 其他样式可以根据需求添加 */
/* 样式表 styles.css */

/* ... 先前的样式 ... */

/* 添加footer样式 */
footer {
  text-align: center;
  background-color: #333; /* 设置背景颜色为灰色（可以更改为所需颜色）*/
  color: #fff; /* 设置文本颜色为白色 */
  padding: 10px 0;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  header {
    font-size: 18px;
  }
  nav li {
    display: block;
    margin: 10px 0;
  }
}
nav {
  background-color: #0077b6; /* 设置背景颜色为深蓝色 */
  color: #ffffff; /* 设置文字颜色为白色 */
  padding: 10px; /* 添加内边距，以增加可读性 */
}

/* 其他样式可以根据需求添加 */
.random-background {
  background-color: #E1E1E1; /* 默认背景颜色，可根据需要更改 */
  padding: 10px; /* 调整内边距以分离内容 */
}
/* 样式表 styles.css */
section {
  padding: 20px; /* 调整内边距以分隔内容 */
  margin: 10px 0; /* 添加上外边距以分隔各个section */
  border: 1px solid #ccc; /* 添加边框，以分隔section */
  background-color: #f3f3f3; /* 默认背景颜色，可以根据需要更改 */
  text-align: center; /* 文本居中对齐 */
}

section:nth-child(odd) {
  background-color: #e1e1e1; /* 第奇数个section的背景颜色 */
}

section:nth-child(even) {
  background-color: #d1d1d1; /* 第偶数个section的背景颜色 */
}

/* 样式表 styles.css */

/* 电脑浏览器样式 */
@media screen and (min-width: 1024px) {
  main {
    padding-left: 8cm; /* 左侧5cm空白 */
    padding-right: 8cm; /* 右侧5cm空白 */
  }
}

/* 手机样式 */
@media screen and (max-width: 768px) {
  main {
    padding-left: 0.5cm; /* 左侧0.5cm空白 */
    padding-right: 0.5cm; /* 右侧0.5cm空白 */
  }
}

  /* i i s 7 . c o m */