-3

私は簡単な Web サイトを開発する必要があり、Web 開発はあまり得意ではありませんが、試してみたところ、結果は次のようになりました: http://www.pes.herobo.com。

ご覧のとおり、ページはあまり良くありません。サイズを変更しようとすると、結果はひどいものになります。また、スマートフォンやタブレットなどのモバイルデバイスからアクセスできるウェブサイトが必要です。

これらの問題の原因 CSS フレームワークを使用することにしました。非常に興味深いブートストラップを見つけたので (よく理解していれば、Twitter によって開発されているはずです)、それとそのシステムを使用して、ほぼすべての Web サイトを書き直しました。その結果、ウェブサイトが正しい方法でサイズ変更され、携帯電話で見ると見た目が完璧になりました.

しかし、画像を正しい方法でどのように使用すればよいか、まだ疑問に思っています.Webページ内のすべての要素としてサイズを変更したいので、この解決策を採用しました.それが正しいかどうか知りたい.

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 に答える