-3

我必须开发一个简单的网站，我不太擅长网络开发，但我尝试了，结果是这样的：http ://www.pes.herobo.com 。

如您所见，页面不是很好，如果您尝试重新调整它的大小，结果会很糟糕。此外，我需要可以从智能手机和平板电脑等移动设备访问该网站。

由于这些问题，我决定使用 CSS 框架。我发现了非常有趣的引导程序（如果我理解得很好，它将由 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>
4

1 回答 1

4

您的 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>某个地方缺少结束标签。

于 2012-04-14T22:07:04.517 回答