-1

我正在尝试启动我的第一个网站，并且我已经在 Photoshop 中创建了我的布局，但我不知道如何将我的图形元素放入适当的“div”中，以实现我想要完成的任务。

这是我想出的布局，

在此处输入图像描述

我想要做的是，首先是标题，我希望彩色线条（线程）在徽标保持居中的同时扩展浏览器宽度的 100%。我尝试这样做，但将这些线程的整个宽度放在一个 .png 文件中（图像大小约为 100 像素 x 1200 像素），但这似乎有问题。

使用标题下方的“内容区域”图形，这是一种具有向内视角的盒子，我想保持盒子边缘的完整性，而高度会根据内容的多少不时波动. 我怎样才能正确执行此操作？我尝试用我的盒子作为背景图像制作一个容器 div，高度为 100%，但图像似乎没有缩放。

4

3 回答 3

3

好的，所以根据你的布局有多好，我假设你已经把所有东西都分成了层。如果你还没有，那就这样做吧。

接下来，请注意，我们现在通常使用重复模式。我们曾经使用按比例缩小的巨型图像，但这会占用大量数据，并且由于设计模式已经变得更加简单，我们只使用模式。

您的所有文本都可以轻松地在 CSS 中完成，因此我们将忽略它。

接下来，隐藏除您正在处理的一个元素之外的每一层，然后转到文件>保存为网络。确保选择允许透明度的文件格式。如果你想准确地复制你的设计，你可能会有很多元素：标志、珠子、大约 5 像素宽的字符串条、水平边框、垂直边框和另一个图像边界的每个角落。您也可以使用一张图像并在 CSS3 中旋转它们，但这并没有得到广泛的支持。

接下来，学习一些 HTML 和 CSS。说真的，不要咬得比你能咀嚼的多。

在您知道如何做到这一点之后，将您的网站分成多个 div：标题、导航和正文。

对于标题，将背景设置为小条并将背景重复设置为 x。

将徽标放在页眉内，并将边距设置为“0 auto”。这将使其居中。

同样，只需对文本使用 CSS。

最后，对于你的身体边界与透视......这个有点难。您可以创建 3 个 div 并使用顶部、侧面、主体而不是侧面 + 角。或者你可以坚持下去并创建 4 个 div：每个边一个，每个角一个。

但是，我会坚持使用 CSS 作为您的边框。应用我说的做有点困难，你必须移除照明才能很好地平铺。使用 CSS3，如果你想做挤压，你可以设置一些很酷的阴影。

请注意，您不必这样做，这就是我的做法。

于 2013-08-06T02:18:14.667 回答
1

我将与您一起逐步完成此操作。首先，您需要将 Photoshop 分成不同的图层。切出 Photoshop 文件的图层和部分时，尽量保持图像尽可能小。例如，您的彩色线条不必是 100 像素 x 1200 像素的图像。它可以是重复的 100 像素 x 10 像素图像。

您可以在标题中将徽标和线程/彩色线条组合在一起：

<header>
  <img src="logo.png" />
</header>

徽标将出现在<img>标签中，线程（您已将其缩减为重复的 100 像素 x 10 像素图像）将出现在标题的背景中。CSS 看起来像这样：

header {
  background: url('colored_line_threads.png') repeat-x center;
  text-align: center;
  width: 100%;
}

该background-repeat属性repeat-x确保彩色线条仅沿水平轴重复。该background-position属性center确保线条在<header>容器中垂直居中。

至于内容周围的斜面边框，您需要从您的 Photoshop 文件中剪下一些战略图像。我建议制作一个具有所有四个角的图像，一个具有顶部和底部水平边框的图像，以及一个具有左右垂直边框的图像。然后是这个问题的 HTML/CSS 组件。我确信有更好的方法来做到这一点，但我想出了一种方法，我们可以div在边界的每个部分都有一个。

<div class="content">
  <div class="border">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="corner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>Some text here...</p>
</div>

在这里，我创建了两个<div>容器，<div>里面有容器：一个用于四个角，一个用于四个边框。CSS 的边框看起来像这样：

.border div {
  position: absolute;
}

.border div:nth-child(2n) {
  background: url('border_horizontal.png');
  width: 100%; height: 50px;
}

.border div:nth-child(2n+1) {
  background: url('border_vertical.png');
    width: 50px; height: 100%;
}

.border div:nth-child(1) {
  top: 0px; left: -15px;
  background-position: 0px 0px;
}

.border div:nth-child(2) {
  top: -15px; left: 0px;
  background-position: 0px 0px;
}

.border div:nth-child(3) {
  top: 0px; right: -15px;
  background-position: 50px 0px;
}

.border div:nth-child(4) {
  bottom: -15px; left: 0px;
  background-position: 0px 50px;
}

边框容器中的每个都div代表内容容器的边框，我们使用重复的图像来显示边框。角落也一样，div每个角落一个：

.corner div {
  position: absolute;
  background-image: url('corners.png');
  width: 50px; height: 50px;
}

.corner div:nth-child(1) {
  top: -15px; left: -15px;
  background-position: 0px 0px;
}

.corner div:nth-child(2) {
  top: -15px; right: -15px;
  background-position: 50px 0px;
}

.corner div:nth-child(3) {
  bottom: -15px; left: -15px;
  background-position: 0px 50px;
}

.corner div:nth-child(4) {
  bottom: -15px; right: -15px;
  background-position: 50px 50px;
}

您可以在此 CodePen 上查看其余代码并玩转它：http: //codepen.io/phantomesse/pen/safcK。

这只是构建 HTML 和 CSS 的一种方式。有很多方法可以做到这一点（可能还有更好的方法），所以继续练习吧！

于 2013-08-06T04:47:57.300 回答
0

我想补充一下之前的答案，您可以使用线程创建一个模式。垂直裁剪线程上的布局。无论您的线程高度有多长，大约 10 像素。然后使用 CSS 重复该模式，如下所示：

body {
     background-image: url(images/pattern.png);
     background-repeat: repeat-x;
}

YouTube 上有很多关于这方面的视频，您可以从这里开始。PSD 到 HTML YouTube 视频

于 2013-08-06T02:47:10.760 回答