网站设计注意

色泽

配色方案,有吸引力又专业.且有合理对比度和一致性,以免颜色冲突.
一致性

配色方案

用于背景,标题,文本和按钮的绿色,粉红色和灰色.
可使用CSS变量:

body {
  --pink: #CF92B7;
  --green: #59876B;
  --grey: #4A4A4A;
}

h1 {
  color: var(--pink);
}

还可使用SCSS或其他CSS预处理器.

网站主题大约需要4种颜色.两种(黑色,白色,灰色等)是中性色,其余两种是突出色.使用单色作为阴影非常好！
用彩虹配色时,将彩虹视为一种颜色,其他颜色用两个中性色.例如,用深灰色表文本,白色表背景,彩虹色表文本和形状.

颜色冲突

重要:颜色看起来很好但不会冲突.一般,色轮另一侧颜色会发生冲突.
另外,请考虑色调.如使用凉爽的粉红色,凉爽的绿色会比暖色的绿色好.暖色偏红,冷色偏蓝.

对比

颜色间要合理的对比度.否则,难以阅读. 一般试验,将浅色设置为深色,将深色设置为浅色！

文字

间距(英文)

内容的左右
减少眼睛移动,阅读舒适且页面更好.W3C建议每行<80个字符.

<style>
  .container {
    width: 80%;margin: 0 auto;
  }
</style>

<div class="container">
  <p>
    一堆文本
  </p>
</div>

行高

增加行高适用于可访问性.建议值为1.5到2.0.

p {
  font-size: 18px;
  line-height: 2.0;//这里
}

段落间边距

p {
  padding-bottom: 27px;
}

字间距

h1 {
  word-spacing: 9px;//字母文字的
}

对齐方式

对英语,最难读的是不均匀左对齐内容.text-align: center;可使标题和文本居中对齐,较长内容左对齐.

高可读字体

serif,就是有突出的,sans-serif,无突出.有可能搞反了,注意

色泽

白底黑字,对比度过高会导致眼睛疲劳.用深灰色.也是高对比度,但不如黑色文本.

p {
  color: #4A4A4A;
}

纯黑色背景不好.深海军蓝或灰色更好.

大小

标头必须大于内容.用不同字体粗细将它们与文本区分开.
强调文字和非文字

分割页面

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
</style>

<div class="container">
  <div class="text">
    内容
  </div>
  <img src="path/to/img">
</div>

不要使用复杂的图像

添加文字阴影

更易阅读.

.text {
  text-shadow: #4A4A4A 1px 1px 8px;
}