问题：

删除两个表格之间的空格HTML CSS和图像删除背景图像

朱俊雅

2023-03-14

初来乍到，我正在创建一个网站，似乎有一个问题，我做了一个表，以保存一个图像和一个表，我做了一个内容。左边的内容右边的图像。当我向右浮动图像表时，内容表将完全移动到图像表下面。当我浮动它离开有太多的空间之间的2。所讨论的代码是表和表3。我希望它在链接按钮旁边显示图像块，在按钮下面但在图像块旁边显示上下文块。

第二个问题是我的logo标题，这是一个图像正在删除背景图像。

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代码


    div{
    text-align:left;
    position:relative;
    font-size:2.5em;
    font-weight:bold;
    }
    div1{
    text-align:left;
    position:relative;
    font-size:1.5em;
    text-shadow: 2px 2px black;
    font-family:Georgia, Times, serif;
    text-shadow: -1px -1px black, 1px 1px;

    }
    h1{
    text-align:left;
    font-family:Arial,Helvetica,sans-serif;
    text-shadow: 0.1em 0.1em 0.2em black;
    font-size:2.0em;
    font-style:italic;
    float:inline;
    border:3px solid black;
    width:800px;
    height:196px;
    padding:0;

    }

    h2{
    text-align:left;
    position:relative;
    font-size:1.5em;
    font-family:Verdana,Helvetica,sans-serif;
    text-shadow: -1px -1px black, 1px 1px;
    }

    p{
    position:relative;
    text-align:left;
    font-size:1em;
    font-family:Georgia, Times, serif;
    text-shadow: -1px -1px black, 1px 1px;
    }

    li
    {
    position:relative;
    font-size:1em;

    }
    a{
    padding:0;
    float:left;
    }

    b{
    border:3px solid black;
    width:180px;
    height:10.5em;
    padding:10px;
    float:left;
    }
    b1{
    border:3px solid black;
    position:absolute;
    width:40px;
    height:23em;
    padding:10px;
    float:right;
    position: relative;
    }
    b2{
    border:3px solid black;
    position:absolute;
    width:40px;
    height:23em;
    padding:10px;
    position: relative;
    }
    body{
    background-image:url('background.jpg');
    background-size: 100%;
    margin:20px;
    width:800px;
    padding:30px;
    position: relative;

    }

    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;

    }


    table{ 
    display:inline-block;
    width:640px;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width:5px;
    text-align:center;
    height:400px;
    padding:0;
    }
    table2{ 
    display:inline-block;
    width:625px;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width:5px;
    text-align:center;
    height:50px;

    }
    td{
    text-shadow: 0.1em 0.1em 0.2em black;
    font-family:"Times New Roman", Times, serif;
    }
    table3{ 

    float:right;
    width:150px;
    border-style:solid;
    border-width:5px;
    text-align:right;
    height:490px;
    padding:0;

    }

    p2{
    border:10px solid black;
    float:rights;

    }
    select{
    width:200px

    }

    #wrap{ 
        width: 900px; 
        margin: 0 auto; 
    }

图像链接。听着，我相信你知道它应该是什么样子的。另外，白色背景应该有一个淡紫色的图像，我放在身体作为背景。

共有4个答案

井誉

2023-03-14

热门标签

赵健柏

2023-03-14

相关问题

孔经武

2023-03-14

在本例中，我看到了您想要完成的工作，但您应该真正使用divs，这样会更容易。

但是你为什么不直接用下面这样的布局来构建（1）个表，并将它放置在你的内容中。而不是创建多个表。你仍然可以使用CSS来添加你的效果。

null

<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>

陈鸿才

2023-03-14

我认为两个主要问题是：

您使用的标记不存在，
设置大小时没有考虑边框的宽度

您将主体的宽度设置为800px，第一个表的宽度设置为640px，而那个表3的宽度设置为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。

还有，考虑不设置车身的宽度。你可能不需要那个。

类似资料：

使用CSS删除图像之间的空间

问题内容：鉴于：结果是两张图像之间只有一个空格。似乎正常的行为是将任意数量的空格，换行符和制表符显示为单个空格。我知道我可以执行以下操作：要么要么或任何其他数量的黑客。有没有办法用CSS删除空白？例如问题答案：使它们在您的CSS中。
如何删除两个hr标记之间的空格？

为什么两个标记之间有空格？当我设置标记的宽度时，它不起作用。我将其设置为，但两个标记之间仍有空格。如何从标记中删除空格？以下是HTML和CSS代码： null null
如何删除列表项之间的空格

问题内容：如何摆脱列表项之间的空白？我正在努力使图像彼此相邻。即使我将样式设置为，它们仍然分开。 CSS HTML 问题答案： 2014年9月1日更新在现代浏览器中，flex-box是执行此操作的首选方法。就像这样简单：在这里查看JSFiddle 。对于旧版浏览器的支持，请参考下面的其他选项，尽管稍微复杂一些，但它们仍然不错。尽管每个其他答案至少提供了一个好的解决方案，但似乎没有一个提供
删除图像标记之间的所有空白

我让用户提交一些文本（包括随机的html图像链接），然后我尝试从文本中的图像创建一个基本的BBCode[img][/img]标记。我目前的测试方式如下：字符串（取自随机论坛）：
如何删除表格中行和列之间的多余空间？

问题内容：如何删除表格中行和列之间的多余空间。我尝试过更改表格以及tr和td的边距，填充和各种边框属性。我希望所有图片都紧挨着看起来像一张大图片。我该如何解决？ CSS HTML 问题答案：将此CSS重置添加到您的CSS代码中：它将有效地重置CSS，摆脱填充和边距。
正则表达式删除符号之间的空格

我想删除前导

删除两个表格之间的空格HTML CSS和图像删除背景图像

共有4个答案

相关问答

相关文章

相关阅读

相关工具

相关文档