ホームページ > 記事 > ウェブフロントエンド > ウェブページのhtmlで、画像の幅と高さを設定すると、他の部分も一緒に変更されるのはなぜですか? _html/css_WEB-ITnose
ウェブページのhtmlで、画像の幅と高さを設定すると、他の部分も一緒に変更されるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:53:051415ブラウズ
以下に示すように:
赤枠の写真は同じ div にあります。マウスを使用して 1 つの写真のサイズを調整すると、他の 2 つの写真もそれに応じて変更されます。何が起こっているのでしょうか。アドバイスを求められました。
コードは次のとおりです (圧縮ファイルにパッケージ化されています):
http://download.csdn.net/download/pengwei0417/8174545
ダウンロードしたくない場合は、ここにコードを貼り付けます:
これは HTML ドキュメントです:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server"> <title>京东商城</title> <link rel="Stylesheet" href="./InitialeCode.css" /> <link rel="Stylesheet" href="./index.css" /></head><body> <!--主体，包括所有,大的结构是上中下--> <div id="content"> <!--最顶部--> <div id="head"> <!--最上面的搜索、图标等--> <div id="head1"><img src="./Image/logo.gif" alt="" width="242" height="44" style="float: left; position: absolute; top: 28px; margin-left: 10px; left: 42px;" /><img style="float: left; position: absolute; top: 42px; left: 435px;" src="./Image/serchss.gif" alt="" /> <form style="height: 30px; width: 396px; position: absolute; top: 38px; left: 310px;" action=""> <input style="border-style: none; border-color: inherit; border-width: medium; width: 100%; height: 28px; color: #ccc; line-height: 28px; background-color: transparent; font-size: 13px;" type="text" name="searchtxt" value="请输入商品名称" /> <input style="height: 27; width: 72px; position: absolute; top: 3px; left: 320px; background-color: transparent; border-style: none;" type="submit" value="" name="btsearch" /> </form> <img src="./Image/cartinfo.gif" alt="" height="40" style="float: right; position: relative; top: 35%;" /> <a id="bq1" href="#">物车中 0</a> </div> <!--导航栏--> <div id="head2"> <ul id="nav"> <li id="firsta" style="margin-left: 10px;"><a href="#">首页</a></li> <li><a href="#">时尚化妆品</a></li> <li><a href="#">时尚手表</a></li> <li><a href="#">精美包包</a></li> <li><a href="#">团购商品</a></li> <li><a href="#">优惠活动</a></li> <li><a href="#">EC免费模版</a></li> <li><a href="#">EC商业模版</a></li> </ul> </div> </div> <!--中间部分--> <div id="main"> <div id="leftmain"> <div id="leftmain1"> <h1> <a href="#">所有分类</a></h1> <dl style="height: auto; width: auto;"> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> <dt style="height: auto; width: auto;"><a href="#">精美包包</a></dt> <dd> <a href="#">双肩包</a> <a href="#">手提包</a> <a href="#">女包</a> <a href="#">男包</a></dd> </dl> </div> <div id="leftmain2"> <h1> <a href="#">销售排行</a></h1> <ul> <li><a href="#"><span class="leftmain2span1">1. </span>芙丽芳丝时尚沐... <span class="leftmain2span2">￥50元</span></a></li> <li><a href="#"><span class="leftmain2span1">2. </span>限量版休闲帆布... <span class="leftmain2span2">￥100元</span> </a></li> <li><a href="#"><span class="leftmain2span1">3. </span>天梭... <span class="leftmain2span2">￥600元</span> </a></li> <li><a href="#"><span class="leftmain2span1">4. </span>雅诗兰黛15色... <span class="leftmain2span2">￥20元</span> </a></li> <li><a href="#"><span class="leftmain2span1">5. </span>SUKI 蓝莓... <span class="leftmain2span2">￥40元</span> </a></li> <li><a href="#"><span class="leftmain2span1">6. </span>限量版休闲帆布... <span class="leftmain2span2">￥100元</span> </a></li> </ul> </div> <div id="leftmain3"> <h1><span style="color:White;font-weight:bold;">品牌专卖</span> <a style="font-size:12px;position:absolute;right:10px;top:0px;" href="#">全部品牌</a></h1> <a href="#"><img src= alt="" /></a> </div> <div id="leftmain4"> </div> <div id="leftmain5"> </div> <div id="leftmain6"> </div> </div> <div id="rightmain"> <div id="rightmain1"> </div> <div id="rightmain2"> </div> <div id="rightmain3"> </div> <div id="rightmain4"> </div> <div id="rightmain5"> </div> <div id="rightmain6"> </div> </div> <div class="clr"> </div> </div> <!--下部--> <div id="bottom"> <div id="bottom1"> </div> <div id="bottom2"> </div> <div id="bottom3"> </div> <div id="bottom4"> </div> </div> </div></body></html>
これは CSS ドキュメントです:
body{ margin: 0; height: auto; width: auto;}#content{ background-color: Aqua; height: auto; width: 990px; margin: 0 auto; font-size: 12px;}#head{ height: auto; width: auto; background-color: white;}#head #head1{ height: 110px; width: 100%; background-color: white; position: relative; top: 0px; left: 0px;}#head1 a{ font-size: 14px; position: absolute; top: 46px; left: 900px; color: #666;}#head1 a:hover{ color: Red;}#head #head2{ height: 45px; width: auto; background-image: url(./Image/Nalist1.gif); background-repeat: no-repeat;}#head #head2 ul{ width: auto; width: auto;}#head #head2 li{ width: 120px; height: 33px; line-height: 33px; float: left;}#nav #firsta{ background-image: url(./Image/Nalist_hover.gif);}#head #head2 a{ color: White; font-size: 20px; font-family: "黑体" ,Sans-Serif; display: block; width: 120px; text-align: center;}#head #head2 a:hover{ background-image: url(./Image/Nalist_hover.gif);}#main{ height: auto; width: 990px; background-color: Red;}#main #leftmain{ height: auto; width: 200px; background-color: Teal; float: left; }#main #leftmain div{ width: 100%; border:1px solid #ECECEC; border-top-style:none;}#main #leftmain h1{ background-image: url(./Image/category_tree_bg.gif); width: 200px; font-size: 16px; height: 27px; line-height: 27px;}
ディスカッション (解決策) への返信
InitialeCode.css ファイルでは、変更する場合の img のサイズが定義されます。それ、どうやって変えるの？
すごいです
上記のコードは InitialeCode.css ファイルにあります。これを変更すると、すべての画像が変更されます。
LZ は InitialeCode.css の line25 の img タグの属性を変更しましたか?
これは、指定されたタグで変更する必要があります:
b2a4c7ca89befb18aa120feca3628cf2
上の 2 人の話に戻りますが、私が変更した方法はマウスを使用してエッジをドラッグすることなので、初期化された CSS とは何の関係もありません。サイズを変更する画像の 1 つと、他の 2 つの画像のサイズもそれに応じて変更されます。
ダウンロードして試すことができます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。