前端开发者前端开发导航栏切换页面|移动端开发的介绍 前端|eclipse前端开发 插件及说明
作为一个前端人员当然需要最大化的实现设计图的展示效果，最开始考虑的是用图片来实现，根据文字字符长短的变化，必须要切很长的图片。而后说需要做半透明的效果，一改透明度，发现三角形那块能够看得清下面的那个层，瞬间晕倒。
一直琢磨着能否用css3来做，试了一下，效果还不错;
代码片段 1
<!DOCTYPE html>
<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值就可以了。
初识前端与移动开发到项目开发|谷歌 开发插件 前端|天津前端开发招聘信息
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册