搜索
首页web前端css教程自定义 Bootstrap 读取导航 - 版本 2

自定义 Bootstrap 读取导航 - 版本 2

DDD
DDD
Sep 18, 2024 pm 08:24 PM

Bootstrap 5 框架的自定义面包屑

摘要：我们正在展示自定义 Bootstrap 5 面包屑的代码 (CSS)。这是之前发表的文章的改进版本。

1 需要更好的面包屑

Bootstrap 5 框架附带了非常基本的面包屑实现。我需要更好的东西，无论是视觉上还是功能上。随着时间的推移，在我的应用程序中，我发现使用面包屑非常有用，可以让用户在深入了解特定项目/对象的详细信息后返回到更高级别。

对我来说非常重要的是能够呈现两行文本数据，特别是在我显示一些数据和 ID 的情况下，例如指示某个帐户的数据，同时提供帐号。

我对在互联网上看到的解决方案不满意，所以我开发了自己的解决方案。

虽然标题说这是一个“Bootstrap 5”库，但它完全独立于 Bootstrap CSS，并且仅从 Bootstrap CSS 中获取选定的颜色以与 Bootstrap 5 主题保持一致。如果您愿意，可以独立于 Bootstrap 使用它。

1.1 本版本变化

此版本合并了来自 Graeme_Grant@codeproject.com 的建议和代码，以使代码更短。我不一定同意所有建议，因为我认为代码的人类可读性比较短的代码更重要。所以，我制作了自己的新版本。

此外，此版本使用 Bootstrap Icons [1] 而不是 Font Awesome 图标。

2 最终结果

这是最终结果以及生成它的演示代码。我创建了 3 种尺寸（大、中、小）的面包屑条，并可选择使用图标。可以随意选择颜色，并且默认情况下会出现悬停效果，除非明确禁用。最后一个面包屑的悬停效果通常会被禁用，因为这是当前有效的选择。

Custom Bootstrap readcrumbs -Ver 2

这是生成上述渲染的 HTML 代码。任何 Web 开发人员都应该能够阅读 HTML 代码并将其与上图匹配，以找到他/她喜欢的变体。

如果您想使用图标，可以安装免费版本的 Bootstrap Icons [1]，并参考它，类似于本例中的操作方式。用于图标使用的 HTML 代码有点复杂，因为我们需要将图标和文本分成 2 个单独的元素，以便它们可以独立设置样式。




    <link rel="stylesheet" href="breadcrumb3.css">
    <!-- Download bootstrap icons from https://icons.getbootstrap.com/#install  
        and install -->
    <link rel="stylesheet" href="bootstrap-icons-1.11.3%5Cfont%5Cbootstrap-icons.min.css">



    <!--Large size --------------------------------------------------------------->
    <h5 id="Large-size-info-case">Large size, info case</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Large-size-info-case-with-no-hover-effect-on-the-last-button">Large size, info case, with no hover effect on the last button</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Large-size-Rainbow">Large size, Rainbow</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Large-size-icons-usage">Large size, icons usage</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

    <!--Medium size --------------------------------------------------------------->
    <h5 id="Medium-size-info-case">Medium size, info case</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Medium-size-info-case-with-no-hover-effect-on-the-last-button">Medium size, info case, with no hover effect on the last button</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Medium-size-Rainbow">Medium size, Rainbow</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Medium-size-icons-usage">Medium size, icons usage</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

    <!--Small size --------------------------------------------------------------->
    <h5 id="Small-size-info-case">Small size, info case</h5>
    <div class="breadcrumb3-sm ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Small-size-info-case-with-no-hover-effect-on-the-last-button">Small size, info case, with no hover effect on the last button</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Small-size-Rainbow">Small size, Rainbow</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Small-size-icons-usage">Small size, icons usage</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

3 面包屑 CSS

这里是 CSS，不需要 JavaScript。我故意使用类名“breadcrumbs3”以避免与Bootstrap 5原始类的名称冲突。

/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com, 
   using partly code from Graeme_Grant@codeproject.com  */

.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
    /* colors taken from bootstrap.css Bootstrap v5.1.0 */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-gray: #6c757d;
    --bs-white: white;
    --bs-black: black;

    /* changeable colors */
    --_bgcolor: var(--bs-info);
    --_color: var(--bs-black);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

@media (max-width: 767px) {
    /* making it responsive, using CSS Flexbox with column (vertical) direction*/
    .breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

    .breadcrumb3-lg  .breadcrumb3-item {
        width: 80% ;
        border-radius: 4px 0 0 4px;
        padding-left: 25px ;
    }

    .breadcrumb3-md .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 20px ;
    }

    .breadcrumb3-sm .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 18px ;
    }
}

/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: var(--_bgcolor);
    height: 40px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 15px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_arrowbordercolor);
    margin-left: 1px;
    z-index: 2;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid var(--_bgcolor);
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
    border-left-color: var(--_hover-bgcolor);
}

/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
  outline: none;
}

/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
    height: 32px;
    line-height: 15px;
    font-size: 15px;
    padding-left: 20px;
}

