>  기사  >  웹 프론트엔드  >  CSS现实漂亮的面包屑_html/css_WEB-ITnose

CSS现实漂亮的面包屑_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:33:241440검색

关于css实现面包屑已经是一个典型例子了。不过今天还是与大家分享一下实现的原理。
原理:每一段元素固定宽度并向左浮动,头尾突出部分相对父元素用相对定位固定位置,默认为同一颜色,高亮设置指定样式。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>面包屑</title>    <style>        *{margin: 0px;padding: 0px;}        ul,ol,li,dl,dt,dd{list-style: none;}        .iCls{*zoom:1;}        .iCls:after{display:block; overflow:hidden;clear:both; height:0;visibility:hidden; content:".";}        .iBread li i,.iBread li em,.iBread li strong{            background-image:url("http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_ibread.png");            background-repeat: none;        }        .iBread{            width: 910px;            margin: 20px auto;            _overflow: hidden;         }        .iBread ul{            border-radius: 6px;            overflow: hidden;        }         .iBread li{            position: relative;            float: left;            width: 292px;            height: 35px;            line-height: 35px;            color: #666666;            font-weight: bold;            background: #dfdfdf;            margin-right: 17px;            _margin-right: 16px;            text-indent: 80px;        }        .iBread li.last{            margin-right: 0px;        }        .iBread li i{            position: absolute;            right: -17px;            top: 0px;            z-index: 1;            display: block;            width: 17px;            height: 35px;            overflow: hidden;            background-position: -204px 0px;        }        .iBread li em{            display: none;        }        .iBread li strong{            position: absolute;            left: 30px;            top: 3px;            display: block;            width: 30px;            height: 30px;            overflow: hidden;            text-indent: -9999px;            margin-right: 20px;        }        .iBread li strong.one{            background-position: 0px 0px;        }        .iBread li strong.two{            background-position: -34px 0px;        }        .iBread li strong.three{            background-position: -67px 0px;        }        .iBread li strong.four{            background-position: -101px 0px;        }        .iBread li strong.five{            background-position: -134px 0px;        }        .iBread li.on{            z-index: 1;            color: #fff;            background-image:url("http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_ibread.png");            background-repeat: repeat;            background-position: 0px -78px;        }        .iBread li.on i{            right: -19px;            width: 19px;            color: #fff;            background-position: -228px -41px;        }        .iBread li.on em,.iBread li.lastOn em{            position: absolute;            left: -17px;            top: 0px;            z-index: 1;            display: block;            width: 17px;            height: 35px;            overflow: hidden;            background-position: -204px -41px;        }        .iBread li.on strong.one{            background-position: 0px -41px;        }        .iBread li.on strong.two{            background-position: -34px -41px;        }        .iBread li.on strong.three{            background-position: -67px -41px;        }        .iBread li.on strong.four{            background-position: -101px -41px;        }        .iBread li.on strong.five{            background-position: -134px -41px;        }        .iBread li.last i{            background-position: -228px 0px;                    }        .iBreadFour li{            width: 214.75px;        }        .iBreadFive li{            width: 168.4px;        }    </style></head><body>    <div class="iBread">        <ul class="iCls">            <li class="on">                <strong class="one">1</strong>                第一项                <i></i>            </li>            <li>                <strong class="two">2</strong>                第二项                <i></i><em></em>            </li>            <li class="last">                <strong class="three">3</strong>                第三项                <em></em>            </li>        </ul>    </div>    <div class="iBread iBreadFour">        <ul class="iCls">            <li class="on">                <strong class="one">1</strong>                第一项                <i></i>            </li>            <li>                <strong class="two">2</strong>                第二项                <i></i><em></em>            </li>            <li >                <strong class="three">3</strong>                第三项                <i></i><em></em>            </li>            <li class="last">                <strong class="four">4</strong>                第四项                <em></em>            </li>        </ul>    </div>    <div class="iBread iBreadFive">        <ul class="iCls">            <li >                <strong class="one">1</strong>                第一项                <i></i>            </li>            <li class="on" >                <strong class="two">2</strong>                第二项                <i></i><em></em>            </li>            <li >                <strong class="three">3</strong>                第三项                <i></i><em></em>            </li>            <li>                <strong class="four">4</strong>                第四项                <i></i><em></em>            </li>            <li class="last">                <strong class="five">5</strong>                第五项                <em></em>            </li>        </ul>    </div></body></html>

  

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.