做网站很多年.一直用TABLE布局网页,没有想到DIV+CSS的魅力如此之大,看了些资料.做了个简单而很使用的效果.圆角无刷新选项卡.单击以下地址预览(下载):
http://www.d000.cn/epark/attachments/file/css1.html
简单介绍一下重要代码:
1:圆角效果的实现
xhtml代码:
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
这句很简单,就是用<b>这个标签在网页占八行的位置(上边4行,下边4行)
相关CSS:
/*圆角框*/
b.rtop, b.rbottom{
display:block;
background: #668995
}
b.rtop b, b.rbottom b{
display:block;height: 1px;
overflow: hidden;
background: #81a6b3
}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
这段代码就很容易明白,就是填充每一行,然后设置不同的左右边距,就实现了圆角效果,相关CSS的设置可以参考CSS2.0中文手册.
2:选项卡效果的实现
<div id="left">
<div id="serchclass1"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><a id="TopTenTab1" onclick="changeTab(1);" class="active" href="#">找工作</a>
</div>
<div id="serchclass2"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><a id="TopTenTab2" onclick="changeTab(2);" href="#">找人才</a></div>
<div id="serchclass3"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><a id="TopTenTab3" onclick="changeTab(3);" href="#">找新闻</a></div>
<div id="serch">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <dd class="TopTen">
<div id="TopTenContent1" class="activecontent">
<ol><li><a href='http://3453454' target='_blank' title='测试>测试11111111</a></li>
</ol>
</div>
<div id="TopTenContent2" class="hiddencontent">
<ol><li><a href='http://3453454' target='_blank' title='测试>测试2222222222222</a></li>
</ol>
</div>
<div id="TopTenContent3" class="hiddencontent">
<ol><li><a href='http://3453454' target='_blank' title='测试>测试333333333</a></li>
</ol>
</div>
</dd>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
看完这个其实大家就知道了,选项卡就是把每个选项里的内容放在一个DIV里,当前显示一个,其它全部隐藏,当鼠标单击其他选项时,就显示相应的选项.
CSS代码如下:
.TopTen .hiddencontent
{
display: none;
}
.TopTen .activecontent
{
text-align: justify;
padding: 2px;
border: 0px solid;
z-index: 2;
}
a.active {
background:#678995; }
JS代码如下:
<script language="javascript">
tabCount = 3;
function changeTab(tabIndex)
{
for (i = 1; i <= tabCount; i++)
{
tab = document.getElementById("TopTenTab" + i);
content = document.getElementById("TopTenContent" + i);
if (i == tabIndex)
{
tab.className = "active";
content.className = "activecontent";
}
else
{
tab.className = "";
content.className = "hiddencontent";
}
}
}
</script>
这些就不在多少 ,大家就仔细看看就全部明白了.
PS:如果要实现鼠标移动到某个选项就显示相应内容,只需要把onclick="changeTab(3);" 改为:onmouseover="changeTab(3);" onclick="return false;" 即可,其它依次类推!
文章来源:http://0839.d000.cn/default.asp?id=16
