3

我正在谈论的标题

我最近从一个潜在客户那里收到了这个设计，虽然我们不同意一起工作，但我打算尝试为一些实践编写设计代码。这不是我的设计（我也没有声称它是），我也不打算将它用于任何事情，纯粹是为了练习。这也是我屏蔽公司名称的原因。

无论如何，当谈到这个标题/导航区域时，我很困惑。标志侧面的装饰，以及基本上跨越两个 div 的标志，真的让我大吃一惊。我想知道你们中的任何人将如何进行编码。

我在想每个侧面装饰只需要一个 div，然后徽标必须绝对定位。这是一个正确的解决方案吗？

我什至首先尝试将其合并到 960grid 系统中，但由于徽标跨越问题使网格变得非常困难，因此无济于事。

4

3 回答 3

3

我会使用一个列表并在第三个项目上添加一个类，以给它足够大的margin-right空间来为h1徽标创建空间。这样你的标记是好的和语义的，你不必使用多个div's 和列表。

您也可以使用nth-childCSS 选择器而不是添加类。

于 2012-08-13T02:31:25.283 回答
2

你有没有看到如果客户购买了字体，你总是可以对字体进行字体处理，这会让你更容易。

除此之外，我会删除链接和文本之间的点并使用图像作为背景，然后只需创建一个 UL，为每个 li 为页面提供一个类，即主页、关于、画廊，然后使用一些 PHP 来添加 current_page 类.

然后在画廊创建另一个 li 之后，使用以下标记：

<li class="logo"><a href="/">Logo</a></li>

像这样添加样式。

li.logo {
    background: transparent url(....) no-repeat;
    width: width of logo;
    height: height of logo;
    display: block;
    overflow: hidden;
}

li.logo a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

如果您希望我为您做这件事，或者向您展示示例，我将很乐意。

于 2012-08-13T02:33:31.280 回答
1

我会将设计分成两行，如下所示：

在此处输入图像描述

“设计”位可以位于第一排中心徽标图像的任一侧。这使您可以链接徽标，但不能链接设计。第二行被分割为导航元素和徽标。我会将它全部放在一个 div 中，该 div 具有设定的宽度和高度，这是所有各种图像的确切尺寸。把事情简单化。您可以将行放入单独的 div 中，但我认为没有它您会没事的。

对于超低预算的实施，请按原样使用图像并对其应用图像映射以添加您需要的链接。你会失去像翻转图像这样的选项，但这就​​是它的低预算。

由于这是一个学习练习，请尝试使用几种不同的方式对其进行编码。浮动所有元素，绝对定位它们，制作列，制作行，使用大背景图像并将导航定位在它上面，以及您能想到的任何其他东西 - 但没有表格！:)

于 2012-08-13T02:59:26.300 回答