分享一个html顶部悬浮条+底部悬浮按钮（用于点击咨询提示按钮）

分享一个顶部悬浮条+底部悬浮按钮，顶部悬浮图带logo和内容+按钮，底部是一个宽度占满的按钮

<!--代码-->
<style>

    .d-header {
        position: fixed;
        top: 20px;
        left: 0;
        width: 95%;
        height: 110px;
        background-color: #f7d190; /* 灰黄色背景 */
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
        background: url(/skin/images/tcdk@2x.png) no-repeat;
        background-size: 100% 110px; /* 使背景图宽度占满容器，高度自适应 */
        display: flex;
        align-items: center;
        padding: 0 10px;
        z-index: 1000;
    }
    .d-icon {
        width: 10%;
    }
    .d-content {
        width: 65%;
        text-align: left;
        margin-left:15px;
    }
    .d-button {
        width: 25%;
        text-align: right;

    }
    .d-button a {
        text-decoration: none;
        color: #ffffff;
        background-color: #007bff;
        padding: 10px 15px;
        border-radius: 5px;

    background: linear-gradient(180deg,#eb9f3f,#d55e04);
    border-radius: 4px;
    text-align: center;
    line-height: 28px;
    color: #fff;
    }  
    .d-dbt{
        position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #f5303a;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    z-index:9998;

    }
</style>

<div class="d-header">
    <div class="d-icon">
        <img src="data:image/png;base64,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" alt="Icon" style="width: 100%; height: auto;">
    </div>
    <div class="d-content">
        <p style="color:#6d3007;">提示:</p>
        <p style="color:#666;">提示内容</p>
    </div>
    <div class="d-button">
        <a href="/skin/html/we.html">请教老师</a>
    </div>

  </div>

  <div style="margin-top:130px;"></div>

  <a href="/skin/html/we.html"><div class="d-dbt">查看更多</div></a>
<!--代码-->

花纹图片素材