DIV+CSS圆角效果的简易实现

最新推荐文章于 2024-05-16 14:33:11 发布

lee576

最新推荐文章于 2024-05-16 14:33:11 发布

阅读量2.3k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

也许很多人还在为制作圆角导航而烦恼，因为在传统制作圆角效果时大多数人的思路是采用3个DIV加上浮动来实现，这样制作时很多情况会出现兼容性问题。下面我给大家分享一种较为简便的方法轻松实现圆角效果。

我们以下图为例：

首先说明一下整个思路的结构：

我们采用3层DIV嵌套的方式，外两层是背景层，一层背景是左边圆角，二层是右边圆角，三层是导航菜单容器。整个结构图如下：

然后我们把素材图切片做好，这里需要注意的是，坐圆角肯右圆角尺寸必须一样，方法是把左圆角水平反转后存为右圆角即可。把切好的图片放在img文件夹下

左圆角：右圆角：导航栏背景：

然后把bg_l这个DIV加上左圆角背景bg_l,jpg，背景位置是left center（左对齐，上下居中）;

把bg_r这个DIV加上右圆角背景bg_r.jpg，背景位置是right center（左对齐，上下居中）;

把nav这个DIV加上导航栏背景bg_nav.jpg，背景位置是right center（左对齐，上下居中）;

现在的效果如下：

正面拆分效果

侧面拆分效果图

下面我们开始用代码实现：

我们把CSS代码保存在css文件夹下，图片放在img文件夹下。

第一步：html代码

建立index.html 建立3个div： bg_l、bg_r、nav，嵌套结构如下：

这里的嵌套结构一定要按照顺序嵌套，另外也可以用id来给DIV命名。

第二步：CSS代码

建立CSS文件style.css，保存在css文件夹下。

写CSS代码之前首先去掉浏览器默认的CSS属性：body,div,a,ul,li{margin:0,padding:0}这里因为我们只会用到这些标签，所以就省去了其它的。

这里分享一下平常最常用的一段去除默认属性的代码：

 
        body,ul,ol,li,p,h 
        1 
        ,h 
        2 
        ,h 
        3 
        ,h 
        4 
        ,h 
        5 
        ,h 
        6 
        ,form,fieldset,table,td,img,div,dl,dt,dd,textarea,a{ 
        margin 
        : 
        0 
        ; 
        padding 
        : 
        0 
        ; 
        border 
        : 
        0 
        ;} 
       

然后去掉ul的默认符号:

 
        ul{list_style: 
        none 
        ;} 
       

接下来设置DIV:bg_l的属性，高为55，宽为960px，左右居中,加上左圆角背景bg_l.jpg，不重复，左对齐，上下居中对齐，加上黑色背景#1a1a1a：

 
        .bg_l{  
        width 
        : 
        960px 
        ;  
        height 
        : 
        55px 
        ;  
        margin 
        : 
        0 
        auto 
        ;  
        background 
        : 
        #1a1a1a 
        url 
        (‘../img/bg_l.jpg’)  
        left 
        center 
        no-repeat 
        ;} 
       

效果如下：

然后设置bg_r的属性，宽度可以省略，因为DIV 默认会尽可能宽，父级DIV：bg_l已经定义了宽度960px，所以它会继承父级的宽度。背景色不能加，否则会覆盖掉bg_l层的左圆角背景，加上右圆角背景右对齐，上下居中对齐即可。

 
        .bg_r{ 
        height 
        : 
        55px 
        ;  
        background 
        :  
        url 
        (../img/bg_r.jpg)  
        right 
        center 
        no-repeat 
        ;} 
       

现在的效果如下：

接下来要给DIV层nav加上属性，这里需要注意的是：nav的宽度不能为100%，因为它需要把左圆角和右圆角的位置流出来，两个圆角图片的宽度为19px，所以给nav加上左右都为19像素的边距：margin:0 19px;加背景图片bg_nav.jpg，上下居中对齐，横向重复即可。

Nav的CSS代码如下：

效果如下：

这里把body也加上黑色#1a1a1a方便查看效果：

第三步：加上链接

加上ul列表的超链接菜单，这样一个圆角导航就完成了，接下来我们把导航链接加上后的效果：

OK，完毕,是不是感觉很简单？简短的几句代码，连float都没有用上只用了3个DIV轻松实现。

代码：

