网页设计分割线代码_网页设计中的黄金分割

最新推荐文章于 2024-08-12 14:52:49 发布

daique1908

最新推荐文章于 2024-08-12 14:52:49 发布

阅读量2.8k

点赞数

文章标签： css python html java html5

本文探讨了网页设计的基本元素，如容器、头部、徽标、导航等，并详细介绍了黄金分割率在网页布局中的应用，以及如何通过黄金比例创建网格系统。通过实例展示了如何使用黄金比例确定主要内容和侧边栏的宽度，强调了空白区域在良好设计中的重要性。

摘要由CSDN通过智能技术生成

网页设计分割线代码

数学是美丽的。这听起来有点奇怪吗？刚开始设计时，我肯定是这么认为的。我这么想，数学是如此刻板，常常无聊。您会惊讶地发现，大多数美学上令人愉悦的设计，艺术品，物体甚至人与人之间都有数学上的共同点。特别是黄金比例，也称为神圣比例，由希腊字母Φ（ phi ）表示。本教程将涵盖网站的解剖结构和布局以及黄金比例的关系。

1.网页剖析

网页的元素就像器官。它们对于正常运行和美观的网页至关重要。

这些是网页的主要元素。有许多不同的方式来组织它们，但这也许是在线使用的最常见的基本布局。

2.容器

所有网页都使用一个容器并且出于相同的目的；包含页面元素，但是完成方式有所不同。例如，最常使用body标签或div。过去，甚至使用过一个表（不要将表用作页面容器，这是一个已弃用的方法）。可以将容器想像成房子的外墙，然后在其中放置卧室，厨房，客厅等。

容器类型：

液体：展开以填充浏览器窗口的宽度。
固定：您选择的特定宽度不会改变，无论浏览器窗口大小如何。

3.标头

标头并不是真正的特定元素，尽管有些人可能认为确实如此。它通常用于指代徽标，导航，标语等所在的网页顶部。许多人更喜欢将这些元素包含在div中，以简化页面样式，元素分离和/或元素包含。标头将被视为容器，因此它将有两种类型可供选择：液体或固定式（如上所述）。

4.徽标

您的徽标是您的身份和品牌。徽标最常见的位置是标题内，并向左对齐。我们从左到右，从上到下阅读，因此您的徽标很可能是访问者关注的第一要素。

5.导航

页面导航是最重要的元素之一；您的访客需要它才能使用您的网站。它应该易于查找和使用，这就是为什么它几乎总是位于标题内或至少靠近页面顶部的原因。有时，两种类型的导航都用于高内容网站。

导航类型：

水平：一系列内联显示的链接，通常称为“导航”。
垂直：显示为垂直堆栈的一系列链接，通常称为“菜单”。

6.主要内容

众所周知（或应该），内容为王！当人们访问您的网站时，这就是他们主要要寻找的元素。它应该是网页的主要焦点，以便访问者快速找到所需的内容。

7.侧边栏

边栏是具有辅助内容的元素，例如广告，网站搜索，订阅链接（RSS，Twitter，电子邮件等），联系方式等。尽管许多网站都使用此元素，但该元素不是必需的。只要不影响主要内容的观看，它通常是右对齐的，但是也可以左对齐或两个（两个侧边栏）对齐。对于使用水平和垂直导航的网站，通常将边栏替换为垂直导航元素。

8.页脚

网页末尾应始终使用页脚，以使访问者知道他们已经完成了网页的制作。像页眉一样，页脚并不是真正的特定元素，而是包含部分。在您的页脚中将主要包含版权，法律和联系信息。最好包含一些指向网站最重要部分的链接，例如页面顶部，主页，联系页面等。某些网站使用此区域作为机会来提及相关材料或其他重要信息。

9. “空白”

这是网页上任何未被印刷术或其他内容覆盖的区域。您可能会强烈希望填充尽可能多的空白空间，但不要这样做！对于良好的网页设计而言，空白与要使用的内容一样重要。您可以看到NetTuts站点如何非常有效地利用空白空间来帮助引导访问者浏览内容，建立页面平衡并提供良好的内容分离感。

这样就涵盖了网页的结构。现在，让我们看一下黄金分割率与这些元素的关系。

10.黄金分割率和使用网格

还记得我刚才说数学很漂亮的时候吗？我们根据比率（即黄金比率）感知视觉吸引力。几千年来，艺术家，设计师，建筑师等在他们的作品中有意或无意地使用了一种令人愉悦的通用比例。什么是幻数？ 1.62（实际上是1.618 ...）我不会涉及这个数字的起源，但是我会告诉您如何使用它。

使用黄金分割率非常简单。假设您要查找“主要内容”和“侧边栏”列的宽度。您将获得内容区域的总宽度（在此示例中，我们将使用900px），然后将其除以1.62。如上例所示，我们将900px除以1.62，得到555.55px。我们不需要很精确，因此我们会将其四舍五入为555px。现在，您知道您的主要内容元素将为555px宽，侧边栏将为345px！那有多容易？

可是等等！乐趣不止于此。您还可以将黄金比例应用于相对于其高度的其他元素的宽度，反之亦然。这产生了具有黄金比例比例的美观元素。

11.使用网格

如果您像大多数人一样，则不想每次使用此比率时都拿出计算器。为了简化过程，我们可以使用一个简单的网格。您要做的就是将宽度和/或高度除以三分之二。

每个分区甚至可以进一步减少三分之二，从而生成更详细的网格。如果您阅读上一篇文章“ 密切关注Blueprint CSS框架 ”，您将看到Blueprint CSS框架使用了详细的网格系统。网格不仅使设计更容易，更快捷，而且还创造了美观的布局！如果在设计时尚未使用网格，那么现在可能是一个尝试的好时机。您可以从http://960.gs下载用于烟花，photoshop等的网格模板，这是另一个使用网格的出色CSS框架。