zoukankan      html  css  js  c++  java
  • 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{
    			136px;
    			height:500px;
    			background-color:#FFFFFF;
    		}
    		
    		#style1{
    			margin-left:2px;
    			background-image:url(image/2.jpg);
    			136px;
    			height:42px;
    			color:#FFFFFF;
    		}
    		
    		#style1 div{
    			padding-top:25px;
    			padding-left:30px;
    		}
    		
    		.style211{
    			background-image:url(image/3.jpg);
    			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;
    			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>
    



  • 相关阅读:
    C#后台去除字符串最后一个字符
    C#后台验证含0的正整数
    jQuery提交表单的几种方式
    C#后台获取当前时间并格式化
    获取EasyUI日期输入框的值
    jQuery将字符串转换为数字
    JQ和JS获取span标签的内容
    正则
    json 拖拽
    event事件对象
  • 原文地址:https://www.cnblogs.com/xj626852095/p/3648066.html
Copyright © 2011-2022 走看看