A-A+

最简单实用的二维码悬挂添加

2015年03月19日 seo 暂无评论

QQ20141119233635QQ20141119233635 和许多人一样 如果不懂代码 要想实现代码效果 下面为大家提供一段代码

操作起来有些复杂

如果想做有不懂的 可以QQ联系我 右边有联系方式

实际效果

另外对于CSS不熟悉的朋友建议用以上两张图片的尺寸 因为如果尺寸修改的话 会导致功能错位 然后二维码可以通过Photoshop 自己修改大小

以上图片 大小为122*338px 另一张35*12px

制作流程:

1、先准备一张精美的图片,例如目前最流行的微信二维码,另外把下面的关闭按钮图片保存下来,上传到主题目录的images文件夹里。

关闭按钮QQ20141119234333

2、把下面代码复制到CSS样式表里,把width:120px中的120改成你自己图片的宽度,把height:240px里的240改成你图片的高度,把url(“images/suspension.png)里的images/suspension.png换成你图片的相对地址。

QQ20141119234333

/*announcement_box*/
.announcement_box { padding-top:100px;position:fixed;right:10px;top:60%;}
#announcement { height:25px; line-height:25px; overflow: hidden; padding: 5px 10px 5px 20px; float:left; }
.announcement_remove { width:120px;height:338px;background:url("images/ad.jpg.png") no-repeat;padding-top:100px;position:fixed;left:10px;top:40%; }
#announcement_close { padding-top:100px;position:fixed;left:14px;top:22%; }

注:如果想把图片放在右边的话,把left:10px中的left改成right即可。top:40%中的60是指这张图片距离网站顶部的高度。
3、在网站的底部文件footer.php的body结束标签之前添加如下调用代码。

/*announcement_box*/
.announcement_box { padding-top:100px;position:fixed;right:10px;top:60%;}
#announcement { height:25px; line-height:25px; overflow: hidden; padding: 5px 10px 5px 20px; float:left; }
.announcement_remove { width:120px;height:240px;background:url("images/kefu.png") no-repeat;padding-top:100px;position:fixed;left:10px;top:40%; }
#announcement_close { padding-top:100px;position:fixed;left:14px;top:22%; }

3、在网站的底部文件footer.php的body结束标签之前添加如下调用代码。

如果不想有关闭功能 以下代码不必理会

标签:
Profile photo of kakaxi

给我留言

这是弹窗口

跳至工具栏