【HTML+CSS】使用CSS中的Position与z-index轻松实现一个简单的自定义标题栏效果

news2024/11/25 13:01:02

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

效果如下

代码如下

<style type="text/css">

    .title {
        /*border: 1px solid red;*/
        width: 640px;
        margin: 100px auto;
        position: relative;
    }

    .title > .bar {
        width: 640px;
        background: #efefef;
        overflow: hidden;
    }

    .title > .bar > .color-block-1, .title > .bar > .color-block-2 {
        width: 111px;
        height: 12px;
        background: #00b38c;
        float: left;
        background-image: linear-gradient(to right, #5fbca9 , #00b38b);
    }

    .title > .bar > .color-block-2 {
        width: 12px;
        margin-left: 12px;
    }

    .title > h3 {
        font-size: 32px;
        font-weight: normal;
        color: #00b38b;
        position: absolute;
        left: 30px;
        top: -32px;
        margin: 0px;
        padding: 0px;
        z-index: -1;
    }

    .title>p{
        margin: 0px;
        font-size: 20px;
        padding-top: 10px;
        color: #00b29b;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
</style>


<!--自定义标题栏-->
<div class="title">
    <div class="bar">
        <div class="color-block-1"></div>
        <div class="color-block-2"></div>
    </div>
    <h3>1</h3>
    <p>把你的title文字写在这里...</p>
</div>


<!--自定义标题栏-->
<div class="title">
    <div class="bar">
        <div class="color-block-1"></div>
        <div class="color-block-2"></div>
    </div>
    <h3>2</h3>
    <p>把你的title文字写在这里...</p>
</div>


<!--自定义标题栏-->
<div class="title">
    <div class="bar">
        <div class="color-block-1"></div>
        <div class="color-block-2"></div>
    </div>
    <h3>3</h3>
    <p>把你的title文字写在这里...</p>
</div>