纯CSS网页右下角二维码悬浮固定位置的方法

原创 程志昂  2017-07-11 11:51:31  阅读 2935 次 评论 0 条

怎么样用CSS在网页的右下角做一个二维码图片的悬浮,始终固定在一个位置上,很简单,因为这就是接下来我要讲到的地方,看下图就是右下角悬浮的固定的二维码展示:

纯CSS网页右下角二维码悬浮固定的方法

首先我们在DW网页中DIV做一个块和图片显示:

纯CSS网页右下角二维码悬浮固定的方法

纯CSS网页右下角二维码悬浮固定的方法

DIV的class自己可以随意编辑,CSS样式代码如下:

.weixin {

position: fixed;

right: 16px;

bottom: 150px;

z-index: 10;

padding: 3px 3px 0 3px;

border-radius: 3px;

border: 1px solid #ddd;

background: #fff;

width: 150px;

}

img {

border: 0;

max-width: 100%;

}

想在左下角显示,只要把right:16px;改成left,左右英文,其它的CSS样式也是如此,更改数值能达到自己想要的效果就可以了。

本文地址:http://www.chengzhiang.com/post/114.html,由程志昂发布,欢迎分享本文,转载请保留出处!

程志昂

发表评论


表情

还没有留言,还不快点抢沙发?