手机页面底部浮动的按钮

最新推荐文章于 2024-05-16 21:09:48 发布

原创最新推荐文章于 2024-05-16 21:09:48 发布 · 5.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #flex

web前端同时被 3 个专栏收录

17 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍了一个固定的底部提交按钮的设计方案，使用HTML和SASS实现，包括按钮的位置布局、尺寸及颜色等样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提交按钮

html

<div id="footer"> 
     <button>提交</button>
</div>

sass

    #footer {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 10;
        max-width: 750px;    
        width: 100%;
        height: 110px; /*px*/
        // left: 0;
        bottom: 0;
        background:  #fff;
        margin: auto;
        button {
            flex: 0 1 auto;
            width: 80%;
            height: 70%;
            color: #fff;
            background-color: #40B0FC;
            font-size: 35px;
            border-radius: 10px;
            border: none;
            outline: none;

        }
    }