您的位置：首页 > Web前端 > CSS

帖一个简单css效果

2006-07-10 11:25 696 查看

temp.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript">
function ShowTree(obj)
{
whichEl = eval(obj);

if (whichEl.style.display == "none")
{
var div = document.getElementsByTagName("div");
for (i=0; i<div.length; i++)
{
if (div[i].className == whichEl.className)
{
div[i].style.display = "none";
}
}
eval(obj + ".style.display=/"/";");
}
else
{
eval(obj + ".style.display=/"none/";");
}
}

function ShowMain(obj1,obj2)
{
whichEl = eval(obj1);
if (whichEl.style.display == "")
{
eval(obj1 + ".style.display=/"none/";");
eval(obj2 + ".style.display=/"/";");
}
else
{
eval(obj1 + ".style.display=/"/";");
eval(obj2 + ".style.display=/"none/";");
}
}
</script>
</head>

<body>

<div id="f1" class="frame_style" style="display:;">
<div class="main_style">
<div id="div1" class="title_style" onclick="ShowTree('data1')">test</div>
<div id="data1" class="data_style" style="display:none;">
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
<div id="div2" class="title_style" onclick="ShowTree('data2')">test</div>
<div id="data2" class="data_style" style="display:none;">
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
</div>
</div>
<div class="space_style"><div onclick="ShowMain('f1','f2')"></div></div>

<div id="f2" class="frame_style" style="display:none;">
<div class="main_style">
<div id="div3" class="title_style" onclick="ShowTree('data3')">test2</div>
<div id="data3" class="data_style" style="display:none;">
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
<div id="div4" class="title_style" onclick="ShowTree('data4')">test2</div>
<div id="data4" class="data_style" style="display:none;">
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
</div>
</div>
<div class="space_style"><div onclick="ShowMain('f2','f3')"></div></div>

<div id="f3" class="frame_style" style="display:none;">
<div class="main_style">
<div id="div5" class="title_style" onclick="ShowTree('data5')">test3</div>
<div id="data5" class="data_style" style="display:none;">
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
<div id="div6" class="title_style" onclick="ShowTree('data6')">test3</div>
<div id="data6" class="data_style" style="display:none;">
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
</div>
</div>
</body>
</html>

style.css

a,input{
behavior:url('blur.htc');
}

body
{
margin:10px;
}
body,td,th,p,span,div,li{
font-size:12px;
line-height:150%;
font-family:"宋体", Arial;
}
input{
border-top-color:#CCCCCC;
border-left-color:#CCCCCC;
border-right-color:#999999;
border-bottom-color:#999999;
border-width:1px;
border-style:solid;
background-color:#FFFFFF;
font-size:12px;
padding-top:1px;
float:right;
}

.frame_style{
float:left;
}
.main_style{
float:left;
width:300px;
height:350px;
overflow:hidden;
}

.title_style{
cursor:hand;
padding:4px;
padding-left:16px;
margin-bottom:4px;
border-color:#E1E1E1;
border-style:solid;
border-width:1px;
width:300px;
background-color:#FAFAFA;
}

.data_style{
border-color:#F1F1F1;
border-style:solid;
border-width:1px;
width:300px;
background-color:FAFAFA;
}
.data_style ul{
list-style-type:none;
margin:0px;
padding:10px;
}

.space_style{
margin:4px;
border-color:#F1F1F1;
border-style:solid;
border-width:1px;
width:6px;
height:340px;
background-color:#FAFAFA;
float:left;
}
.space_style div{
cursor:hand;
background-color:#CCCCCC;
width:100%;
height:20px;
margin-top:160px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航