前言
新年到了,看到不少网站都有了新年题材的背景或者对联,自己也试着加了个对联,主要是使用了CSS定位属性position来实现的,代码简单,直接加在网站body中就可以了。
正文
<!--首页浮动对联区--> <style> .left,.right{ width:90px; height:320px; background:none; position:fixed; top:140px; z-index:2; } .left{ left:0; background-image:url(https://www.sgtms.com/usr/themes/sgtms/images/2.png) } .right{ right:0; background-image:url(https://www.sgtms.com/usr/themes/sgtms/images/1.png) } @media(max-width:1300px){ .left{display:none;} .right{display:none;} </style> <div class="left"></div> <div class="right"></div> <!--首页浮动对联区-->
这是我目前使用的,由于存在一个定位,所以我这里加了一个层级定位z-index
,数值越大,越在上方。还有设置了@media
,屏幕宽度大于1300PX 才显示。下面介绍下CSS定位属性,见图:

结语
纯基础代码,菜鸟教程 望笑纳。其实这里没用JS代码也是为了避免与PJAX产生冲突,一如既往地简洁。
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《纯CSS实现网站对联》
文章链接: https://www.sgtms.com/other/81.html
本站资源仅供个人学习交流,转载或者引用本文内容请注明来源及作者,不允许用于商业用途。
文章名称:《纯CSS实现网站对联》
文章链接: https://www.sgtms.com/other/81.html
本站资源仅供个人学习交流,转载或者引用本文内容请注明来源及作者,不允许用于商业用途。
网友评论抢沙发