首頁 > web前端 > html教學 > 在网页html中,设置一个图片的宽高为什么其他的也一起变化?_html/css_WEB-ITnose

在网页html中,设置一个图片的宽高为什么其他的也一起变化?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:53:05
原創
1477 人瀏覽過

如下图:


带红框的图片是在同一个div中,的用鼠标调整一个图片的大小,其两个也会跟着变化,真是百思不得其解,倒底是怎么回事,请教了。

代码如下(打包成一个压缩文档了):
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"    style="max-width:90%" style="float: left; position: absolute; top: 28px; margin-left: 10px; left: 42px;" /><img   style="max-width:90%" 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=""    style="max-width:90%" 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的大小啊,如果你更改的话,是怎么改的?

img {display: block;height: 26px;width: 177px;}
登入後複製


上面的代码,是你的InitialeCode.css文件中的,你如果是更改这个,那么所有的img图片都会变化的。

LZ是不是将img这个标签 InitialeCode.css的line25这里面的属性改了?

这是会影响所有img标签的宽高. 你要在制定的标签中修改: 

在网页html中,设置一个图片的宽高为什么其他的也一起变化?_html/css_WEB-ITnose

回楼上两位,跟初始化的CSS没关系,因为我改的方式是用鼠标拖拽一个图片的边调整大小时,另外两个图大小也跟着变化。
可以下载试一下。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板