Home > Article > Web Front-end > [Import] DIV CSS js to create rounded tab effect_html/css_WEB-ITnose

[Import] DIV CSS js to create rounded tab effect_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:30:291241browse

做网站很多年.一直用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:选项卡效果的实现

找工作


找人才


找新闻

Test222222222222

>
In a DIV, one is currently displayed and all others are hidden. When the mouse clicks on other options, the corresponding options are displayed.

The CSS code is as follows:

.TopTen .hiddencontent
{
display: none;

}

.TopTen .activecontent

{

text-align: justify;

padding: 2px;

border: 0px solid;
z -index: 2;
}
a.active {
background:#678995; }

JS code is as follows:

These are not many, you will understand them all if you take a closer look.

PS: If you want to implement mouse movement When reaching a certain option, the corresponding content will be displayed. Just change onclick="changeTab(3);" to: onmouseover="changeTab(3);" onclick="return false;" and so on!

Article source: http://0839.d000.cn/default.asp?id=16

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Very good sliding door menu (div css) available for download_html/css_WEB-ITnoseNext article：Very good sliding door menu (div css) available for download_html/css_WEB-ITnose

See more

[Import] DIV CSS js to create rounded tab effect_html/css_WEB-ITnose

Related articles