2.3前端油画商城案例

实战项目一，记录笔记。

准备工作：创建所用到的文件夹。

第一步：1.1完成页眉区的制作。效果如图

难点：子菜单不显示，通过

.header .menu ul{
	display: none; /*子菜单不显示*/
}

.header .menu之间一定注意添加空格，不然不会实现

index.html文件如下：

<!DOCTYPE html>
<html>
<head>
	<title>油画商城</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
	<div class="header">

		<!-- 设置logo -->
		<div class="logo">
			<img src="image/logo.png">
		</div>

		<!-- 设置菜单 -->
		<div class="menu" onmouseleave="show_menu1()">
			<div class="menu_title"  onclick="show_menu()"><a href="">内容分类</a></div> <!-- 主菜单 -->
			<!-- 子菜单 -->
			<ul id="title">
				<li>现实主义</li>
				<li>抽象主义</li>
			</ul>
		</div>
                <div class="auth">
			<ul>
				<li><a href="#">登陆</a></li>
				<li><a href="#">注册</a></li>
			</ul>
			
		</div>

	</div>
	<div class="content"></div>
	<div class="footer"></div>
</body>
</html>

common.css文件如下：实现菜单的位置

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

.header{
	margin:25px auto 0 80px;
	width: 1200px;
}

a{
	text-decoration: none;
	color: black;
}

.header .menu .menu_title{
	 border-bottom: 1px solid black;
	 padding-bottom: 20px;
	 width: 80px;
	 text-align: center;
}

.header .menu ul{
	display: none;
	list-style: none;
}

.header .menu ul li{
	margin-top: 20px;
	text-align: center;
}


.header .logo{
	float: left;
	position: relative;
}

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

.header .auth {
	margin-top:12px;
    float: right;

}
.header .auth ul li {
    float: left;
    margin-right: 50px;
    list-style: none
 
 }

菜单的显示有两种，一种是cs一种是js，第一种cs文件

.header .menu:hover ul{
	display: block;
}

第二种js,更常见，以后用这种

var flag=false//全局变量
function show_menu(){
		var title1=document.getElementById("title");
		if(flag){
			title1.style.display="none";
			flag=false;
		}else{
			title1.style.display="block";
			flag=true;
		}
}

function show_menu1(){
		var title1=document.getElementById("title");
			title1.style.display="none";
			flag=false;
}

第二步：banner区制作

        <div class="content">
	  <div class="banner">
  		<img src="image/welcome.png" class="banner-img">
	  </div>
	</div>


.content{
	width: 1200px;
	margin:25px auto;
}

.content .banner .banner-img{

	margin-top: 20px;
}

第三步：商品区展示

2.3前端油画商城案例

Guess you like