问一些问题

*{
	margin:0px;
	padding:0px;

}
.header{
	margin:25px auto ;
	width:1200px;
}
.header .menu ul{
	width:80px;
	background-color:white;
	list-style:none;
	display: none;
	position:absolute;
	opacity: 0.5;
}
.header .menu ul li{
	margin-top:15px;
	text-align: center;

}
.header .menu{
	float:left;
	position: relative;
	margin-top:12px;
	margin-left:16px;

}
.header .menu .menu_title{
	width:80px;
	text-align: center;
	padding-bottom: 15px;
		/*border是根据width的宽度来显示下边框的*/
	border-bottom: 1px solid black 

}
.header .logo{
	float:left;
	position: relative;
}
/*菜单进行折叠
.header .menu:hover ul{
	display:block;
}*/
a{
	text-decoration: none;
}
.header .user{
	float:right;
}
.header .user ul li{
	float:right;
	list-style:none;
	margin-right:65px;
	margin-top:12px;
}
.bodyTest .body1{
	width:1200px;
	margin:25px auto;
}
.bodyTest .body1 .photo1 {
	margin-top:30px;
}
.bodyTest .composing ul{
	width:1280px;
	margin-left:350px;
}
.bodyTest .composing ul li{
	width:361px;
	float:left;
	margin:0px 58px 59px 0;
	list-style:none;

}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>油画商城案例</title>
<link rel="stylesheet" type="text/css" href ="css/comeon.css" />
<script type="text/javascript" src="js/js1.js" ></script>
</head>
<body>
<!-- 页眉 -->
<div class="header">
<div class="logo">
<img src="image/logo.png" class="headPhotoTest">
</div>
<!-- 主菜单 -->
<div class="menu" onmouseleave="Mouse_Menu()" >
<div class="menu_title" onclick="Menu()" >
<a href="#">内容分类</a>
</div>
  <ul id="menu1">
<li>现实主义</li>
<li>抽象主义</li>
</ul>
   </div>
  <div class="user">
   <ul>
   <li><a href="#">注册</a></li>
   <li><a href="#">登录</a></li>
   </ul>
  </div>
      </div>
<div class="bodyTest">
<div class="body1">
<img src="image/welcome.png" class="photo1">
</div>
<div class="composing">
<ul>
<li>
<div class="photo_composing">
<img class="photo_woman" src="image/wumingnvlang.jpg" alt="">
</div>
<h3>无名女郎</h3>
<P>图片描述可以分多钟一种,是单一说明,就比如直接的告诉看图者这篇文章是要介绍什么样子的内容,一些配图可以分为含蓄类型的,这样的配图一般会图片描述可以分为多钟</P>
<div class="photo_num">
$5800
</div>
</li>
<li>
<div class="photo_composing">
<img class="photo_woman" src="image/wumingnvlang.jpg" alt="">
</div>
<h3>无名女郎</h3>
<P>图片描述可以分多钟一种,是单一说明,就比如直接的告诉看图者这篇文章是要介绍什么样子的内容,一些配图可以分为含蓄类型的,这样的配图一般会图片描述可以分为多钟</P>
<div class="photo_num">
$5800
</div>
</li>
<li>
<div class="photo_composing">
<img class="photo_woman" src="image/wumingnvlang.jpg" alt="">
</div>
<h3>无名女郎</h3>
<P>图片描述可以分多钟一种,是单一说明,就比如直接的告诉看图者这篇文章是要介绍什么样子的内容,一些配图可以分为含蓄类型的,这样的配图一般会图片描述可以分为多钟</P>
<div class="photo_num">
$5800
</div>
</li>
<li>
<div class="photo_composing">
<img class="photo_woman" src="image/wumingnvlang.jpg" alt="">
</div>
<h3>无名女郎</h3>
<P>图片描述可以分多钟一种,是单一说明,就比如直接的告诉看图者这篇文章是要介绍什么样子的内容,一些配图可以分为含蓄类型的,这样的配图一般会图片描述可以分为多钟</P>
<div class="photo_num">
$5800
</div>
</li>
<li>
<div class="photo_composing">
<img class="photo_woman" src="image/wumingnvlang.jpg" alt="">
</div>
<h3>无名女郎</h3>
<P>图片描述可以分多钟一种,是单一说明,就比如直接的告诉看图者这篇文章是要介绍什么样子的内容,一些配图可以分为含蓄类型的,这样的配图一般会图片描述可以分为多钟</P>
<div class="photo_num">
$5800
</div>
</li>
<li>
<div class="photo_composing">
<img class="photo_woman" src="image/wumingnvlang.jpg" alt="">
</div>
<h3>无名女郎</h3>
<P>图片描述可以分多钟一种,是单一说明,就比如直接的告诉看图者这篇文章是要介绍什么样子的内容,一些配图可以分为含蓄类型的,这样的配图一般会图片描述可以分为多钟</P>
<div class="photo_num">
$5800
</div>
</li>
</ul>
</div>
</div>
<div class="footTest"></div>
</body>
</html>

//设置开关全局变量flag
var flag=true;
//现实主菜单折叠效果函数
function Menu(){
	var menu1=document.getElementById("menu1");
	if(flag){
    menu1.style.display="block";
    flag=false; 
	}else{
	menu1.style.display="none";
	flag=true;
	}
}
//鼠标离开主菜单隐藏
function Mouse_Menu(){
	var menu1=document.getElementById("menu1");
	menu1.style.display="none";
	//鼠标离开后把开关设置为true
	flag=true;

}

我是看一遍视频然后自己再写一遍,有一些地方跟老师不一样,我的如果进行浏览器页面缩放主页图片回跟商品展示块分开,是我写的不对还是哪出问题了

慕无忌4258813 2019-09-14

源自：前端油画商城案例 3-2 商品展示-1