• 技术文章 >web前端 >html教程

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

    2016-06-24 12:30:29原创693

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

    相关文章推荐

    • 网页制作前先来看看这些所谓的规范_HTML/Xhtml_网页制作• jquery的基本选择器• 如何向当前的html文档输入一段字符_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• css的学习_html/css_WEB-ITnose
    1/1

    PHP中文网