CSS框架問題

Question

我必須開發一個簡單的網站，我不是很擅長web開發，但我試過了，結果是這樣的：http://www.pes.herobo.com。

正如你所看到的頁面不是很好，如果你嘗試重新調整它的大小，結果是可怕的。另外，我需要通過智能手機和平板電腦等移動設備訪問該網站。

這些問題的原因我決定使用CSS框架。我發現非常有趣的bootstrap（如果我理解的很好，它將由Twitter開發），所以我用或它的系統或多或少地重寫了我的所有網站。網站以正確的方式調整的結果要好得多，如果你在手機上查看它，外觀就是完美的。

但我仍然想知道如何以正確的方式使用圖像，我希望它們能夠調整網頁中的所有元素，所以我採用了這種解決方案，並且我想知道它是否會是正確的。

的CSS類imagine是：

.imagine { 
    width:100%; 
    height:auto; 
} 

的代碼是：

<div class="row"> 
      <div class="span8" style="position:relative"> 
      <img src="img/image.jpg" class="imagine" style="z-index:0 id="img_oxf"> 
      <img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1"; id="img_under_constr"> 
      <img src="img/blue_strap.png" class="imagine" ">  
      </div> 
      <div class="span4"> 
      <div id="main_paragraph"> 
      </div> 
    </div> 

Answer 1

你的HTML是非常無效的。無效的HTML會導致不可預知的結果，並導致不同瀏覽器的呈現不一致。在嘗試解決其他問題之前，先從有效的HTML開始。

---

這是錯誤的...

<img src="img/image.jpg" class="imagine" style="z-index:0 id="img_oxf"> 

你缺少style收盤報價可以使瀏覽器認爲id="img_oxf應該是裏面style。它應該是...

<img src="img/image.jpg" class="imagine" style="z-index:0;" id="img_oxf"> 

---

這是不對的......

<img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1"; id="img_under_constr"> 

你有HTML之間用分號屬性。它應該是...

<img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1;" id="img_under_constr"> 

---

這是不對的......

<img src="img/blue_strap.png" class="imagine" "> 

你有一個額外的報價"這可能會導致瀏覽器認爲你的類被稱爲imagine"代替imagine。它應該是...

<img src="img/blue_strap.png" class="imagine"> 

---

而且你似乎缺少一個右</div>標籤某處。