關於複製/生成很多div css

對於一個項目，我需要儘可能高效使用約20x20px的小方塊製作世界地圖。關於複製/生成很多div css

但是，因爲我需要在div尺寸與我目前使用的div用1％的寬度和高度的2％，其中一個16:10的屏幕上看起來近似正方形的瀏覽器擴展。

我也充滿了很多小的div像一個名爲「世界」的div：

<div id="world1" onclick="">&nbsp;</div>

這些的div與CSS配對如下：

#world1 { 
    background: url(/images/1.png) 0 0 no-repeat; 
    float: left; 
    width: 1%; 
    height: 2%; 
    position: absolute; 
    top: 79%; 
    left: 91%; 
    z-index: -1; 
    margin-top: -10px; 
    margin-left: -10px; 
} 

#world1:hover { 
    background-position: 0 -20px; 
    cursor: pointer; 
}

我盤算了一下，最簡單的製作地圖的方法是生成div和相應css的代碼，以便名稱爲「world1」到「world20000」的div位於範圍從

top:1%; 
left: 1%;

到

top:100%; 
left: 100%;

，然後我就用手去通過和刪除的div覆蓋的海洋在我的地圖創建一個世界地圖。

如何生成所有這些代碼，或者更好還有更簡單的方法來執行此操作，因爲我的解決方案當然不夠優雅或高效。

也沒有任何人有保持在所有瀏覽器尺寸div的廣場，只是比例的平方與瀏覽器窗口，更優雅的解決方案嗎？

來源

2011-07-21 user852974

如果你想爲什麼要使用的1％和2％，而不是20像素的20像素和尺寸有20像素X 20像素的正方形？ –

，因爲我需要divs在1920x1680瀏覽器中大約爲20x20，但可以通過瀏覽器窗口進行擴展。這就是我需要做的：http://www.webdesign.org/img_articles/3244/5.gif – user852974

Perl中的幾行會爲你做的骯髒的工作。

我想通，爲了使地圖的最簡單的方法是產生的div代碼和相應的CSS使之與名稱「world1」通過對「world20000」的div被放置在位置上，從.. 。

它會更容易，如果你不把它放在absolute位置，但使用float:left，添加要填充整個行，後來用clear:left跳轉到另一行的許多廣場。 Perl中不超過20行。

來源

2011-07-21 07:41:18

好，我會做浮動：左，但我不知道perl的，你能幫助我的代碼？ – user852974

當然，我可以幫助你：我可以回答你所有的問題:)但我不會爲你寫。另外，如果你想處理所有那些8.000瓦片，你將需要學習和使用一些腳本語言 –

謝謝，但我甚至不知道從哪裏開始用perl。你能把我的一些教程鏈接到如何做這種類型的事情嗎？謝謝 – user852974

關於複製/生成很多div css

回答

相關問題