文档章节

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

rin9958
 rin9958
发布于 2016/06/26 23:55
字数 613
阅读 34
收藏 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
系统级前端开发总结

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

Hui-Lee
2016/11/13
33
0
安装nginx-http-concat 减少http请求

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

liupengv5
2012/12/17
0
0
大话WEB前端性能优化基本套路

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

SFLYQ
2017/07/14
0
0
移动端使用 rem 单位时 css sprites 定位问题

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

幽涯
06/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 到底谁是小公猫……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Trivium的单曲《Throes Of Perdition》 《Throes Of Perdition》- Trivium 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁:...

小小编辑
20分钟前
13
1
基础选择器

注意:本教程参考自网上流传的李兴华老师的jquery开发框架视频,但是苦于没有相应的配套笔记,由我本人做了相应的整理. 本次学习的内容 学习jquery提供的各种选择器的使用,掌握了jquery选择...

江戸川
26分钟前
0
0
Spring中static变量不能@value注入的原因

今天本想使用@Value的方式使类中的变量获得yml文件中的配置值,然而一直失败,获得的一直为null。 类似于这样写的。 public class RedisShardedPool { private static ShardedJedisPool pool...

钟然千落
今天
2
0
CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部