XHTML：横幅（嵌入 div）

发布于 2024-12-28 14:49:26 字数 680 浏览 1 评论 0原文

我想做以下事情：

------------------------------------------------
width: 100%;
height: 60px


                  image center


                               image bottom/right
-------------------------------------------------

我曾经用表格来做：

<table border="0">
<tr>
 <td width="25%"></td>
 <td width="50%"><center>image center</center></td>
 <td width="25%" valing bottom><div align="right">image bottom/right</div></td>
</tr>
</table>

但他们说使用表格进行格式化是不好的（不知道为什么）那么有什么想法如何制作以下横幅吗？我听说有 absolute 位置，所以也许 2 个图像可以嵌入到 2 个 div 中

原文

I want to do the following:

------------------------------------------------
width: 100%;
height: 60px


                  image center


                               image bottom/right
-------------------------------------------------

I used to do it with table:

<table border="0">
<tr>
 <td width="25%"></td>
 <td width="50%"><center>image center</center></td>
 <td width="25%" valing bottom><div align="right">image bottom/right</div></td>
</tr>
</table>

but they say using tables for formatting is bad (Dunno why)
So is there any idea how to do the following banner? I heard there is absolute position, so mightbe the 2 images could be embedded to 2 divs

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一直在等你来 2025-01-04 14:49:26

首先，在我进行任何解释之前，我认为您可以使用一些视觉效果来了解 CSS 的强大功能...

CSS Zen Garden 展示了如何使用不同的 CSS 样式表可以完全改变网站的整体外观（使用右侧）...

http://www.csszengarden.com/

我自己的网站支持多个主题，您可以选择可以立即更改，甚至无需重新加载页面...

http://www.jabcreations.com/blog/?prompt=themes-official

1.) 表格仅用于表格数据，如果您不确定从哪里开始，请考虑食品标签上的营养面板。表格非常适合表格数据，因为它消除了格式问题，但是您永远不应该将非表格内容放入表格中，因为它会破坏搜索引擎的内容上下文，您应该使用除法元素，因为非表格数据往往会除了以表格方式呈现之外，可以做任何事情。

2.) 使用 CSS 背景图像或 (X)HTML img（图像）元素的上下文取决于您想要执行的操作。

2.A.) CSS3 允许使用多个背景图像，但考虑到浏览器市场份额，浏览器支持尚未普及...

http://www.caniuse.com/#search=css3%20multiple%20backgrounds

...随着时间的推移，IE8 和其他旧版本浏览器不支持对CSS背景图像属性进行这种修改的那些将慢慢消失，因此它只会成为一个越来越可行的选择。

2.B.) 您可以将 img 元素和 CSS 背景图像组合在一起，以获得在单个元素内显示的两个图像。

2.C.) 您可以使用两个具有相同样式（或缺乏样式）的分割元素，然后为它们每个提供一个 CSS 背景图像。

这是一般相关的 CSS 代码...

background-image: url(kittens.png);

/* Choose one or the other below */
background-position: right bottom;
background-position: center center;

我会重申，表格数据的表格对于样式来说非常糟糕。一旦您开始掌握 CSS 的工作原理（级联意味着较低行上的规则会覆盖较早的行，因此第 10 行上的相同规则将覆盖第 9 行上的相同规则，如果它们是相同的规则）。

通过使用 CSS，您将拥有更多的能力在整个网站上快速实施更改，并且您将能够更快地实施更改并继续处理更重要的事情。

First off before I do any explaining I think you could use some visuals of just how powerful CSS can be...

CSS Zen Garden shows how using a different CSS style sheet can completely change the entire way a site looks (use theme links on the right side)...

http://www.csszengarden.com/

My own site supports multiple themes which you can instantly change without even reloading the page...

http://www.jabcreations.com/blog/?prompt=themes-official

1.) Tables are intended for tabular data only, think the nutrition panels on food labels if you're not sure where to start. Tables are great for tabular data because it removes the formatting issues however you should never put non-tabular content in to tables as it disrupts the context of the content to search engines and you should instead use division elements instead since non-tabular data tends to do anything except for be presented in a tabular fashion.

2.) The context of using either CSS background-images or (X)HTML img (image) elements comes down to what you're trying to do.

2.A.) CSS3 allows the use of multiple background-images however browser support isn't yet universal when considering browser market shares...

http://www.caniuse.com/#search=css3%20multiple%20backgrounds

...as time passes however IE8 and other older browsers that do not support this modification to the CSS background-image property will slowly disappear so it will only become an increasingly viable option.

2.B.) You can combine an img element and a CSS background-image together to get two images to display inside of a single element.

2.C.) You can use two division elements with the same styling (or lack thereof) and then give them each a CSS background-image.

Here is the generally relevant CSS code...

background-image: url(kittens.png);

/* Choose one or the other below */
background-position: right bottom;
background-position: center center;

I'll reiterate that tables for on-tabular data is exceptionally bad for styling. Once you begin to grasp how CSS works (cascading means rules on lower lines override earlier lines, so the same rule on line 10 will override the same rule on line 9, if they are the same rule).

By using CSS you're going to have so much more power to quickly implement changes across your entire site and you'll be able to implement changes quicker and move on to more important things.

回复收藏 0 原文

~没有更多了~