购物商城后台页面设计

最新推荐文章于 2024-07-20 14:46:57 发布

hoho_12

最新推荐文章于 2024-07-20 14:46:57 发布

阅读量3.7k

点赞数 6

分类专栏：网页设计与制作文章标签： css3

本文链接：https://blog.csdn.net/hoho_12/article/details/51234805

版权

网页设计与制作专栏收录该内容

13 篇文章 1 订阅

订阅专栏

main.html

<!doctype html>
<html>
	<head>
		<title>EasyBuy商城后台管理</title>
		<meta charset="utf-8">
		<style>
			#top{
			    display:block;
				width:1360px;
				height:100px;
				background-color:#112345;
			}
			#left{
				width:15%;
				height:100%;
				background-color:#808080;
				float:left;
			}
			#right{
				width:85%;
				height:100%;				
				background-color:#CBD8E6;
				float:left;
			}
			#main{
				width:1360px;
				height:500px;
			}
			#title{
				width:100%;
				height:100%;
				line-height:100px;
				text-align:center;
				color:#ffffff;
				font-size:24pt;
				letter-spacing:5px;
				font-family:"微软雅黑";
			}
			/*元素选择器(标签选择器)*/
			ul{
				list-style-type:none;/*去除列表中的圆点样式*/
			}
			ul span{
				font-weight:bold;
				font-size:15pt;
				color:#ffffff;
				cursor:pointer;
			}			
			.menu_first{
				padding:5px;
				background-color:#000000;
			}
			.menu_first ul{
				background-color:#808080;
				display:none;
			}
			.menu_first ul li{
				padding-top:5px;				
			}
			.menu_first ul li a{
				color:#ffffff;
				text-decoration:none;
			}
			.menu_first ul li a:hover{
				color:#ff0000;
				text-decoration:underline;
			}
			
			.menu_main{
				position:absolute;
				left:0px;				
			}
			
			
		</style>
	</head>
	<body leftmargin="0">
		<div id="main">
			<div id="top">
				<div id="title">EasyBuy商城后台管理</div>
			</div><!--top over!-->	
			<div id="left">
				<ul class="menu_main">
					<li class="menu_first"><span οnclick="toogle('sub_0')">商品管理</span>
						<ul id="sub_0">
							<li><a href="">商品列表</a></li>
							<li><a href="">商品上架</a></li>							
						</ul>
					</li>
					<li class="menu_first"><span οnclick="toogle('sub_1')">分类管理</span>
						<ul id="sub_1">
							<li><a href="">分类添加</a></li>
							<li><a href="">分类列表</a></li>							
						</ul>
					</li>
					<li class="menu_first"><span οnclick="toogle('sub_2')">订单管理</span>
						<ul id="sub_2">
							<li><a href="">订单列表</a></li>													
						</ul>
					</li>
					<li class="menu_first"><span οnclick="toogle('sub_3')">客户管理</span>
						<ul id="sub_3">
							<li><a href="">客户列表</a></li>
							<li><a href="">权限设置</a></li>								
						</ul>
					</li>
					<li class="menu_first"><span οnclick="toogle('sub_4')">系统管理</span>
						<ul id="sub_4">
							<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>
						</ul>
					</li>
				</ul>
			</div><!--left voer!-->
			<div id="right"></div>
		</div>
	</body>
	<script>
		//获取所有span元素
		/*var spans=document.getElementsByTagName("span");
		for(var i=0;i<spans.length;i++){
			//alert(spans[i]);
			spans[i].οnclick=function(){
				//alert("打开或关闭");
				alert(i);
				//document.getElementById('sub_'+i);
				//alert('sub_'+i);
			}			
		}*/		
		function toogle(id){
			var ul=document.getElementById(id);
			if(ul.style.display=='' || ul.style.display=='none'){
				ul.style.display='block';
			}else{
				ul.style.display='none';
			}
		}
	</script>	
</html>