当前位置： 文江博客话题详情

创建“导航面包屑”

发布于 2024-12-18 14:54:27 字数 216 浏览 0 评论 0原文

我想知道如何使用 CSS/CSS3 和 HTML 获得它。这怎么能做到呢？

输入图片这里的描述

正如你所看到的，我指出了 3 个导航面包屑。

原文

I am wondering how I am able to obtain this with CSS/CSS3 and HTML. How can this be done?

enter image description here

As you can see, I pointed out the 3 navigation breadcrumb.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

不回头走下去 2024-12-25 14:54:27
<!DOCTYPE html>
<html>

<head>

    <style type="text/css">
        html{
            background:#222;
            font-size:12px;
            font-family:Arial;
        }

        ul#breadcrumbs{         
            list-style:none;
            /* optional */
            margin:100px;
            padding:10px 2px 10px 10px;
            background:#000;
            width:295px;
            height:30px;
            border-radius:5px;
            border:1px solid #222;
            -moz-box-shadow:0 0 3px 0 #000;
        }
        ul#breadcrumbs li{
            float:left;
            background:#93ce68 url(bg.png)no-repeat right;
            height:30px;
            padding:0 23px 0 10px;
            text-align:center;
            text-decoration:none;
            color:#000;
            line-height:32px;
        }
        ul#breadcrumbs li.active{
            background:url(bg.png)no-repeat right;
            color:#000;
        }
        ul#breadcrumbs li a{
            display:block;
            text-decoration:none;
            color:#fff;
            line-height:32px;
            text-shadow:0 0 2px #222;
        }
        ul#breadcrumbs li a:hover{
            color:#a2ff00;
        }

    </style>

</head>

<body>

    <ul id="breadcrumbs">
        <li><a href="">Home</a></li>
        <li><a href="">Page1</a></li>
        <li><a href="">Page2</a></li>
        <li class="active">About Us</li>
    </ul>



</body>
</html>

在此处输入图像描述

将图像保存在 html 根目录中，并使用 ul 的clearfix 来清除 li 浮点值。如果您使用 CSS 边框技术，可能会在某些浏览器中呈现模糊边框。
希望它能解决您的疑问。

<!DOCTYPE html>
<html>

<head>

    <style type="text/css">
        html{
            background:#222;
            font-size:12px;
            font-family:Arial;
        }

        ul#breadcrumbs{         
            list-style:none;
            /* optional */
            margin:100px;
            padding:10px 2px 10px 10px;
            background:#000;
            width:295px;
            height:30px;
            border-radius:5px;
            border:1px solid #222;
            -moz-box-shadow:0 0 3px 0 #000;
        }
        ul#breadcrumbs li{
            float:left;
            background:#93ce68 url(bg.png)no-repeat right;
            height:30px;
            padding:0 23px 0 10px;
            text-align:center;
            text-decoration:none;
            color:#000;
            line-height:32px;
        }
        ul#breadcrumbs li.active{
            background:url(bg.png)no-repeat right;
            color:#000;
        }
        ul#breadcrumbs li a{
            display:block;
            text-decoration:none;
            color:#fff;
            line-height:32px;
            text-shadow:0 0 2px #222;
        }
        ul#breadcrumbs li a:hover{
            color:#a2ff00;
        }

    </style>

</head>

<body>

    <ul id="breadcrumbs">
        <li><a href="">Home</a></li>
        <li><a href="">Page1</a></li>
        <li><a href="">Page2</a></li>
        <li class="active">About Us</li>
    </ul>



</body>
</html>

enter image description here

Save image in root of html and use clearfix for ul to clearing li float value. if you use CSS border technique, that may render blurry border in some browser.
Hope it will solve your query.

回复 原文
痴者 2024-12-25 14:54:27

我自己只需要这个...我发现的只是带有大量 ::before & 的示例。 ::after 伪元素。但我想尝试一下新的掩蔽技术。没有找到，所以我自己将其组合在一起：

注意：这不是我做过的最漂亮的一个，但它具有使用 clip-path 这是实验性的，所以不要指望它能工作。我只在 chrome 中测试过这个

帮助我做到这一点的一个很棒的工具是 clippy
只需修改一些点 (x, y) 从右侧进行数学计算 - 箭头的宽度 >

/* Make the hole background black (since it's hard to simulate a border around the arrow head)*/
#breadcrumb {
  background: black;
  display: inline-block;
  padding: 1px;
  padding-right: 18px;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

#breadcrumb a {
  display: inline-block;
  background: gray;
  padding: 5px 30px 5px 30px;
  position: relative;
  text-decoration: none;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  margin-right: -17px;
}

/* Just to show that even around the arrow head, the mouse pointer is at the correct link */ 
a:hover {
  color: red;
}

/* first link should not have anything cliped on the left side */
#breadcrumb a:first-child {
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  padding-left: 20px;
}
<nav id="breadcrumb">
  <a href="#1">Home</a>
  <a href="#2">Contact</a>
  <a href="#3">Some extra long name</a>
  <a href="#4">Email</a>
</nav>

Just needed this myself... All i found was examples with lots of ::before & ::after pseudo elements. But I wanted to try out the new masking technic. Didn't find any, So I hacked together this myself:

Note: It's not the prettiest one that I have done, But it has the structural part needed to solve it using clip-path It's experimental so don't count for this to work. I have only tested this in chrome

A awesome tool that helped me make this was clippy
Just had to modify some points (x, y) to be mathematically calculated from the right side - the width of the arrow head >

/* Make the hole background black (since it's hard to simulate a border around the arrow head)*/
#breadcrumb {
  background: black;
  display: inline-block;
  padding: 1px;
  padding-right: 18px;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

#breadcrumb a {
  display: inline-block;
  background: gray;
  padding: 5px 30px 5px 30px;
  position: relative;
  text-decoration: none;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  margin-right: -17px;
}

/* Just to show that even around the arrow head, the mouse pointer is at the correct link */ 
a:hover {
  color: red;
}

/* first link should not have anything cliped on the left side */
#breadcrumb a:first-child {
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  padding-left: 20px;
}
<nav id="breadcrumb">
  <a href="#1">Home</a>
  <a href="#2">Contact</a>
  <a href="#3">Some extra long name</a>
  <a href="#4">Email</a>
</nav>

回复 原文
~没有更多了~

关于作者

分开我的手

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

daid

文章 0 评论 0

我心依旧

文章 0 评论 0

晒暮凉

文章 0 评论 0

微信用户

文章 0 评论 0

DS

文章 0 评论 0

〆凄凉。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文