SGTMS

做事情
我们是认真的
您的位置:SGTMS>其他>纯CSS实现网站对联

纯CSS实现网站对联

前言

新年到了,看到不少网站都有了新年题材的背景或者对联,自己也试着加了个对联,主要是使用了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定位属性,见图:

CSS

结语

纯基础代码,菜鸟教程 望笑纳。其实这里没用JS代码也是为了避免与PJAX产生冲突,一如既往地简洁。

本文最后更新于2019-1-21,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《纯CSS实现网站对联》
文章链接: https://www.sgtms.com/other/81.html
本站资源仅供个人学习交流,转载或者引用本文内容请注明来源及作者,不允许用于商业用途。
分享到:

相关推荐

网友评论抢沙发

路人甲 表情
Ctrl+Enter快速提交