Question

好的，所以我从Photoshop创建了一个导航栏，我将这些部分切成薄片。然后保存为web图像和HTML ..

所以它加载到Dreamweaver上但是当我启动网页时，我必须向右滚动才能看到整个导航栏。我不希望这种情况发生。我想让它只占宽度的100％，不再多了。这是我到目前为止的代码：

    <link href="Stylsheet.css" rel="stylesheet" type="text/css">
<link href="csss.css" rel="stylesheet" type="text/css">
<html>
<head>
<title>Sketch</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sketch.psd) -->

<table id="Table_01" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3">
            <a href="www.google.com"><img src="images/Sketch_01.gif" width="261" height="2000" alt=""></a></td>
        <td>
            <img src="images/Sketch_02.gif" width="1" height="91" alt=""></td>
        <td rowspan="3">
            <img src="images/Sketch_03.gif" width="250" height="2000" alt=""></td>
        <td rowspan="2">
            <img src="images/Sketch_04.gif" width="1" height="92" alt=""></td>
        <td rowspan="3">
            <img src="images/Sketch_05.gif" width="250" height="2000" alt=""></td>
        <td rowspan="2">
            <img src="images/Sketch_06.gif" width="1" height="92" alt=""></td>
        <td rowspan="3">
            <img src="images/Sketch_07.gif" width="1023" height="2000" alt=""></td>
        <td rowspan="2">
            <img src="images/Sketch_08.png" width="1" height="92" alt=""></td>
        <td rowspan="3">
            <img src="images/Sketch_09.gif" width="132" height="2000" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="91" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/Sketch_10.gif" width="1" height="1909" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/Sketch_11.gif" width="1" height="1908" alt=""></td>
        <td>
            <img src="images/Sketch_12.gif" width="1" height="1908" alt=""></td>
        <td>
            <img src="images/Sketch_13.gif" width="1" height="1908" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1908" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Answer 1

你应该真正考虑使用CSS，因为它更适合图像格式化和布局。

在下面的示例中，您可以使用CSS设置background-image以及left和top参数，以将切片div移动相对于左上角的一些像素数。标题div。

可以轻松修改以满足您的需求，例如将height和width从#header > div（意为#header的div子节点）移动到每个切片div。

此外，在此示例中，标题在输出中水平居中，您也可以轻松地将输出定位到所需的位置。

这比使用表格更容易维护。

＆＃13;

/* CSS FILE */
/* Header Centered in window */

#header {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 100px;
  width: 500px;
}
/* Make all header sections the same  */

#header > div {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.section1 {
  background-color: #F00;
  /* <- color for example */
  /* background-image:url(images/Slices_01.png); */ /* <- Use an image */
}
.section2 {
  left: 100px;
  background-color: #0F0;
}
.section3 {
  left: 200px;
  background-color: #00F;
}
.section4 {
  left: 300px;
  background-color: #F0F;
}
.section5 {
  left: 400px;
  background-color: #FF0;
}

＆＃13;

<html>

<head>
  <title>Header Test</title>
  <link href="app.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="header">
    <div class="section1"></div>
    <div class="section2"></div>
    <div class="section3"></div>
    <div class="section4"></div>
    <div class="section5"></div>
  </div>
</body>

</html>

＆＃13;

如何使Photoshop的导航栏响应？

1 个答案: