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

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，