Home >Web Front-end >HTML Tutorial >In web page html, when setting the width and height of an image, why do the others also change together? _html/css_WEB-ITnose
In web page html, when setting the width and height of an image, why do the others also change together? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:53:051483browse
As shown below:
The pictures with red frames are in the same div. If you use the mouse to adjust the size of one picture, the other two will also change accordingly. It is really puzzling. , what is going on, please tell me.
The code is as follows (packaged into a compressed file):
http://download.csdn.net/download/pengwei0417/8174545
If you don’t like downloading, I’ll paste the code. :
This is an html document:
<%@ 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>
This is a css document:
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;}
Reply to discussion (solution)
In your InitialeCode.css file, the size of img is defined. If you change it, how do you change it?
img {display: block;height: 26px;width: 177px;} The above code is in your InitialeCode.css file. If you change this, all img images will change.
Did LZ change the attributes in line25 of the img tag in InitialeCode.css?
This will affect the width and height of all img tags. You need to modify it in the specified tag. :
e6b154fae99971a43cee383d7da4e907
Go back to the two guys above, it has nothing to do with the initialized CSS, because I changed it The method is to use the mouse to drag the edge of one picture to resize, and the size of the other two pictures will also change accordingly.
You can download it and try it out.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn