3.css制作面包屑

来源：互联网发布：手淘自然排名优化步骤编辑：程序博客网时间：2024/05/20 03:43

面包屑常用来显示标签之间的层级关系，我们过去经常使用图片来配合制作，现在我们通过css3写三角形也可以用来完成这样的一个目标。

HTML结构

<body>    <ul id="breadcrumbs">        <li><a href="#">Home</a></li>        <li><a href="#">Level #1</a></li>        <li><a href="#">Level #1-1</a></li>        <li><a href="#">Level #1-1-1</a></li>        <li class="current">Current Level</li>    </ul></body>

基础样式

/* 基本样式的重置 */*{    margin: 0;    padding: 0;}body{    font: 14px Arial, Helvetica;    color: #444;    margin: 50px auto;    padding: 50px;    width: 80%;}ul{    list-style: none outside none;    margin-bottom: 15px;}ul li{    float: left;    display: inline;}ul li a{    text-decoration: none;}

设置最外面ul的边框、圆角、宽度

#breadcrumbs {    background-color: #eee;    border: 1px solid #ccc;    border-color: #f5f5f5 #e5e5e5 #ccc;    /*今天我发现overflow可以有避免子元素浮动导致父元素缩到一起的作用*/    overflow: hidden;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .2);    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .2);    box-shadow: 0 0 2px rgba(0, 0, 0, .2);    width: 70%;}

设置每一个显示块的样式，使用渐变

#breadcrumbs a,#breadcrumbs li:last-child {    padding: 0.7em 1em 0.7em 2em;    /*不让a元素内容挤在上方*/    float: left;    color: #444;    position: relative;    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);    background-color: #ddd;    background-image: -webkit-linear-gradient(top right, #f5f5f5, #ddd);    background-image: -moz-linear-gradient(top right, #f5f5f5, #ddd);    background-image: -o-linear-gradient(top right, #f5f5f5, #ddd);    background-image: linear-gradient(top right, #f5f5f5, #ddd);}

让第一个面包屑有圆角，并对鼠标动作有颜色响应

#breadcrumbs li:first-child a{    padding-left: 1em;     -moz-border-radius: 5px 0 0 5px;    -webkit-border-radius: 5px 0 0 5px;    border-radius: 5px 0 0 5px;}#breadcrumbs a:hover{    background: #fff;}

定制三角形，并放置好位置，前后都要的原因是，用一个通过平移0.1em来制作阴影

#breadcrumbs a::after,#breadcrumbs a::before{    content: "";    position: absolute;    top: 50%;    margin-top: -1.5em;    border-top: 1.5em solid transparent;    border-bottom: 1.5em solid transparent;    border-left: 1em solid;    right: -1em;}

使三角显示

#breadcrumbs a::after{    z-index: 2;    border-left-color: #f3f3f3;} #breadcrumbs a::before{    border-left-color: #ccc;    right: -1.1em;    z-index: 1;}

三角形有鼠标动作的响应，和对最后一个li样式设置

#breadcrumbs a:hover::after{    border-left-color: #fff;}#breadcrumbs li:last-child{    font-weight: bold;    background: none;}

0 0