.breadcrumb3-md .breadcrumb3-icon {
    line-height: 20px;
    font-size: 20px;
    padding-right: 7px;
}

.breadcrumb3-md .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 12px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_arrowbordercolor);
    margin-top: -16px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_bgcolor);
    margin-top: -16px;
}

/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
    height: 24px;
    line-height: 11px;
    font-size: 11px;
    padding-right: 8px;
    padding-left: 18px;
}

.breadcrumb3-sm .breadcrumb3-icon {
    line-height: 16px;
    font-size: 16px;
    padding-right: 5px;
}

.breadcrumb3-sm .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 10px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_arrowbordercolor);
    margin-top: -12px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_bgcolor);
    margin-top: -12px;
}

/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-info);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-primary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-success);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-warning);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-success);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-secondary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-light);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-danger);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

4 CSS 的工作原理

这里我们将给出一些关于 CSS 如何工作的提示，尽管这是非常简单的 CSS 代码，而且大部分都是不言自明的。

4.1 用CSS制作三角形的技巧

这里使用了一个关于如何使用 CSS 制作三角形的非常流行的技巧。重点是滥用 CSS 渲染边框的能力，使其渲染出三角形的边框。为此，您可以创建一个宽度和高度为零的块元素，并在一侧设置彩色边框（充当箭头），并在相邻的两侧设置两个透明边框。

4.2 为 CSS 三角形创建边框的技巧

由于三角形本身就是一个边框，所以我们不能在它上面创建边框。因此，在三角形/箭头上创建边框的技巧是创建 2 个三角形，并以最小的偏移量渲染一个三角形。这样我们就创建了边框外观。

你可以查看选择器 (.breadcrumb3-item:after) 和 (.breadcrumb3-item:before) 中的 CSS 代码，你会看到我们创建了 2 个三角形，一个是灰色的，一个是信息颜色的。仔细查看第一个 (margin-left: 1px; z-index: 2;) 和第二个 (margin-left: 0px; z-index: 3;) 的 CSS 规则。您可以看到第二个三角形相对于第一个三角形有轻微的偏移和渲染。

伪元素（:before、:after）的目的只是将这些三角形附加到 .breadcrumb3-item 元素。

4.3 教程示例

这里我们将提供一个教程示例代码，只是为了展示三角形是如何创建的。这是教程代码：




    <style>
        .test1 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test1:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid red;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid red;
            left: 100%;
            top: 50%;
            border-left: 15px solid gray;
            margin-left: 1px;
            z-index: 2;
        }

        .test2 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test2:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid transparent;
            left: 100%;
            top: 50%;
            border-left: 15px solid gray;
            margin-left: 1px;
            z-index: 2;
        }

        .test3 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test3:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid transparent;
            left: 100%;
            top: 50%;
            border-left: 15px solid blue;
            margin-left: 0px;
            z-index: 3;
        }
    </style>



    <div class="test1">
        Note how gray arrow is created from red border
    </div>
    <br>
    <div>
        Now we will change red to transparent to keep just arrow
    </div>
    <br>
    <div class="test2">
        Now we have only gray arrow, with 1 pixel offset to the right
    </div>
    <br>
    <div class="test3">
        Similarly we have blue arrow, without that offset
    </div>
    <br>
    <div class="test2 test3">
        Now we overlap 2 arrows, to get border effect for the arrow
    </div>

这是执行结果：

Custom Bootstrap readcrumbs -Ver 2

任何更好的程序员都应该能够将代码示例与生成的结果相匹配。

5 Bootstrap 图标的使用

为您的应用程序找到合适的 Bootstrap Icons 图标可能看起来很复杂，但实际上非常简单。图标按关键字索引，因此您需要首先搜索关键字，然后选择（在本示例中免费）感兴趣的图标，然后将其 ID 类复制到您的应用程序中。以下是显示该过程的屏幕截图。

Custom Bootstrap readcrumbs -Ver 2

Custom Bootstrap readcrumbs -Ver 2

6 参考文献

[1] https://icons.getbootstrap.com/#install

以上是自定义 Bootstrap 读取导航 - 版本 2的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
什么是CSS网格？什么是CSS网格？Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂，响应式Web布局的强大工具。它简化了设计，提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox？什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应？我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架

CSS盒装属性有什么作用？CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画？我们如何使用CSS动画？Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS，关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗？我们可以使用CSS向我们的项目添加3D转换吗？Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换，关键属性，浏览器兼容性和性能注意事项的讨论。（角色计数：159）

我们如何在CSS中添加梯度？我们如何在CSS中添加梯度？Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度（线性，径向，重复）来增强网站视觉效果，添加深度，焦点和现代美学。

CSS中的伪元素是什么？CSS中的伪元素是什么？Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素，它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055523无法在Windows 11中安装？
3 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
3 周前ByDDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：死铁路 - 如何驯服狼
3 周前ByDDD
<🎜>：种植花园 - 完整的突变指南
2 周前ByDDD
显示更多

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

显示更多

热门话题

Java教程
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
显示更多