使用CSS对新闻页面进行排版

目的

应用CSS对融媒体内容进行排版

内容

1. 使用外部样式表，对标题、正文、摘要、视频、图片、音频、引用、稿件元信息、重点内容等融媒体构成要素进行合理排版，要求重点突出，易于阅读。
2. 在不同系统中，外观基本一致。
3. 保存文件，上传到仓库。

实施要点

1. 调研优秀微信公众号（如谷雨、真实故事计划、网易数读）、媒体平台（如少数派）的内容排版，借鉴配色、标题等排版要素的处理。
2. 颜色、字号、间距使用变量定义，方便调整。
3. 手机端优先设计。
4. 配色建议使用主色+辅助色，颜色有明确含义。

参考内容

:root {
  --prime-color: #c1d261;
  --prime-color-1: #ffffe8;
  --prime-color-2: #f5f6ca;
  --prime-color-3: #eaedad;
  --prime-color-4: #dde492;
  --prime-color-5: #d0db79;
  --prime-color-6: #c1d261;
  --prime-color-7: #9bb13d;
  --prime-color-8: #778f21;
  --prime-color-9: #566e0d;
  --prime-color-10: #374d00;
  --bg-color: #f4ff9d4c;
  --text-size: 18px;
}
/* 通用基础样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "MiSans", "Microsoft YaHei", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  width: 700px;
  margin: 0 auto;
  background-color: #f4ff9d4c;
}
/* 西瓜播放器样式 */
.xgplayer-pc {
  margin: calc(var(--text-size) * 3) auto;
}
pre {
  font-family: "Noto Serif SC";
  font-size: var(--text-size);
  line-height: 1.7;
  letter-spacing: 1px;
  font-weight: 700;
}
img {
  max-width: 400px;
  display: block;
  margin: 0 auto;
}

h1 {
  font-size: calc(var(--text-size) + 32px);
  font-weight: 900;
  letter-spacing: -6px;
}

h2 {
  font-size: calc(var(--text-size) + 14px);
  color: #020403;
  /* text-decoration: underline; */
  background-image: url("../images/28学校.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* margin-left: 10px; */
  padding-left: calc(32px + 32px);
}

h4 {
  font-size: calc(var(--text-size) + 8px);
}
p {
  font-size: var(--text-size);
  line-height: 1.75;
  letter-spacing: 1px;
  font-weight: normal;
}
/* 摘要样式 */

div#abstract {
  border: 1px solid var(--prime-color-7);
  padding: 18px;
  border-radius: 16px;
}
div#abstract p {
  font-size: calc(var(--text-size) * 0.8);
}