CSS现实漂亮的面包屑_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

关于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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7638

CakePHP 教程

1391

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

150

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。