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>标签某处。