网站叠层视觉特效
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>列表-叠层展示效果样式</title><link rel="stylesheet" type="text/css" href="./static/www/css/style.css"/><link rel="stylesheet" type="text/css" href="./static/www/js/chajian/layui/css/layui.css"/><script src="./static/www/js/chajian/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body> <div id="a_index" class="container-fluid a_mian a_case"><div id="listCase" class="layui-tab layui-tab-card"><ul class="layui-tab-title anli_ul fixbox_case"><li class="current layui-this"><a href="/" style="color: #000 !important;">全部案例</a></li><li class=""><a href="/?id=#">案例分类1</a></li><li class=""><a href="/?id=#">案例分类2</a></li><li class=""><a href="/?id=#">案例分类3</a></li><li class=""><a href="/?id=#">案例分类4</a></li><li class=""><a href="/?id=#">案例分类5</a></li><li class=""><a href="/?id=#">案例分类6</a></li></ul><div class="layui-tab-content anli_cen"><div class="layui_tab_content_fixtab"><ul><a href="/"><li><i style="display: block;"></i><p style="color: red !important;font-weight: bold;">案例二级分类1</p></li></a><a href="/"><li><i style="display: block;"></i><p>案例二级分类2</p></li></a></ul></div><div class="layui-tab-item layui-show"><a href="#1"><div class="anli_one" style="background-image:url(./images/1.jpg);"><p>1<br/><span>111111111111111111</span></p></div></a><a href="#2"><div class="anli_two" style="background-image:url(./images/2.jpg);"><p>2<br/><span>22222222222</span></p></div></a><a href="#3"><div class="anli_one" style="background-image:url(./images/3.jpg);"><p>3<br/><span>33333333333333</span></p></div></a><a href="#4"><div class="anli_two" style="background-image:url(./images/4.jpg);"><p>4<br/><span>4444444444444444</span></p></div></a><a href="#5"><div class="anli_one" style="background-image:url(./images/5.jpg);"><p>5<br/><span>555555555555</span></p></div></a><a href="#6"><div class="anli_two" style="background-image:url(./images/6.jpg);"><p>6<br/><span>66666666666</span></p></div></a><a href="#7"><div class="anli_one" style="background-image:url(./images/7.jpg);"><p>7<br/><span>777777777777</span></p></div></a> <a href="#8"><div class="anli_two" style="background-image:url(./images/8.jpg);"><p>8<br/><span>888888888888</span></p></div></a></div></div> </div></div>
</body>
</html>
附：style.css
/*# sourceURL=/static/www/css/style.css *//*@ sourceURL=/static/www/css/style.css */html {font-size: 100px;
}body {/*overflow:-Scroll;*/overflow-x: hidden
}#a_index .section {overflow: hidden;
}#a_index .fp-tableCell {display: block;
}#a_index .box {width: 100%;height: 100%;position: relative;top: 0;left: 0;color: #fff;text-align: center;
}#a_index .footer {background: none;position: absolute;bottom: 0;width: 100%;
}.a_case .a_anli {padding: 0.3rem;
}
.layui-tab{margin: 0 !important;
}
.layui-tab-content{padding: 0 !important;
}
.layui-tab-card{border-width: 0px !important;
}
.anli_fixed{position: fixed;top: 1.06rem;
}
.layui-tab-title{border-bottom-width: 0px !important;
}
.layui-tab-card>.anli_ul{width: auto;height: 68px;line-height: 68px;margin: 0 auto;background: #181818 !important; text-align: center;z-index: 99;top:0
}
.layui-tab-card>.anli_ul li{width: 7%;height: 100%;line-height: 68px;
}
.layui-tab-card>.dianwang_ul li{width: 9%;height: 100%;line-height: 68px;
}
.layui-tab-card>.anli_ul li:hover{width: 7%;height: 100%;line-height: 68px;background-image: url(/static/www/img/anli/anniu_bg.jpg);background-size: 100% 100%;
}
.layui-tab-card>.anli_ul .layui-this{width: 7%;height: 100%;background: transparent;line-height: 68px;background-image: url(/static/www/img/anli/anniu_bg.jpg);background-size: 100% 100%;border-width: 0px !important;
}
.layui-tab-card>.dianwang_ul li:hover{width: 9%;height: 100%;line-height: 68px;background-image: url(/static/www/img/anli/anniu_bg.jpg);background-size: 100% 100%;
}
.layui-tab-card>.dianwang_ul .layui-this{width: 9%;height: 100%;background: transparent;line-height: 68px;background-image: url(/static/www/img/anli/anniu_bg.jpg);background-size: 100% 100%;border-width: 0px !important;
}
.layui-tab-title .layui-this:after{display: none;
}
.layui-tab-title li{min-width: auto !important;
}
.layui-tab-title li a{color: #FFFFFF !important;
}
.anli_one{width: 100%;/*background-image: url(/static/www/img/anli/anli_1.jpg);*/padding-bottom: 6rem;position: relative;background-size: 100% 100%;background-repeat: no-repeat;
}
.anli_one p{font-size: 24px;color: #ffffff;position: absolute;right: 15.5%;bottom: 120px;text-align: right;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.anli_one p span{font-size: 20px;color: #ffffff;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.anli_two{width: 100%;/*background-image: url(/static/www/img/anli/anli_22.jpg);*/padding-bottom: 6rem;position: relative;background-attachment: fixed;background-size: 100% 100%;background-repeat: no-repeat;
}
.anli_two p{font-size: 24px;color: #ffffff;position: absolute;left: 12.7%;bottom: 110px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.anli_two p span{font-size: 20px;color: #ffffff;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.layui_tab_content_fixtab {width: 190px;z-index: 1; background: url('./images/anli_fix_tabs.png') no-repeat center center;background-size: 100% 100%; position: absolute; top: 150px;left: 0;z-index: 1;}
.layui_tab_content_fixtab ul li p {color: #fff;}
.layui_tab_content_fixtab {padding: 40px 35px 40px 30px; box-sizing: border-box;}
.layui_tab_content_fixtab ul li {display: flex;align-items: center;padding: 12px 0;cursor: pointer;}
.layui_tab_content_fixtab ul li i {width: 16px;height: 17px;margin-right: 10px;}
.layui_tab_content_fixtab ul li.active i {background: url('./images/anli_icon.png') no-repeat;}
.layui_tab_content_fixtab ul li.active p {color: #D8A667;}
.fixednav {position: fixed;top: 80px;}@media screen and (max-width:900px) {.layui_tab_content_fixtab {top:150px}.fixednav {position: fixed;top: 57px;}
}@media (max-width: 767px){ /*案例*/.anli_one{padding-bottom:4rem !important;}.anli_one p{bottom:1.2rem !important;}.anli_two{padding-bottom:4rem !important;background-attachment: scroll !important;}.anli_two p{width: 85% ;bottom:1.2rem !important;}.fixednav{top: 1.42rem;}.layui-tab-card>.anli_ul{height:auto !important;line-height: 48px !important;}.layui-tab-card>.layui-tab-title .layui-this{margin-top: -1px;}.layui-tab-card>.anli_ul .layui-this{/* height: 48px !important; *//* line-height: 48px !important; */}.layui-tab-card>.anli_ul li{line-height: 48px !important;}.anlibanner_onep{bottom:1.2rem;left:-11%;}/*footer*/.footer dl dd{text-align: center;}.footer dl dd img{width: 60%;margin-left: 0.6rem;}.wx_tubiao{margin-right: 0.3rem;}
}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！