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>
