身體內容的邊框CSS，HTML

我很努力爲HTML中的主體內容製作邊框。我用：身體內容的邊框CSS，HTML

-moz-border-image: url(/images/border.png) 20 repeat; 
-webkit-border-image: url(/images/border.png) 20 repeat; 
-o-border-image: url(/images/border.png) 20 repeat; 
border-image: url(/images/border.png) 20 repeat; 
behavior: url(/css/PIE.htc);

...但因爲它不是在資源管理器的工作和更老版本的一些其他瀏覽器，我已經決定來使它的老辦法。但是，我不知道該怎麼做。我們在我們的舊網頁中使用過這樣的表格：

<BODY leftmargin=0" topmargin=0" marginwidth=0" marginheight=0" class="content"> 
<TABLE align="center" width="880" cellpadding="0" cellspacing="0" border="0"> 
    <TR> 
     <TD><IMG src="/images/b-01-tl.jpg" alt="" width="20" height="20" border="0"><BR> 
     </TD> 
     <TD background="../images/b-01-mt.jpg" width="100%" valign="bottom"> 
     </TD> 
     <TD><IMG src="/images/b-01-tr.jpg" alt="" width="20" height="20" border="0"><BR> 
     </TD> 
    </TR> 
    <TR> 
     <TD background="../images/b-01-ml.jpg"><BR> 
     </TD> 
     <TD bgcolor="#000000" class="bg-w0">

..但現在我創建了帶有div和HTML5的頁面。任何人都可以提出如何實現圍繞內容的新邊界。我們有8張圖片的邊界 - 左上，右上，右上，右上，右下，下線，左下和左下。我知道可以用div來做，但是我沒有找到任何教程如何做到這一點。等待任何幫助:)如果你需要的邊框的照片，寫我，我會上傳

來源

2012-07-10 user1384668

您可以使用3個div：1用於包含頂部/左上/右上邊框的頂部; 1爲左/右邊界; 1爲底部/左下/右下;總共3張照片。中間的一個被動態拉伸到內容的高度。 – 2012-07-10 13:08:17

所以，你想這樣做的「老式的方式「呃，因爲邊框圖像由於缺乏支持而讓你失望？嗯，這裏是老式的方式，或多或少：

<body> 
<table cellspacing="0" cellpadding="0" border="0" width="100%"> 
    <tbody> 
     <tr valign="top"> 
      <td class="upper-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
      <td class="upper-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td> 
      <td class="upper-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
     </tr>  
     <tr valign="top"> 
      <td class="middle-left"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
      <td width="100%"> 
       <!-- content below --> 

       <!-- content above --> 
      </td> 
      <td class="middle-right"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
     </tr>   
     <tr valign="top"> 
      <td class="lower-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
      <td class="lower-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td> 
      <td class="lower-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
     </tr>   
    </tbody> 
</table> 
</body>

和CSS：

<style type="text/css"> 
body { padding: 0; margin: 0; } 
table tbody tr td { background-repeat: repeat; background-position: 0 0; } 

.upper-left {background-image: url(/images/b-01-tl.jpg);} 
.upper-center {background-image: url(/images/b-01-mt.jpg);} 
.upper-right {background-image: url(/images/b-01-tr.jpg);} 

.middle-left {background-image: url(/images/b-01-ml.jpg);} 
.middle-right {background-image: url(/images/b-01-ml.jpg);} 

.lower-left {background-image: url(/images/b-01-bl.jpg);} 
.lower-center {background-image: url(/images/b-01-mb.jpg);} 
.lower-right {background-image: url(/images/b-01-bl.jpg);} 
</style>

所以上表本身，我們希望我們的邊界圖像相互完全一致，這就是爲什麼我們需要cellspacing="0" cellpadding="0" border="0" - 你可能可以逃脫，確保填充爲0，邊界摺疊設置爲近日崩潰。這種桌子可以像您需要的那樣具有伸縮性 - 它可以變寬或像（在這個例子中）60個像素一樣窄。請記住，width屬性不會將「px」作爲值的一部分。因此，100％是100％，但60像素僅僅是60

在我們，我們每個<td>設置width="100%"，以確保這最後一列不小心弄太寬中間一列中，我們強制的東西留在右寬度 - 這就是爲什麼我們也爲單元格使用空白GIF，所以我們可以看到背景並獲得正確的大小。在某些情況下，我們可能會使用 進行此操作，但這些尺寸可能無法預測 - 如果您希望這些邊框僅爲2像素高，則會變得危險。一段時間以來，人們都在使用實際的Netscape <spacer>標籤，但這從來沒有效果很好。

的ALIGN =「左」 ALIGN =「右」都在那裏出於習慣，真的。如果不是在左側和右側<img>標籤中使用空白GIF，則可以使用實際圖像，那麼可以這樣做。

在這個例子中，我使用CSS，其中，好了，我不認爲在過去10年中，不會明白這一點做了一個瀏覽器的實際應用的背景，這是稍微容易維護。使用background屬性我從來不喜歡的人，在未來的一些瀏覽器將消除對它的支持打賭有一天（如果它們還沒有準備好）。這種解決方案以這種方式向後看，並向前看。我當天做了很多這種加價。

通常，當我們沒有這樣的邊界，我們還會包括一定程度相匹配的邊框背景顏色 - 我們應該這樣做，與bgcolor屬性，你可以穿上<tr>指定一次，或在整體上表，然後在需要的單元格中覆蓋。減少標記總是更好，否則你會在搜索和替換文檔時變得非常好。不幸的是，舊迪士尼樂園的例子並不適合我，但http://web.archive.org/web/19980709083315/http://namco.com/有很多使用表格和間隔GIF的，呃，啓發你。

來源

2012-07-10 13:14:46 artlung

I喜歡這樣的歷史課，想想看，我很驚訝我能記得曾經參與過HTML的表現屬性 - 當時我還不是一個青少年，瘋狂（不是故意讓你覺得自己很老.. 。誠實！） – BoltClock 2012-07-10 13:44:13

謝謝，我設法使它工作:) IE6中仍然有一些小故障，但我真的希望俄羅斯人即將更新他們的瀏覽器 – user1384668 2012-07-10 14:52:39

你的代碼是錯誤的，你缺少「」

-moz-border-image: url('/images/border.png') 20 repeat; 
-webkit-border-image: url('/images/border.png') 20 repeat; 
-o-border-image: url('/images/border.png') 20 repeat; 
border-image: url('/images/border.png') 20 repeat; 
behavior: url('/css/PIE.htc');

來源

2012-07-10 12:41:18

不，沒關係。引號是沒有必要的。 – BoltClock 2012-07-10 12:42:11

是的，仍然IE不支持邊框圖像。如何以舊的方式做到這一點？ :) – user1384668 2012-07-10 12:46:31

@BoltClock不錯''在CSS中是一個不好的做法？並且可以錯過「'仍然能夠工作？ – 2012-07-10 12:46:46

身體內容的邊框CSS，HTML

回答

相關問題