前端开发CSS3实现三角形面包屑导航教程

前端开发导航栏切换页面|移动端开发的介绍 前端|eclipse前端开发 插件及说明

作为一个前端人员当然需要最大化的实现设计图的展示效果,最开始考虑的是用图片来实现,根据文字字符长短的变化,必须要切很长的图片。而后说需要做半透明的效果,一改透明度,发现三角形那块能够看得清下面的那个层,瞬间晕倒。
一直琢磨着能否用css3来做,试了一下,效果还不错;
代码片段 1

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>国内开发的 前端框架:css3三角形面包屑导航</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        .breadnav {
            margin: 100px 10px;
        }
        ul li {
            float: left;
            list-style: none;
            height: 40px;
        }
        ul li a {
            border-left: 20px dashed transparent;
            height: 0;
            line-height: 0;
            color: #fff;
            float: left;
            padding: 0 20px;
            text-decoration: none;
            text-transform: uppercase;
            font-family: Arial;
            font-size: 12px;
        }
        ul li.home a {
            background: #222;
            border-bottom: 20px solid #222;
            border-top: 20px solid #222;
        }
        ul li.subnav1 a {
            background: #222;
            border-bottom: 20px solid #036daa;
            border-top: 20px solid #036daa;
        }
        ul li.subnav2 a {
            background: #036daa;
            border-bottom: 20px solid #038ddc;
            border-top: 20px solid #038ddc;
        }
        ul li.subnav3 a {
            background: #038ddc;
            border-bottom: 20px solid #41b4f6;
            border-top: 20px solid #41b4f6;
        }
        ul li.last a {
            background: #41b4f6;
            border-bottom: 20px solid #fff;
            border-top: 20px solid #fff;
        }
    </style>
</head>
<body>
    <ul class=”breadnav”>
        <li class=”home”>
            <a href=”#”>Home</a>
        </li>
        <li class=”subnav1″>
            <a href=”#”>category</a>
        </li>
        <li class=”subnav2″>
            <a href=”#”>prolist</a>
        </li>
        <li class=”subnav3″>
            <a href=”#”>prodetail</a>
        </li>
        <li class=”last”>
            <a href=”#”></a>
        </li>
    </ul>
</body>
</html>

备注:该效果支持火狐、谷歌、Safari、IE8以上。设置导航半透明的话,直接设置外面的 li 的opacity值就可以了。

初识前端与移动开发到项目开发|谷歌 开发插件 前端|天津前端开发招聘信息

» 本文来自:前端开发者 » 《前端开发CSS3实现三角形面包屑导航教程》
» 本文链接地址:https://www.rokub.com/4884.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!