新来的，我正在创建一个网站，我制作的用于保存图像的表格和用于保存内容的表格似乎存在问题。左侧图片右侧的内容。当我将图像表向右浮动时，内容表将完全移动到其下方。当我向左浮动时，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代码
div{
文本对齐：左；
位置：相对；
字体大小：2.5em；
字体粗细：粗体；
}
div1{
文本对齐：左；
位置：相对；
字体大小：1.5em；
文字阴影：2px 2px 黑色；
字体系列：格鲁吉亚，时代，衬线；
文本阴影：-1px -1px 黑色，1px 1px；
}
h1{
文本对齐：左；
字体系列：Arial、Helvetica、sans-serif；
文字阴影：0.1em 0.1em 0.2em 黑色；
字体大小：2.0em；
字体样式：斜体；
浮动：内联；
边框：3px纯黑色；
宽度：800px；
高度：196px；
填充：0;
}
h2{
文本对齐：左；
位置：相对；
字体大小：1.5em；
字体系列：Verdana、Helvetica、sans-serif；
文本阴影：-1px -1px 黑色，1px 1px；
}
p{
位置：相对；
文本对齐：左；
字体大小：1em；
字体系列：格鲁吉亚，时代，衬线；
文本阴影：-1px -1px 黑色，1px 1px；
}
李
{
位置：相对；
字体大小：1em；
}
一种{
填充：0;
向左飘浮;
}
乙{
边框：3px纯黑色；
宽度：180px；
高度：10.5em；
填充：10px；
向左飘浮;
}
b1{
边框：3px纯黑色；
位置：绝对；
宽度：40px；
高度：23em；
填充：10px；
浮动：右；
位置：相对；
}
b2{
边框：3px纯黑色；
位置：绝对；
宽度：40px；
高度：23em；
填充：10px；
位置：相对；
}
身体{
背景图像：网址（'背景.jpg'）；
背景尺寸：100%；
边距：20px；
宽度：800px；
填充：30px；
位置：相对；
}
.centerImage
{
文字对齐：居中；
边距顶部：0px;
边距底部：0px;
}
桌子{
显示：内联块；
宽度：640px；
左边距：自动；
右边距：自动；
边框样式：实心；
边框宽度：5px；
文字对齐：居中；
高度：400px；
填充：0;
}
表2{
显示：内联块；
宽度：625px；
左边距：自动；
右边距：自动；
边框样式：实心；
边框宽度：5px；
文字对齐：居中；
高度：50px；
}
td{
文字阴影：0.1em 0.1em 0.2em 黑色；
font-family:"Times New Roman", Times, serif;
}
表3{
浮动：右；
宽度：150px；
边框样式：实心；
边框宽度：5px；
文本对齐：右；
高度：490px；
填充：0;
}
p2{
边框：10px纯黑色；
浮动：权利；
}
选择{
宽度：200px
}
＃裹{
宽度：900px；
边距：0 自动；
}
图片链接。看，我相信你明白它应该是什么样子。另外，白色背景应该有一个淡紫色的图像，我将其作为背景放入正文中。
我认为主要的两个问题是：
您将主体的宽度设置为 800 像素，将第一个表格设置为 640 像素，并将该表格 3 设置为 150 像素。但是两者的边框都是 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。
另外，请考虑不设置主体的宽度。你可能不需要那个。
小智 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>| 归档时间： |
|
| 查看次数： |
2061 次 |
| 最近记录： |