网页设计学习笔记

摘要： 网格化布局（Grid Layout）是一种页面设计方式，它将整个页面分成同等大小的若干小格，然后让各部分内容分别占用若干个小格。这样设计出来的页面，整齐有序，容易阅读。实际上，网格化布局早就在其它地方使用，最典型的例子是报纸的页面设计。虽然一张报纸的内容很多，但是拿起来看却不觉得乱，就要归功于这种布局方式。在网格化布局中，最常见的是 960px 宽度的布局，这是因为对于现在的大部分电脑，屏幕分辨率宽度已经至少有 1024 了；而且 960 是一个有很多因子的自然数。选定了宽度后，我们可以将这个宽度分为若干列，常见的分法是分为 12 栏，这同样是因为 12 是有多个因子的数，所以容易安排内容。现 阅读全文

摘要： 自适应网页设计（Responsive Web Design）是一种网页设计方式，主要目标在于使得网页在不同分辨率的多种设备都能都良好呈现。自适应网页设计的关键在于使用 media query，针对不同宽度的屏幕使用不同的样式。例如，一般我们的网页有顶栏，侧栏，内容栏，和底栏。我们可以设定对于屏幕宽度大于等于 768 的设备，正常显示。对于屏幕宽度小于 768 的设备，将侧栏放在内容栏下面。如果屏幕宽度还小于 480，我们可以将顶栏的横向列表折叠成下拉菜单。IE6 - IE8 不支持 media query，它们将忽略 html 文件中包含 media query的 <link> 标 阅读全文