文档章节

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

rin9958
 rin9958
发布于 2016/06/26 23:55
字数 613
阅读 33
收藏 9
点赞 0
评论 0

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

安装nginx-http-concat 减少http请求

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

liupengv5 ⋅ 2012/12/17 ⋅ 0

系统级前端开发总结

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

Hui-Lee ⋅ 2016/11/13 ⋅ 0

移动端使用 rem 单位时 css sprites 定位问题

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

幽涯 ⋅ 06/17 ⋅ 0

大话WEB前端性能优化基本套路

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

SFLYQ ⋅ 2017/07/14 ⋅ 0

前段优化——雅虎的14条优化规则

Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上。  web性能对于用户体验有及其重要的影响,根据著名的原则: 当用户在2秒以...

凡尘里的一根葱 ⋅ 2015/09/12 ⋅ 0

Yahoo!给出的34条网站加速方法

减少HTTP请求 一个典型的http请求报文大概是这样的: GET /3.3.0/build/yui/yui-min.js HTTP/1.1Host: yui-s.yahooapis.comPragma: no-cacheCache-Control: no-cache... 虽然也就几行文字,但......

看看这天 ⋅ 2012/08/30 ⋅ 0

Web 前端性能优化 : 如何有效提升静态文件的加载速度

作者:刘轶斌,腾讯应用开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。 原文链接:wetest.qq.com/lab/view/34… WeTest 导读 此文总结了笔者在Web静态资源方面的一些...

腾讯云社区 ⋅ 2017/11/14 ⋅ 0

JS和CSS合并压缩工具--SpeedJSCSS

在一个页面中,每一个外部JS及CSS文件都会导致一个额外的HTTP请求。所以,如何合理的合并JS文件及CSS文件也是前端工程师应该考虑的。 SpeedJSCSS正是一款JS和CSS合并压缩工具,用于合并多个文...

MingfunWong ⋅ 2013/09/11 ⋅ 1

Yslow-23条规则

YslowYahoo发布的一款基于FireFox的插件,主要是为了提高网页性能而设计的,下面是它提倡了23条规则,还是很不错的,分享一下: 1.减少HTTP请求次数 合并图片、CSS、JS,改进首次访问用户等待...

mcy247 ⋅ 2017/12/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JEPLUS主从功能配置之主从布局的设置——JEPLUS软件快速开发平台

JEPLUS主从功能配置之主从布局的设置 主从功能配置成功之后就需要根据业务需求来调整主从功能的数据显示方式,不同的主从数据的显示可以达到不同的主从数据显示效果,今天这篇笔记就讲解一下...

JEPLUS ⋅ 1分钟前 ⋅ 0

如何利用极光推送的新功能玩转世界杯营销

四年一次的世界杯已经于6月14日开赛!对于app的运营人员而言,这场远在俄罗斯的绿茵征战绝不仅仅牵动着球迷们的心,更拨动着众多互联网企业运营人员的神经。在这场营销大战中,push显然是app...

极光推送 ⋅ 5分钟前 ⋅ 0

Spring Cloud构建微服务架构-Hystrix依赖隔离

依赖隔离 “舱壁模式”对于熟悉Docker的读者一定不陌生,Docker通过“舱壁模式”实现进程的隔离,使得容器与容器之间不会互相影响。而Hystrix则使用该模式实现线程池的隔离,它会为每一个Hys...

itcloud ⋅ 7分钟前 ⋅ 0

SpringCloud 微服务 (八) 统一配置中心 Config Server&Client

壹 Spring Cloud Config 统一配置中心,方便维护配置文件,对一些公司对数据库密码等敏感的信息,对普通开发人员不公开,放在运维人员手上,对配置作一个隔离作用,另外项目线上的配置改动都要重新...

___大侠 ⋅ 10分钟前 ⋅ 0

echarts轮播地图并结合鼠标浮动点击

直接上代码 timeId=setInterval(function () { if(count<11){ myChart.dispatchAction({ type: 'downplay', ......

莫西摩西 ⋅ 13分钟前 ⋅ 0

基于 HTML5 的工业互联网 3D 可视化应用

工业企业中生产线处于高速运转,由工业设备所产生、采集和处理的数据量远大于企业中计算机和人工产生的数据,生产线的高速运转则对数据的实时性要求也更高。破解这些大数据就是企业在新一轮制...

xhload3d ⋅ 16分钟前 ⋅ 0

Nging启动与停止bat

start_nginx.bat @echo off  f:  cd F:\server\nginx-1.13.6  echo "nginx is starting on port 80"  start "" "nginx.exe"  exit   stop_nginx.bat @echo off::windows ......

Jay丶 ⋅ 17分钟前 ⋅ 0

SuRF: 一个优化的 Fast Succinct Tries

作者:唐刘 在前一篇文章中,我简单介绍了 Succinct Data Structure,这里我们继续介绍 SuRF。 Fast Succinct Tries SuRF 的核心数据结构就是 Fast Succinct Tries(FST),一种空间节省,支...

TiDB ⋅ 22分钟前 ⋅ 0

Kubernetes(六) - Secret和私有仓库认证

对一个公司来说安全也是最为重要的因为可能一旦出现安全问题可能这个公司就完了,所以对密码管理是一个长久不变的话题,Kubernetes对密码管理提供了Secret组件进行管理,最终映射成环境变量,文件...

喵了_个咪 ⋅ 23分钟前 ⋅ 0

DevOps的三大原则

DevOps的出现有其必然性。在软件开发生命周期中,遇到了两次瓶颈。第一次瓶颈是在需求阶段和开发阶段之间,针对不断变化的需求,对软件开发者提出了高要求,后来出现了敏捷方法论,强调适应需...

inidcard ⋅ 24分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部