HTML网页悬浮按钮

苦力怕qyby

已于 2023-02-16 15:30:58 修改

阅读量2.3k

点赞数 2

文章标签： css3 前端 css Powered by 金山文档

于 2023-02-16 10:44:50 首次发布

本文链接：https://blog.csdn.net/FYH003/article/details/129056432

版权

使用position:fixed定位实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮按钮</title>
    <style>
        /*设置按钮的width:宽度; height:高度; background:颜色; position:固定位置; right:离右边的距离; top:离上边的距离; margin:外边距;border-radius:圆角;*/
        .f {width:60px; height:60px; background:#b6dbf5; position:fixed; right:30px; top:600px; margin:0px;border-radius:30px;}
        .f:hover {background:#fffffb; cursor:pointer;}
    </style>
</head>
<body>
    <!--使用一个表格支撑页面-->
    <table width="100%">
        <tr>
            <td width="100%" height="600">
                <h1>按钮在右下角显示，不会跟随页面滚动</h1>
            </td>
        </tr>
        <tr>
            <td height="600"><h1>占位符</h1></td>
        </tr>
        <tr>
            <td height="600"><h1>占位符</h1></td>
        </tr>
        <tr>
            <td height="600"><h1>占位符</h1></td>
        </tr>
        <tr>
            <td height="600"><h1>END</h1></td>
        </tr>
    </table>
    <div>
        <!--使用<input>生成按钮-->
        <a href="https://www.baidu.com/"><input class="f" type="button" value="baidu"></a>
    </div>
</body>
</html>