Index.html

 
        <!DOCTYPE html PUBLIC  
        "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
        > 
       
 
        <html xmlns= 
        "http://www.w3.org/1999/xhtml" 
        > 
       
 
        <head> 
       
 
        <meta http-equiv= 
        "Content-Type" 
        content= 
        "text/html; charset=utf-8" 
        /> 
       
 
        <title>DIV+CSS圆角效果演示</title> 
       
 
        <link rel= 
        "stylesheet" 
        type= 
        "text/css" 
        href= 
        "css/style.css" 
        /> 
       
 
        </head> 
       
 
        <body> 
       
 
        <div class= 
        "bg_l" 
        > 
       
 
        <div class= 
        "bg_r" 
        > 
       
 
        <div class= 
        "nav" 
        > 
       
 
        <ul> 
       
 
        <li><a href= 
        "#" 
        >HOME</a></li> 
       
 
        <li><a href= 
        "#" 
        >COMPANY</a></li> 
       
 
        <li><a href= 
        "#" 
        >TEAM</a></li> 
       
 
        <li><a href= 
        "#" 
        >PARTNERS</a></li> 
       
 
        <li><a href= 
        "#" 
        >PRODUCTS</a></li> 
       
 
        <li><a href= 
        "#" 
        class= 
        "current" 
        >CLIENTS</a></li> 
       
 
        <li class= 
        "no_bg" 
        ><a href= 
        "#" 
        >CONTACT</a></li> 
       
 
        </ul> 
       
 
        </div> 
       
 
        <!--/nav--> 
       
 
        </div> 
       
 
        <!--/bg_r--> 
       
 
        </div> 
       
 
        <!--/bg_l--> 
       
 
        </body> 
       
 
        </html> 
       
 
        Style.css: 
       
 
        body,ul,li,div,a{ 
        margin 
        : 
        0 
        ; 
        padding 
        : 
        0 
        ; 
        border 
        : 
        0 
        ;} 
       
 
        ul{  
        list-style 
        : 
        none 
        ;} 
       
 
        body{  
        background 
        : 
        #1a1a1a 
        ;  
        font-family 
        : 
        Arial 
        ,  
        Helvetica 
        ,  
        sans-serif 
        ;} 
       
 
        .bg_l{ 
        width 
        : 
        960px 
        ;  
        height 
        : 
        55px 
        ;  
        margin 
        : 
        0 
        auto 
        ;  
        background 
        : 
        #1a1a1a 
        url 
        (../img/bg_l.jpg)  
        left 
        center 
        no-repeat 
        ; 
        margin-top 
        : 
        30px 
        ;} 
       
 
        .bg_r{ 
        height 
        : 
        55px 
        ;  
        background 
        : 
        url 
        (../img/bg_r.jpg)  
        right 
        center 
        no-repeat 
        ;} 
       
 
        .nav{  
        margin 
        : 
        0 
        19px 
        ;  
        height 
        : 
        100% 
        ;  
        background 
        : 
        url 
        (../img/bg_nav.jpg)  
        center 
        center 
        repeat-x 
        ;} 
       
 
        .nav ul li{  
        float 
        : 
        left 
        ;  
        background 
        : 
        url 
        (../img/bg_li.jpg)  
        right 
        center 
        no-repeat 
        ;} 
       
 
        .nav ul li.no_bg{  
        background 
        : 
        none 
        ;} 
       
 
        .nav ul li a{  
        display 
        :inline- 
        block 
        ;  
        width 
        : 
        113px 
        ;  
        height 
        : 
        55px 
        ;  
        line-height 
        : 
        55px 
        ;  
        font-size 
        : 
        12px 
        ;  
        font-weight 
        : 
        bold 
        ;  
        text-align 
        : 
        center 
        ;  
        text-decoration 
        : 
        none 
        ;  
        color 
        : 
        #444 
        ;} 
       
 
        .nav ul li a:hover,.nav ul li a.current{  
        color 
        : 
        #b00000 
        ;  
        background 
        : 
        url 
        (../img/bg_a_current.jpg)  
        center 
        center 
        no-repeat 
        ;} 
       

教程到这里结束了，各位有问题可以联系本人：QQ:44294631 Email：joy#joychao.cc

欢迎光顾我的博客：http://www.joychao.cc

所有代码及图片都打包好了，欢迎下载和学习。

代码及图片压缩包：

http://115.com/file/c29j6oo3#demo.zip

lee576

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DIV+CSS圆角效果的简易实现

也许很多人还在为制作圆角导航而烦恼，因为在传统制作圆角效果时大多数人的思路是采用3个DIV加上浮动来实现，这样制作时很多情况会出现兼容性问题。下面我给大家分享一种较为简便的方法轻松实现圆角效果。我们以下图为例：首先说明一下整个思路的结构：我们采用3层DIV嵌套的方式，外两层是背景层，一层背景是左边圆角，二层是右边圆角，三层是导航菜单容器。整个结构图如下：然后我们把素材图切片做好，这里需要注意的是，
复制链接

扫一扫