5

新来的，我正在创建一个网站，我为保存图像而制作的表格和为保存内容而制作的表格似乎存在问题。左图右图内容。当我将图像表向右浮动时，内容表完全移动到它下面。当我将它向左浮动时，2之间的空间太大。有问题的代码是表和表3。我希望它显示链接按钮旁边的图像块和按钮下方但图像旁边的上下文块堵塞。

第二个问题是我的徽标标题是图像正在删除背景图像。

HTML 代码

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="Articlepage.CSS" rel="stylesheet" type="text/css">
    <title>BEADLES BEADING</title>
</head>
<body id="wrap">
    <h1><img src="logo.jpg" alt="logo"></h1>
    <a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
    <a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
    <a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
    <a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
    <a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
    <table3>AD SPACE(Image)</table3>
    <table>
        <tr>
            <td>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b><br>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <b>IMAGE/CONTENT</b>
                <br><br><br><br><br><br><br><br><br><br><br>
            </td>
        </tr>
    </table>
    <table2>
        <tr>
            <td>
                FOOTER
            </td>
        <tr>
    </table2>
</body>
</html>

CSS 代码

    分区{
    文本对齐：左；
    位置：相对；
    字体大小：2.5em；
    字体粗细：粗体；
    }
    div1{
    文本对齐：左；
    位置：相对；
    字体大小：1.5em；
    文字阴影：2px 2px 黑色；
    字体系列：Georgia、Times、serif；
    文字阴影：-1px -1px 黑色，1px 1px；

    }
    h1{
    文本对齐：左；
    字体系列：Arial、Helvetica、sans-serif；
    文字阴影：0.1em 0.1em 0.2em 黑色；
    字体大小：2.0em；
    字体样式：斜体；
    浮动：内联；
    边框：3px 纯黑色；
    宽度：800 像素；
    高度：196px；
    填充：0；

    }

    h2{
    文本对齐：左；
    位置：相对；
    字体大小：1.5em；
    字体系列：Verdana，Helvetica，无衬线；
    文字阴影：-1px -1px 黑色，1px 1px；
    }

    p{
    位置：相对；
    文本对齐：左；
    字体大小：1em；
    字体系列：Georgia、Times、serif；
    文字阴影：-1px -1px 黑色，1px 1px；
    }

    李
    {
    位置：相对；
    字体大小：1em；

    }
    一个{
    填充：0；
    向左飘浮;
    }

    乙{
    边框：3px 纯黑色；
    宽度：180px；
    高度：10.5em；
    填充：10px；
    向左飘浮;
    }
    b1{
    边框：3px 纯黑色；
    位置：绝对；
    宽度：40px；
    高度：23em；
    填充：10px；
    浮动：对；
    位置：相对；
    }
    b2{
    边框：3px 纯黑色；
    位置：绝对；
    宽度：40px；
    高度：23em；
    填充：10px；
    位置：相对；
    }
    身体{
    背景图像：url（'背景.jpg'）；
    背景尺寸：100%；
    边距：20px；
    宽度：800 像素；
    填充：30px；
    位置：相对；

    }

    .centeredImage
    {
    文本对齐：居中；
    边距顶部：0px；
    边距底部：0px；

    }


    桌子{
    显示：内联块；
    宽度：640 像素；
    左边距：自动；
    边距右：自动；
    边框样式：实心；
    边框宽度：5px；
    文本对齐：居中；
    高度：400px；
    填充：0；
    }
    表2{
    显示：内联块；
    宽度：625px；
    左边距：自动；
    边距右：自动；
    边框样式：实心；
    边框宽度：5px；
    文本对齐：居中；
    高度：50 像素；

    }
    td{
    文字阴影：0.1em 0.1em 0.2em 黑色；
    font-family:"Times New Roman", Times, serif;
    }
    表3{

    浮动：对；
    宽度：150px；
    边框样式：实心；
    边框宽度：5px；
    文本对齐：右；
    高度：490px；
    填充：0；

    }

    p2{
    边框：10px 纯黑色；
    浮动：权利；

    }
    选择{
    宽度：200px

    }

    ＃裹{
        宽度：900px；
        边距：0 自动；
    }

图片链接。看，我相信你会明白它应该是什么样子。另外，白色背景应该有一个淡紫色的图像，我放置在身体中作为背景。

4

3 回答 3

6

在这种情况下，我看到了您要完成的工作，但您应该真正使用 div，这样会更容易。

但是，您为什么不使用下面这样的布局构建 (1) 表并将其放置/定位在您的内容中。而不是创建多个表。您仍然可以使用 CSS 来添加效果。

<div id="apDiv3">
  <table width="100%" height="335" border="1">
    <tr>
      <td width="87%" height="207">CONTENT</td>
      <td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
    </tr>
    <tr>
      <td height="50">Footer</td>
    </tr>
  </table>
</div>

于 2015-04-08T17:38:43.133 回答
6

我认为主要的两个问题是：

  1. 您正在使用不存在的标签并且
  2. 设置尺寸时没有考虑边框的宽度

您将 body 的宽度设置为 800px，第一个 table 设置为 640px，table3 设置为 150px。但两者的边框都是 5px 宽。640 + 10（第一个表格的左右边界）+10（第二个表格的左右边界）+ 150 = 810。即使标签是正确的，它们也太宽而不能彼此相邻。

改变

<table3>Ad Space</table3>

和

<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>

至

<div id="adCol">Ad Space</div>

和

<div id="#imgDiv">
  <img />
  <img />
  <img /><br />
  <img />
  <img />
  <img />
</div>

在您的 CSS 中，将“b”更改为“#imgDiv img”，将“table”更改为“#imgDiv”，将“table3”更改为“#adCol”。然后要么减小边框的宽度，要么使其中一个的宽度至少小 10px。

不要忘记删除 table2 标记并更改您称为 b1 和 b2 的任何内容以使用真正的 HTML 标记并将 CSS 中的 b1 和 b2 更改为类名或 id。

另外，请考虑不设置主体的宽度。你可能不需要那个。

于 2015-02-24T18:47:27.563 回答
0

  1. 我们没有标签<table2>。你应该使用<table>.

  2. 如果你想让两个元素彼此靠近，你必须创建一个 div 并将显示设置为 flex 并将 2 个或更多元素放入其中。如果要带 2 个元素，则必须将元素的宽度设置为 50%。如果你想要更多，你必须将 100 除以元素的数量。例如，如果您希望 5 个元素彼此相邻，则必须将元素的宽度设置为 20%。

于 2021-02-11T21:16:27.810 回答