网页排版研究：The Design Canopy

网页设计工作室 The Design Canopy（2012年10月更新：Design Canopy 链接已失效）是一个设计精美的网站，使用了各种漂亮的网页排版技巧。以下是一些我个人认为特别棒的网站不同区域的屏幕截图。

我想重点关注的技术来自第一张图片。我非常喜欢这种小副标题/大标题的样式。最佳的工作方式是**首先**考虑您在语义上要描述的内容，然后相应地编写 XHTML 代码。这些需要是可点击的，因此本质上我们有一系列链接。我们也知道副标题与标题不同，因此我们需要某种钩子。

<a href="#"><span>Section One</span>Semantics</a>
<a href="#"><span>Section Two</span>Semantics</a>
<a href="#"><span>Section Three</span>Semantics</a>
<a href="#"><span>Section Four</span>Semantics</a>

让我们将锚链接设置为块级元素，以便我们可以定义宽度和填充，获得一个不错的可点击区域，并且能够设置具有某些影响的悬停背景颜色。如果我们也将其中的 span 设置为块级元素，则可以避免使用 <br /> 标签。通常情况下这是不允许的，因为将块级元素放在内联元素（锚点的默认值）内部是错误的代码。但是，由于我们已经将锚点设置为块级元素，所以一切正常。

让我们以 em 为单位设置宽度，以便它可以根据需要扩展而不会换行，然后设置排版。以下是我们在 CSS 中最终获得的结果

a {
   text-transform: uppercase;
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: -1px;
   color: red;
   display: block;
   padding: 0.5em;
   float: left;
   width: 8em;
   text-decoration: none;
   line-height: 0.5em;
}
a span {
   color: #666;
   display: block;
   font-size: 50%;
   letter-spacing: 0;
   margin-bottom: 0.3em;
}
a:hover {
   background-color: #fffea4;
}

查看下面的链接以查看其运行效果。

查看演示