一个最骚的面包屑导航

最新推荐文章于 2025-02-15 23:09:45 发布

code-jam

最新推荐文章于 2025-02-15 23:09:45 发布

阅读量10w+

点赞数 4

分类专栏：前端文章标签：优雅的面包屑导航 html css面包屑导航 css3 面包屑导航风骚的面包屑导航伪类面包屑导航

本文链接：https://blog.csdn.net/festone000/article/details/93222075

版权

前端专栏收录该内容

25 篇文章

订阅专栏

代码没几行，直接先上图。
代码如下图：
在这里插入图片描述
效果如下图：

当然，如果觉得效果过于单薄的话，可以在li标签里增加a标签什么的，然后给a标签样式，hover样式等等。
但显然关键点就是图中部分了。

为了可以直接复制粘贴，代码放一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul > li{
        display: inline-block;        
    }
    ul > li + li::before{
        content: ">";
    }
</style>
<body>
    <ul>
        <li>中国大陆</li>
        <li>广东</li>
        <li>深圳</li>        
        <li>龙华区</li>
    </ul>
</body>
</html>

为什么会是这个样子呢？分析一下。
两个关键点，一个是伪类/伪元素的应用，一个是content的用法，当然还可以说有+选择器的用法。
css + 选择器
http://www.w3school.com.cn/cssref/css_selectors.asp
在这里插入图片描述
伪类/伪元素以及content属性
伪元素，就是“虚拟”出一个元素来，并可指定样式、content内容等。
ps：content也不见得只能是普通字符串，比如你需要一个图片做伪元素，可以指定为url(xxx.jpg),如下：

.content-footer-left > a:before {
        content: url("images/lt_hf.png");
        display: inline-block;
        position: relative;
        top: 4px;
        margin-right: 10px;
    }

适合模拟这样的，如下图(图中那个小图标，用伪元素就在合适不过了，而且content可直接指定img的url):
在这里插入图片描述

完毕，我觉得很风骚了。

补充一下一个content取值的用法。

<style>
a:after
{content: " (" attr(href) ")"
}
</style>
<body>
	<a href="http://www.sina.com.cn">Sina</a> 
</body>

效果就是取了此元素的attr属性，作为伪元素的content显示，一试便知。

扩展阅读:
https://www.cnblogs.com/liangxiblog/p/5981180.html
https://www.cnblogs.com/mycoke/p/6056187.html