当前位置：Gxlcms > html代码 > [导入]DIV+CSS+js制作圆角选项卡效果_html/css_WEB-ITnose

[导入]DIV+CSS+js制作圆角选项卡效果_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：17人阅读

做网站很多年.一直用TABLE布局网页,没有想到DIV+CSS的魅力如此之大,看了些资料.做了个简单而很使用的效果.圆角无刷新选项卡.单击以下地址预览(下载):

http://www.d000.cn/epark/attachments/file/css1.html

简单介绍一下重要代码:

1:圆角效果的实现

xhtml代码:

这句很简单,就是用这个标签在网页占八行的位置(上边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:选项卡效果的实现

找工作


找人才

找新闻




  1. 测试11111111




  1. 测试2222222222222



  1. 测试333333333






看完这个其实大家就知道了,选项卡就是把每个选项里的内容放在一个DIV里,当前显示一个,其它全部隐藏,当鼠标单击其他选项时,就显示相应的选项.

CSS代码如下:

.TopTen .hiddencontent
{
display: none;
}
.TopTen .activecontent
{
text-align: justify;
padding: 2px;
border: 0px solid;
z-index: 2;
}
a.active {
background:#678995; }

JS代码如下: