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

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

WBOY
Freigeben: 2016-06-24 11:53:05
Original
1476 Leute haben es durchsucht

如下图:


带红框的图片是在同一个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>
Nach dem Login kopieren


这个是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;}
Nach dem Login kopieren


回复讨论(解决方案)

你的这个InitialeCode.css文件中,有定义img的大小啊,如果你更改的话,是怎么改的?

img {display: block;height: 26px;width: 177px;}
Nach dem Login kopieren


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

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

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

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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage