您的位置:易学堂>代码教程>纯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.qqeg.cn/usr/themes/pinghsu/images/2.png)
}
.right{
    right:0;
    background-image:url(https://www.qqeg.cn/usr/themes/pinghsu/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定位属性,见图:

1826842916.png

结语

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

转载请注明本文标题和链接:《纯CSS实现网站浮动对联

相关推荐

网友评论抢沙发

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