代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 秀站网 > 站长学院 > 建站教程 >

网页模板实现瀑布流效果代码

来源:未知 发布时间:2019-03-30热度: ℃我要评论
对于WEB前端工程师来说,把网站拥有更好的用户体验度,能让用户停留时间,增加PV。现在的网页设计更大气、新颖,就如本站的图片浏览模式,其实就是经典的瀑布流布局,利用的是循环调用后绝对定位的方法,把代码贴出来给大家分享 HTML部分 p id=pbl ul {dede:list pages...

崖柏造假过程模板秀站淘宝店开业,好礼送不停

网页设计瀑布流效果js代码

? ? ? ?对于WEB前端工程师来说,把网站拥有更好的用户体验度,能让用户停留时间,增加PV。现在的网页设计更大气、新颖,就如本站的图片浏览模式,其实就是经典的瀑布流布局,利用的是循环调用后绝对定位的方法,把代码贴出来给大家分享

HTML部分

    

    {dede:pagelist listitem='info,index,end,pre,next,pageno' listsize='5'/}

样式部分

/*瀑布流样式*/
#pbl{width:auto;height:1180px;margin:0 auto;position:relative}
#pbl ul li{position:absolute}
.pblcon{position:relative;}
.pblcon a{display:block;color:#fff}
.pblcon img{width:260px;height:auto}
.pblcon p{position:absolute;bottom:0;left:0;width:100%;height:26px;font-size:14px;line-height:26px;}
.pblcon .bj{position:absolute;bottom:0;left:0;width:100%;height:26px;background:#000;opacity: .5;filter: alpha(opacity=50);-moz-opacity: .5;-khtml-opacity: .5;}

? ? ? ?这样的实现方法比较简单,但是不能做到自适应。本站的是根据用户使用的平台PC或者移动端屏幕尺寸而做相应的自适应CSS样式。最优自适应的瀑布流下载链接:http://pan.baidu.com/s/1nusgaZR 密码:t44g

自适应瀑布流网页效果下载

本文地址:https://www.xiuzhanwang.com/news/1437.html

    责任编辑:秀站网

    发表评论

    评论列表(条)