乖兔博客

乖兔 > CMS系统 > CSS > 纯div和css实现右下角固定div

纯div和css实现右下角固定div

乖兔更新于： 2020-11-29 分类：CSS

在制作一些百度竞价落地页或者营销型的企业网站的时候，经常会需要在网页页面右下角展示一个固定的div，里面放置一个form表单供客户填写，用来收集客户信息。

这个功能很实用，并且只需要几行简单的css代码即可实现。

先来看一下纯div和css实现右下角固定div的效果：

用纯div和css实现右下角固定表单.png

纯div和css实现右下角固定div的代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>纯div和css实现右下角固定div</title>
        <style type="text/css">
            .bottomright {
                position: absolute;
                display: block;
                bottom: 0px;
                right: 1px !important;
                right: 18px;
                width: 300px;
                line-height: 30px;
                position: fixed;
                border: 1px solid #fff;
                text-align: center;
                color: #fff;
                background: #efefef;
            }
        </style>
    </head>
    <body>
        <div class="bottomright">
            此处填写你所需要展示的内容
        </div>
    </body>
</html>

以上代码为所需的css样式，可以根据页面的风格修改其配色等，来实现所想要达到的展示效果。除了用于展示表单，还可以用来展示广告和网站公告以及消息通知等内容。

打赏