教你用纯CSS3制作面包屑导航和翻页效果

2013-08-05 13:45 来源: 卓杰科技(www.zhuojie.cc) [大中小]

面包屑导航：面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路，所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
下面卓杰科技来叫大家怎么制作面包屑导航。
一、先建一个HTML写上
<ul class="bng">
<li>面包屑一</li>
<li class="current">面包屑二</li>
<li>面包屑二</li>
</ul>
二、建一个CSS样式，写上
.bng{
width:600px;
margin:100px auto;
background:#f0f0f0;
height:32px;
overflow:hidden;
line-height:32px;
position:relative;
}
.bng li{
float:left;
width:200px;
text-align:center;
position:relative;
z-index:2;
font-weight:bold;
font-size:14px;
}
.bng li em{
position:absolute;
right:-24px;
top:-8px;
width:0;
height:0;
line-height:0;
border-width:24px 0 24px 24px;
border-color:transparent transparent transparent #fff;
border-style:dashed dashed dashed solid;
}
.bng li i{
position:absolute;
right:-16px;
top:0;
width:0;
height:0;
line-height:0;
border-width:16px 0 16px 16px;
border-color:transparent transparent transparent #f0f0f0;
border-style:dashed dashed dashed solid;
}
.bng li.current{
background:#f60;
color:#fff;
z-index:1;
}
.bng li.current i{
border-color:transparent transparent transparent #f60;
}

纯CSS翻页效果

一、样式
<style>

dl {
position:absolute;
width:389px;
height:154px;
border:10px solid #eee;
}
dd {
margin:0;
width:389px;
height:154px;
overflow:hidden;
}
img {
border:1px solid black
}
dt {
position:absolute;
right:3px;
top:50px;
}
a {
display:block;
margin:1px;
width:20px;
height:20px;
text-align:center;
font:700 12px/20px "宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
border:1px solid #fff;
filter:alpha(opacity=40);
opacity:.4;
}
a:hover {
background:#000
}
</style>
二、HTML

本页关键词：

上一篇：什么是W3C和DIV+CSS 下一篇：怎么使网站快速被收录

您现在的位置： 首页 > 新闻中心 > 建站经验 > 详细内容

教你用纯CSS3制作面包屑导航和翻页效果

您现在的位置：首页 > 新闻中心 > 建站经验 > 详细内容