文档章节

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

rin9958
 rin9958
发布于 2016/06/26 23:55
字数 613
阅读 33
收藏 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前端性能优化基本套路

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

32氪
2017/07/31
0
0
移动端使用 rem 单位时 css sprites 定位问题

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

幽涯
06/17
0
0
系统级前端开发总结

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

Hui-Lee
2016/11/13
33
0
大话WEB前端性能优化基本套路

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

SFLYQ
2017/07/14
0
0
安装nginx-http-concat 减少http请求

Nginxconcatmodule 是淘宝开发的基于Nginx减少HTTP请求数量的扩展模块,主要是用于合并减少前端用户Request的HTTP请求的数量 下载完成之后需要重新编nginx 访问链接:www.xxx.cm/js/??1.js,2....

liupengv5
2012/12/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

数据新增--》id和name到对象----》dom渲染

<html> <head> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="http://www.reoonet.com/plu......

柴高八斗之父
2分钟前
0
0
使用Nexus Repository 3的十二个理由

使用Nexus Repository 3的十二个理由 2017年03月14日 20:20:43 阅读数:13383 随着Nexus Repository Manager OSS 3的发布(目前更新至3.2.1),虽然目前还是Nexus 2和Nexus 3并行的状态,但是...

linjin200
4分钟前
0
0
【转】分布式锁实现(二):Zookeeper

设计实现 一、基本算法 1.在某父节点下创建临时有序节点2.判断创建的节点是否是当前父节点下所有子节点中序号最小的3.是序号最小的成功获取锁,否则监听比自己小的那个节点,进行watch,...

talen
14分钟前
0
0
dkhadoop大数据智能分析平台监控参数说明

2018年国内大数据公司50强榜单排名已经公布了出来,大快以黑马之姿闯入50强,并摘得多项桂冠。Hanlp自然语言处理技术也荣膺了“2018中国数据星技术”奖。对这份榜单感兴趣的可以找一下看看。...

左手的倒影
21分钟前
0
0
Java 读写锁实现原理

最近做的一个小项目中有这样的需求:整个项目有一份config.json保存着项目的一些配置,是存储在本地文件的一个资源,并且应用中存在读写(读>>写)更新问题。既然读写并发操作,那么就涉及到...

编辑部的故事
23分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部