Heim >Web-Frontend >HTML-Tutorial >[导入]DIV+CSS+js制作圆角选项卡效果_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:30:291279Durchsuche

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

                         


                         
                         
                         

               
   

          
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn