div css 练习2

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

	<frameset rows="132,*"  frameborder="no" border="0" framespacing="0">
		<frame src="head.html" name="head" scrolling="no"  noresize="noresize"/>	
		<frameset cols="400px,*" frameborder="no" border="0" framespacing="0">
			<frame src="left.html" name="left" scrolling="no" noresize="noresize" />
			<frame src="main.html" name="main" scrolling="no" noresize="noresize" />
		</frameset>
	</frameset><noframes></noframes>
</head>

<body>
</body>
</html>
left.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

	<style>
		body{
			margin:0px;
			border:0px;
			font-size:12px;
		}
		
		#container{
			width:136px;
			height:500px;
			background-color:#FFFFFF;
		}
		
		#style1{
			margin-left:2px;
			background-image:url(image/2.jpg);
			width:136px;
			height:42px;
			color:#FFFFFF;
		}
		
		#style1 div{
			padding-top:25px;
			padding-left:30px;
		}
		
		.style211{
			background-image:url(image/3.jpg);
			width:130px;
			height:20px;
		}
		.style211 div{
			padding-top:3px;
			padding-left:30px;
			color:#FFFFFF;
		}
		.style211 div a{ 
			color:#FFFFFF;
			text-decoration:none;
		}
		
		.style212{
			border:1px solid #3300FF;
			width:130px;
			height:130px;		
		}
		.style212 ul{
			list-style-type:none;
			list-style-image:url(image/icon.png);					
		}
		.style212 ul li{
			margin-bottom:1px;				
		}
		.style212 ul li a{
			text-decoration:none;				
		}
		.style212 ul li a:hover{
			font-size:16px;				
		}
				
	</style>
	
	<script>
		function hiddenDiv(div)
		{
			div.style.display=(div.style.display=='none'?'block':'none');
		}
	</script>

</head>
	<div id="container" >
		<div id="style1">
			<div>菜单管理</div>
		</div>
		
		<div id="style2">
			<div class="style21">
				<div class="style211">
					<div><a href="javascript:void" onClick="hiddenDiv(document.getElementById('1'))">业务中心</a></div>
				</div>
				
				<div class="style212" id="1">
					<ul>
						<li><a href="http://www.baidu.com">短信群发</a></li>
						<li><a href="http://www.baidu.com">短信群发</a></li>
						<li><a href="http://www.baidu.com">短信群发</a></li>
						<li><a href="http://www.baidu.com">短信群发</a></li>
					</ul>
				</div>								
			</div>
			
			<div class="style21">
				<div class="style211">
					<div><a href="javascript:void" onClick="hiddenDiv(document.getElementById('2'))">业务中心2</a></div>
				</div>
				
				<div class="style212" id="2">
					<ul>
						<li><a href="http://www.baidu.com">短信群发2</a></li>
						<li><a href="http://www.baidu.com">短信群发2</a></li>
						<li><a href="http://www.baidu.com">短信群发2</a></li>
						<li><a href="http://www.baidu.com">短信群发2</a></li>
					</ul>
				</div>								
			</div>									
		</div>				
	</div>
<body>
	
</body>
</html>



posted @ 2013-11-24 18:31  今晚打酱油_  阅读(89)  评论(0)    收藏  举报