css实现面包屑效果

bbkkkk

已于 2023-04-20 15:23:21 修改

阅读量400

点赞数

分类专栏：全栈之路-前端文章标签： css html javascript

于 2023-04-20 15:22:56 首次发布

本文链接：https://blog.csdn.net/bbkkkk/article/details/130267631

版权

全栈之路-前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一个带箭头箭尾的面包屑导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>面包屑示例</title>
    <!-- <script src="./asserts/js/jquery-3.6.3.min.js"></script> -->
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .bread ul,
      li {
        list-style: none;
      }

      .bread .box {
        position: relative;
        margin: 100px auto;
        background: #ccc;
        width: 600px;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
      }

      .bread .box li {
        float: left;
        width: 200px;
        text-align: center;
        position: relative;
        z-index: 2;
      }

      .bread .box li em {
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #fff;
        border-style: dashed dashed dashed solid;
        border-width: 24px 0 24px 24px;
        position: absolute;
        right: -24px;
        top: -8px;
        line-height: 0;
        font-size: 0;
      }

      .bread .box li i {
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #ccc;
        border-style: dashed dashed dashed solid;
        border-width: 16px 0 16px 16px;
        position: absolute;
        right: -16px;
        top: 0;
        line-height: 0;
        font-size: 0;
      }

      .bread .box li.current {
        background: #933;
        z-index: 1;
      }

      .bread .box li.current i {
        border-color: transparent transparent transparent #933;
      }
    </style>
    <script type="text/javascript"></script>
  </head>
  <body>
    <div class="bread">
      <div class="box">
        <ul>
          <li>首页<em></em><i></i></li>
          <li>文章列表<em></em><i></i></li>
          <li class="current">当前内容<em></em><i></i></li>
        </ul>
      </div>
    </div>
  </body>
</html>