js实现淘宝首页的banner栏效果

2023-08-07 09:58:04 216

@charset"UTF-8"; body{ font-size:12px; font-family:"宋体"; } .clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clearfix{zoom:1;} *{ padding:0; margin:0; } img{ vertical-align:text-top; } ulli{ list-style:none; } a{ text-underline:none; text-decoration:none; color:#fff; font-weight:bold; } .bg{ width:850px; margin:0auto; height:291px; border:1pxsolid#f2f2f2; background:#fff; } .title{ display:flex; flex-direction:column; width:100px; height:100%; float:left; } .title>a{ width:100%; display:flex; flex:auto; justify-content:center; align-items:center; background:#ccc; color:#000; font-size:16px; border-bottom:1pxsolid#fff; text-align:center; } .title>a:last-of-type{ border-bottom:none; } ul{ float:left; } ulli{ position:relative; display:none; } ul>li>img{ display:none; } ul.active{ display:block; } ul>li>h3{ position:absolute; width:100%; bottom:0; left:0; display:flex; } ul>li>h3>a{ flex:auto; padding:10px0; justify-content:center; align-items:center; text-align:center; border-right:1pxsolid#fff; background:cornflowerblue; } ul>li>h3>a:last-of-type{ border-right:none; } .title.on{ background:#fff; } li>h3.hov{ background:brown; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现淘宝首页的banner栏效果

优惠1 优惠2 优惠3 优惠4

优惠1 优惠2 优惠3 优惠4

优惠1 优惠2 优惠3 优惠4

优惠1 优惠2 优惠3

随机推荐

js实现淘宝首页的banner栏效果

优惠1 优惠2 优惠3 优惠4

优惠1 优惠2 优惠3 优惠4

优惠1 优惠2 优惠3 优惠4

优惠1 优惠2 优惠3

热门推荐

随机推荐