0

これは私のページのリンクのコードです

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savings Calculator Page</title>
<link href="master.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="spray foam insulation, foam insulation, insulation,   energy savings, energy cost reduction, savings, spray insulation" />
<script language="javascript" type="text/javascript" src="calculator.js"></script>


</head>
<body>

<div id="container">
<div id="calculator1"> </div>
<div id="calculator2"><a href="index.html"><img src="images/images/images/calculator_02.jpg" width="179" height="69" border="0" alt="Home button"/></a> </div>
<div id="calculator3"> <a href="services.html"><img src="images/images/images/calculator_03.jpg" width="125" height="69" border="0" alt="Services button"/></a></div>
<div id="calculator4"><a href="calculator.html"><img src="images/images/images/calculator_04.jpg" width="267" height="69" border="0" alt="Savings Calculator button"/></a> </div>
<div id="calculator5"><a href="aboutUs.html"><img src="images/images/images/calculator_05.jpg" width="178" height="69" border="0" alt="About Us button"/></a> </div>
<div id="calculator6"><a href="contactUs.html"><img src="images/images/images/calculator_06.jpg" width="211" height="69" border="0" alt="Contact Us button"/></a> </div>
<div id="calculator7"> </div>
<form id="calc" name="calc" method="post" action="" >  
<div id="calculator8"> </div>
<div id="calculator9"><input type="text" id="textbox1_id" class="box1" /> </div>
<div id="calculator10"> </div>
<div id="calculator11"> </div>
<div id="calculator12"> </div>
<div id="calculator13"><input type="text"  id="textbox2_id" class="box2" /> </div>
<div id="calculator14"> </div>
<div id="calculator15"> </div>
<div id="calculator16"> </div>
<div id="calculator17"><input type="button" class="button" value="" onclick="calculate()" /></div>
<div id="calculator18"> </div>
<div id="calculator19"> </div>
<div id="calculator20"> </div>
<div id="calculator21"><input type="text"    id="textbox3_id" class="box3"  readonly="readonly" value="" />   </div>
<div id="calculator22"> </div>
</form>
<div id="calculator23"> </div>
<div id="calculator24"> 
<div id="footer1"> </div>
<div id="footer2"> </div>
<div id="footer3"> <a href="http://validator.w3.org/check?uri=referer"><img
  src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" /></a> </div>
<div id="footer4"> </div>
<div id="footer5">    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid CSS!" border="0" style="border:0;width:88px;height:31px" />
</a> </div>
<div id="footer6"> </div>
<div id="footer7"> </div>  
</div>
</div>
</body>
</html>

私が本当にやりたいことは、CSS で画像をソースすることだけです。覚えておいてください!!!! 他のページへのリンクを維持する必要があります。これを行う他の方法がある場合、私は提案にオープンです...少しのJavaScript、いくつかのPHP、および私のDreamweaverが私が使用しているものです...これらのいずれかでこれを行うことができれば、本当に感謝しています.

4

1 に答える 1

0

ここにあなたができることがいくつかあります。最初に、イメージ タグのすべての高さ、幅、境界線の属性をドロップします。これらは css で行う必要があります。スタイル シートの要素をターゲットにするのではなく、画像にクラスを追加することをお勧めします。

画像の幅と高さが css で制御されるようになったため、ユーザーの画面に基づいて画像サイズを表示するようにメディア クエリを設定できます。

次に例を示します。

#container img{
    width: auto;
    height: 69px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    width: auto;
    height: 30px;
}

そこから取れるはずです。幸運を！

于 2013-04-13T08:40:15.360 に答える