XHTML：橫幅（嵌入式div）

Question

我要執行以下操作：

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

Answer 1

首先，在我做任何解釋之前，我想您可以使用一些視覺效果來了解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

...隨着時間的流逝，但是不支持對CSS background-image屬性進行此修改的IE8和其他較舊的瀏覽器將慢慢消失，因此它只會成為越來越可行的選擇。

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，您將擁有更多的功能來快速在整個站點中實施更改，並且您將能夠更快地實施更改並繼續進行更重要的事情。