无法改变logo的大小

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>商城</title>
 <link rel="stylesheet" type="text/css" href="../css/shangcheng.css">
 <script type="text/javascript" src="../js/shangcheng.js" ></script>
</head>
<body>
 <div class="header">
     <dir class="logo">
     <img src="../image/1.jpg">
     </dir>
     <div class="menu" onmouseleave="show_menu1()">
      <div class="menu_title" onclick="show_menu()">
      <a href="#">内容分类</a>
      </div>
     <ul id="menu1">
        <li>现实主义</li>
        <li>抽象主义</li>
     </ul>
     </div>
     <dir class="auth">
           <ul>
              <li><a href="#">登录</a></li>
              <li><a href="#">注册</a></li>
           </ul>
     </dir>
 </div>
 <div class="content"></div>
 <div class="footer"></div>
</body>
</html>

*{
 padding: 0px;
 margin: 0px;
}
.header{
 margin:25px auto 0 50px;
}
.header .menu ul{
 display: none;
 list-style: none;
}
.header .logo{
    float: left;
    position: relative;
}
.header .menu{
    float: left;
    position: relative;
 margin-top: 12px;
 margin-left: 16px;
}
/*菜单显示折叠*/
/*.header .menu:hover ul{
 display: block;
}*/
.header .menu ul li{
 margin-top: 20px;
 text-align: center;
}
.header .menu .menu_title{
 border-bottom: 1px solid black;
 padding-bottom: 20px;
 width: 80px;
 text-align: center;
}
a{
 text-decoration: none;
}
.header .auth{
 float: right;
}
.header .auth ul li{
 float: left;
 margin-right: 50px;
 margin-top: 20px;
 list-style: none;
}

var flag = true;
function show_menu() 
{
 var menu1 = document.getElementById("menu1");
 if(flag)
 {
  menu1.style.display="block";
  flag = false;
    }
    else
    {
     menu1.style.display="none";
     falg = true;
    }
}
function show_menu1()
{
 var menu1 = document.getElementById("menu1");
 menu1.style.display = "none";
 flag = true;
}

我在css.header .logo的那个语句中用width，height无法改变它的大小

慕仰7036876 2020-05-14

源自：前端油画商城案例 2-1 logo和menu区域设计-1

收起

2回答

好帮手慕小尤回答被采纳获得+3积分 2020-05-15 09:58:00

同学你好，改变logo图片大小，同学可以为.header .logo设置宽度与高度，然后为logo下的img设置宽度与高度。修改后代码如下所示：

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

慕仰7036876 提问者 #1

真的改变了，谢谢您。不过老师我还想请教您一下，为什么我之前只写.header .logo不行，并且只要一改变logo的大小，logo就会将内容分类这个menu里面的东西覆盖住，就像是出现了分层一样，logo在上，menu在下。他们不都是浮动的吗？我为什么加了一个img就行了呢，logo标签里的东西不也只包含logo这么一张图吗？为什么还要加img呢？

2020-05-15 13:04:50