Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-30 19:56:51

字母导航条导航条菜单

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<style>
    /* global css styles */
/* @group resets */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: Arial, Tahoma, Verdana, sans-serif; }

body { font-size: 62.5%; background: #fff; }

/* @group fonts */
h2 { font-size: 2.7em; font-family: Trebuchet MS, Georgia, sans-serif; font-style: italic; color: #b8d5f5; margin-right: 60px; float: left; padding-top: 15px; }

h3 { font-weight: normal; font-family: Verdana, Arial, sans-serif; color: #e57f0f; font-size: 1.7em; line-height: 1.9em; width: 190px; float: left; }

/* @group layout */
#topbar { height: 75px; background: #f5f5f5; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: 30px; padding: 0 55px; display: block; margin-bottom: 16px; }

#topbar .search { float: left; display: block; line-height: 75px; }
#topbar .search #s { border: 1px solid #b9b9b9; border-top: 1px solid #a0a0a0; font-family: Tahoma, Arial, sans-serif; color: #444; font-size: 1.3em; width: 420px; line-height: 1.5em; padding: 5px 11px; }

/* @group breadcrumb */
#content { padding: 0 55px; }

#breadcrumb, #breadcrumb2 { float: left; display: block; }
#breadcrumb ul, #breadcrumb2 ul { list-style: none; }

.crumbs { display: block; }
.crumbs li {  display: inline; }
.crumbs li.first { padding-left: 8px; }
.crumbs li a, .crumbs li a:link, .crumbs li a:visited { color: #666; display: block; float: left; font-size: 12px; margin-left: -13px; padding: 7px 17px 11px 25px; position: relative; text-decoration: none; }

.crumbs li a { background-image: url('../img/bg-crumbs.png');  background-repeat: no-repeat; background-position: 100% 0; position: relative; }
.crumbs li a:hover { color: #333; background-position: 100% -48px; cursor: pointer; }
.crumbs li a:active { color: #333; background-position: 100% -96px; }
.crumbs li.first a span { height: 29px; width: 3px; border-left: 1px solid #d9d9d9; position: absolute; top: 0px; left: 0px; }

.crumbs2 { display: block; margin-left: -13px; padding: 0; }
.crumbs2 li { display: inline; }
.crumbs2 li a, .crumbs2 li a:link, .crumbs2 li a:visited { color: #666; display: block; float: left; font-size: 12px; padding: 7px 16px 7px 19px; position: relative; text-decoration: none; border: 1px solid #d9d9d9; border-right-width: 0px; }

.crumbs2 li a  { 
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(245,245,245)));

background-image: -moz-linear-gradient( center bottom, rgb(241,241,241) 45%, rgb(245,245,245) 73%);
	/* For Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5);
	/* For Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";
}

.crumbs2 li.first a { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.crumbs2 li.last a { border-right-width: 1px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }

.crumbs2 li a:hover { 
	border-top-color: #c4c4c4;
	border-bottom-color: #c4c4c4;
	
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(248,248,248)));
	background-image: -moz-linear-gradient( center bottom, rgb(241,241,241) 45%, rgb(248,248,248) 73%);
	/* For Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);
	/* For Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";
	
	color: #333;
	
	-moz-box-shadow: 0px 2px 2px #e8e8e8;
	-webkit-box-shadow: 0px 2px 2px #e8e8e8;
	box-shadow: 0px 2px 2px #e8e8e8;
}

.crumbs2 li a:active {
	border-top-color: #c4c4c4;
	border-bottom-color: #c4c4c4;
	
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(224,224,224)),color-stop(0.73, rgb(235,235,235)));
	background-image: -moz-linear-gradient( center bottom, rgb(224,224,224) 45%, rgb(235,235,235) 73%);
	/* For Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0);
	/* For Internet Explorer 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0)";
	
	color: #333; 
	
	box-shadow: -1px 1px 1px 0px #dadada inset;
	-webkit-box-shadow: -1px 1px 1px 0px #dadada inset;
	-moz-box-shadow: -1px 1px 1px 0px #dadada inset;
}

/* @group clearfix classes */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.space { display: block; height: 45px; clear: both; }
    </style>
<title>CSS3面包屑导航制作教程</title></head>

<body>
<div id="content" class="clearfix">
  
		
		
  <div class="space"></div>
		
		
  <h3>Without Images</h3>
		
		
		<div id="breadcrumb2">
			<ul class="crumbs2">
				<li class="first"><a href="#">Blog Home</a></li>
				<li><a href="#">Archives</a></li>
				<li><a href="#">2011 Writing</a></li>
				<li class="last"><a href="#">Tips for jQuery Development in HTML5</a></li>				
			</ul>
		</div>
	</div>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章：圆形风格面包屑网页导航条Tiny CSS3 Round Breadcrumb - CodePen

下一篇文章：黄色的CSS网页导航条 Breadcrumbs教程CSS Triangle Breadcrumbs

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

CSS3面包屑导航制作教程代码

推荐阅读：

相关代码：

标签分类