主要内容
网页设计
我们已经向您展示了如何制作网页，但我们可能还没有向您展示如何让网页更美观。当然，怎样更美取决于观看者，所以最终是由您——和您的用户——来决定怎样的网页设计更悦目。
除了美观，您可能还希望您的网页不同于其他网页，使它可以从一众页面中脱颖而出。
这往往是最困难的部分——让您的网页看起来既美观又与众不同。也许您可以通过用斑马条纹覆盖一切并全部使用64像素大小的字体来让其变得不同，但您会这样做吗？
选择正确的字体
默认情况下，浏览器会为网页提供通用衬线字体，这往往会给访问者传达比较正式的感觉。您可能会想更换为无衬线字体，或者您可以指定一种大多数用户计算机上都具备的字体，比如微软雅黑或仿宋。
若要使网页具有更独特的外观，还可以使用自定义网页字体。例如，可汗学院所有页面都使用了Lato字体，这是一种不错的无衬线字体：
无论您从哪里获取您的字体，您应该注意字体过多。一般来说，您不应该在您的页面上使用超过两个或三个字体，而且您使用的字体应该很好的搭配在一起。这个 网站 提供了一些能够很好搭配在一起的谷歌字体的例子。
选择合适的颜色
在设计网页的时候，您可能会选取一个主色调——一系列能够很好地互相搭配并且可以被用于网页各部分的颜色。这些颜色可能来源于您公司的徽标，或者与当前页面的主题有关，又或者它们只是搭配起来很好看。
需要帮助挑选主色调吗？如果您已经决定了几个需要在调色板中的颜色，您可以去 Paletton网站，它可以让您体验不用类型的主色调: 单色调，三色调，邻近色，和四色。
如果您要从头开始，您可以在 COLOURLovers 上挑选几种颜色搭配。这是一个由热爱色彩的人组成的，共享色彩搭配和想法的社区。这是一个叫做巨型金鱼的调色板:
一旦您选好了您的颜色，您就可以进行最困难的部分了：为网页每个部分决定适合的颜色。网页标题应该是什么颜色？链接呢？正文呢？背景呢？Paletton 最方便之处就在于它为您提供了使用主色调的示例：
在决定您要如何将您的主色调转换为css的时候，请考虑以下几点：
如果您不确定您使用的颜色是否合适，把它发个几个朋友，征求一下他们的意见。他们能很容易的阅读所有内容吗？他们知道哪些内容可以点击吗？有任何的颜色让他们不爽吗？他们喜欢哪些颜色？
合理使用空白
我曾经问过我的同事——他现在是谷歌的设计师——他成功设计的秘诀是什么。他的回答？空白！
空白指的是两个元素之间的任何间隔，而且在CSS中，它经常来自于 padding (填充)，margin (边距) 和 line-hieight (线高) 等属性。
我的朋友是对的——空白会对您网页的美观程度和可读性产生巨大的影响。我的设计师朋友经常花费几个小时调整空白来将它调整合适，因为他知道空白有多重要。
举一个极端的例子，以下是一个课程页面边栏有空白和没空白的比较：
这对您意味着什么？很难给出关于空白的硬性和快速的规则。每当您有一个元素位于另一个元素旁边时，请考虑他们之间的边距有多大。如果您有一个具有背景或边框的元素，请考虑它们有多少填充。在创建段落和列表时，请考虑额外的线高是否会提供一些额外的阅读空间。
从模板和框架开始
您可能在阅读了所有这些准则后被吓倒，特别是当您认为您不具备艺术眼光的时候。别担心，您不需要成为一个设计大师来制作一个精美的网页。您可以先从模板入手，享受其他设计师的设计成果。
模板是看起来已经像是一个完整的网页的HTML和CSS，里面通常已经填充了一些展示内容。您可以从 W3Schools或通过网页搜索找到“免费网页模板”，希望您需要的那些都是免费的！下载模板后，您可以替换内容并继续修改CSS以满足您的需求。
CSS 框架是 CSS 规则的集合。它为您创造华丽的网页提供了一个很好的起点。有很多流行的 CSS 框架可以使您更便捷地创建一个精美的网站—Twitter Bootstrap，ZURB Foundation, Pure CSS，Topcoat 以及很多。 您可以在可汗学院查看 Twitter Bootstrap 和 ZURB foundation 的例子。
一旦您下载了 CSS 框架以后，您就可以浏览 CSS 文档来查找示例——它们经常也包含模板！——并且找出哪个 CSS 类名称里包含了您所希望的外观。
当您使用模板或框架时，您将面临和其他网站看起来完全相同的风险，从而无法获得用户的重视。若要避免这种情况，请添加您自己的标志，并更改一些关键元素比如字体或者背景色。