html5 面包屑,CSS第5款：CSS制作面包屑

﹏ヽ暗。殇╰゛Y 2022-10-09 06:26 155阅读 0赞

一、面包屑简介

描述：面包屑是Web中常见的一个元件，今天使用原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例，感兴趣的可以看看：

二、相关图片

![da7574ad3085358198295930d9893041.png][]

三、DEMO及下载

![demo.png][]![download.png][]

四、源代码

HTML代码：

*  面包屑一
 *  面包屑二
 *  面包屑二

CSS代码：

.demo\{

width:600px;

margin:100px auto;

background:\#f0f0f0;

height:32px;

overflow:hidden;

line-height:32px;

position:relative;

\}

.demo li\{

float:left;

width:200px;

text-align:center;

position:relative;

z-index:2;

font-weight:bold;

font-size:14px;

\}

.demo li em\{

position:absolute;

right:-24px;

top:-8px;

width:0;

height:0;

line-height:0;

border-width:24px 0 24px 24px;

border-color:transparent transparent transparent \#fff;

border-style:dashed dashed dashed solid;

\}

.demo li i\{

position:absolute;

right:-16px;

top:0;

width:0;

height:0;

line-height:0;

border-width:16px 0 16px 16px;

border-color:transparent transparent transparent \#f0f0f0;

border-style:dashed dashed dashed solid;

\}

.demo li.current\{

background:\#f60;

color:\#fff;

z-index:1;

\}

.demo li.current i\{

border-color:transparent transparent transparent \#f60;

\}

[da7574ad3085358198295930d9893041.png]: /images/20221005/999926a0a82a440ca88580ea628f1c6e.png
[demo.png]: http://www.ijquery.cn/images/demo.png
[download.png]: http://www.ijquery.cn/images/download.png

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 面包屑,CSS第5款：CSS制作面包屑

一、面包屑简介描述：面包屑是Web中常见的一个元件，今天使用原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例，感兴趣的可以看看：二、相关图片 ![da75

﹏ヽ暗。殇╰゛Y/ 2022年10月09日 06:26/ 0 赞/ 156 阅读

相关分享9款用HTML5/CSS3制作的动物、人物动画

今天我们要来分享一些设计非常独特的人物和动物动画效果，它们都是通过[HTML5][]和CSS3制作而成，有一些动画是利用纯CSS3实现的，一起来看看。 1、纯CSS3绘制可

浅浅的花香味﹌/ 2022年08月21日 12:51/ 0 赞/ 338 阅读

相关 html5-css样式

案例效果： ![Center][] 样式实现： div{ width:400px;height:400px; border: 2

ゝ一纸荒年。/ 2022年08月21日 11:56/ 0 赞/ 166 阅读

相关面包屑设计

What? 什么是面包屑　　面包屑是作为辅助和补充的导航方式（secondary navigation scheme），它能让用户知道在网站或应用中所处的位置并能方便地回到

港控/mmm°/ 2022年08月06日 15:24/ 0 赞/ 110 阅读

相关纯CSS实现面包屑式导航

参照着[教程][Link 1]做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图： ![221956386835074.jpg][]

柔光的暖阳◎/ 2022年08月06日 12:24/ 0 赞/ 201 阅读

相关 CSS 面包屑导航栏

先看一下效果图 ![导航][20161025094243437] 1.首先写好`HTML`代码 <ul> <li><a href="">Home

青旅半醒/ 2022年07月14日 22:48/ 0 赞/ 246 阅读

相关 HTML5+CSS3

属性选择器完全匹配属性选择器->符号（=) <div id="artcle"></div> <style type="text/cs

男娘i/ 2022年06月08日 06:17/ 0 赞/ 198 阅读

相关 9款用HTML5/CSS3制作的动物、人物动画

今天我们要来分享一些设计非常独特的人物和动物动画效果，它们都是通过HTML5和CSS3制作而成，有一些动画是利用纯CSS3实现的，一起来看看。 1、纯CSS3绘制可爱的蚱蜢

た入场券/ 2022年05月26日 09:17/ 0 赞/ 349 阅读

相关 HTML5、CSS3

HTML5新增标签： 1. 视频 video source <!--视频只支持三种格式MP4 WEBM OGG autoplay自动播放 controls显示暂停

女爷i/ 2022年05月17日 01:20/ 0 赞/ 218 阅读

相关面包屑导航

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator

古城微笑少年丶/ 2022年01月15日 04:33/ 0 赞/ 334 阅读