文档章节

面包屑 CSS(合并小图标,减少链接请求数量)

rin9958
 rin9958
发布于 2016/06/26 23:55
字数 613
阅读 35
收藏 9

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

详解见下图:

enter image description here

合并小图标,减少链接请求数量

enter image description here

<!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>

转载自:http://www.9958.pw/post/mianbaoxie_css

© 著作权归作者所有

共有 人打赏支持
rin9958
粉丝 9
博文 113
码字总数 54109
作品 0
程序员
私信 提问
web项目中图标的前端处理方案

工程中用到图标是常事,那这些图标我们前端一般是怎么解决的呢?这几种方案有什么优缺点呢? 第一种: SVG Sprite SVG sprite其实就是svg的集合。SVG即可缩放矢量图形 (Scalable Vector Gra...

邹R-ainna
11/22
0
0
WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪
2017/07/31
0
0
系统级前端开发总结

页面风格 使用less或sass全局统一CSS样式 禁止页面内联样式 清晰页面板式结构,样式结构 合理的注释 交互方式 表单验证 文本两边去掉空格 数值类型,严格限定长度大小,步长 *下拉列表,设置...

Hui-Lee
2016/11/13
33
0
移动端使用 rem 单位时 css sprites 定位问题

现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;为了减少网络请求数量,提高网页访问性能,一般都会把多个小 icon 合并成一张 sprite 图,然后根据 backgr...

幽涯
06/17
0
0
大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

SFLYQ
2017/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于vue2定义自己的图表echart组件

先安装echarts cnpm i echarts -S,然后定义父组件 <template> <div> <echarts :option="echartOpion"></echarts> </div></template><script> import echarts from './e......

莫沫达
12分钟前
1
0
详解CSS的Flex布局

本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式。通过Flex布局,可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每...

腾讯云加社区
24分钟前
2
0
一些感想

人生的意义是什么 不知不觉已人到中年,其实上学的时候经常会思考这些问题————大概是因为闲,大学毕业参加工作经历的事情越来越多,反而不会去想这些缥缈的事情了,也许是因为最近看了一...

looqy
25分钟前
2
0
迭代器模式 Iterator 行为型 设计模式(二十)

  在计算机中,Iterator意为迭代器,迭代有重复的含义,在程序中,更有“遍历”的含义      如果给定一个数组,我们可以通过for循环来遍历这个数组,这种遍历就叫做迭代      对于...

SEOwhywhy
33分钟前
3
0
【 58沈剑 架构师之路】InnoDB,5项最佳实践,知其所以然

缓存讲了一个月《缓存架构,一篇足够》。今天,开始写数据库。 第一篇,说说MySQL两个最常用的存储引擎,MyISAM和InnoDB。照自己的理解,把一些知识点总结出来,不只说知识点,多讲“为什么”...

张锦飞
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部