废话不多说,直接上原理与代码。
1.首先布局,左右联动即左右布局。
左边导航用 宽度限制+高度限制+浮动+绝对定位,右边 宽度限制+浮动
.divNav{
width: 19%;float: left;background: #F6F9FE;
scrolling:no;
position: fixed;
left: 0;
bottom: 0;
height: 100%;
z-index: 999;
}
.divContent{
width: 81%;float: right;background: #FFFFFF;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="referrer" content="no-referrer">
<title>京回收-卡券转让</title>
</head>
<style>
.divNav{
width: 19%;float: left;background: #F6F9FE;
scrolling:no;
position: fixed;
left: 0;
bottom: 0;
height: 100%;
z-index: 999;
}
.divContent{
width: 81%;float: right;background: #FFFFFF;
}
</style>
<body>
<div class="divNav">
</div>
<div class="divContent" style="">
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果图:
2.右边列表内容填充,懒得说了我特喵的一个后端,写前端代码,一次性说完思路,等下上完整代码,自己去上下而求索。
右边列表自己去控制下高度和宽度,左边做个间隔,然后OBJK了;布局就完成了,只要上JS了。
3.JS思路:有规律的控制左右标签。获取右边标签距离顶部距离,如果高度在某一个区域则显示左边对应标签。我这边显示的是 右边高度0-100 的,后面请自行依据页面更改值。
4.其实这还不算完善,(这页代码只有右边单个列表够多才不需要匹配左边背景色)还需要匹配到左边的高度 才会好看一点
<html lang="zh-cn" style="font-size: 55.2px !important;"><head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="referrer" content="no-referrer">
<title>京回收-卡券转让</title>
<link data-n-head="true" rel="icon" type="image/x-icon" href="//static.m.jhuishou.com/Framework/img/favicon.ico">
<link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/layui/css/layui.mobile.css" rel="stylesheet">
<link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/layui/css/modules/layer/default/layer.css" rel="stylesheet">
<link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/theme/css/console.css" rel="stylesheet">
<link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/theme/css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/css/reset.css">
<link rel="stylesheet" href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/css/main.css">
<link rel="stylesheet" href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="//static.m.jhuishou.com/SaleCard/Framework/wechat/css/common.css">
<script src="//static.m.jhuishou.com/SaleCard/Framework/wechat/js/jquery3.3.1.js"></script>
<script src="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/js/main.js"></script>
<script type="text/javascript">
function cssbb(id) {
$('.libbc,.bbc').css('font-size', '14px');
$('.libbc,.bbc').css('background', '#F6F9FE');
$('#bbc' + id).css('font-size', '16px');
$('#bbc' + id).css('background', '#FFFFFF');
$('#libbc' + id).css('background', '#FFFFFF');
kk = id;
}
function set_auto_time() {
var stop = $('#jkl' + kk).offset().top;//新一轮循环 以前标签标注位置
for (var i = fiel.length; i > 0; i--) {
var top = $('#jkl' + fiel[i - 1]).offset().top;//当前标签位置
//当前标签位置小于以前位置,且不是同一标签
if (kk != fiel[i - 1] && top < 100 && top > 0) {
kk = fiel[i - 1];
cssbb(fiel[i - 1]);
console.log('fiel_start:' + fiel_start + ' fiel[i-1]:' + fiel[i - 1] + ' top:' + top + ' kk:' + kk);
break;
} else if (kk == '0') {
console.log('fiel[i-1] : ' + fiel[i - 1] + ' top:' + top);
}
}
setTimeout('set_auto_time();', 200);
}
var fiel = ["1", "2", "4", "5", "6", "7", "8"];
var jkl_height = ["1", "2", "4", "5", "6", "7", "8"];//标签初始位置
var top_height = ["1", "2", "4", "5", "6", "7", "8"];//标签高度
var fiel_start;
var kk = "1";//默认选择第一个标签
jQuery(function () {
console.log(fiel);
fiel_start = $('#jkl' + fiel['0']).offset().top;
for (var i = fiel.length; i > 0; i--) {
top_height[fiel[i - 1]] = $('#jkl' + fiel[i - 1]).offset().top;//当前标签位置
jkl_height[fiel[i - 1]] = $('#jkll' + fiel[i - 1]).height();//当前容器高度
}
console.log(top_height);
console.log(jkl_height);
set_auto_time();
})
</script>
</head>
<style>
html,body{
width: 100%;
height: 100%;
overflow-x:hidden;
}
.content{ width:7.5rem;box-sizing: border-box; padding-bottom: 0rem;background: #FFFFFF}
.swiper-wrapper{
-webkit-overflow-scrolling: touch;
}
.swiper-slid{
-webkit-overflow-scrolling: touch;
}
/*导航*/
/*底部tabs*/
.gallery-top {
height: 100%;
width: 7.5rem;
}
.gallery-top .swiper-slide{
height: 100%;
width: 100% !important;
overflow-y: auto;
}
.gallery-top .swiper-slide .ka_list{
width:7.05rem;height:2rem; position: relative;margin: 0rem auto 0.35rem;position: relative;
}
.gallery-top .swiper-slide .ka_list:first-child{ margin-top: 0.35rem; }
.gallery-top .swiper-slide .ka_list .bg_img{ width:7.05rem;height:1.92rem;border-radius: 0.1rem;background:#47bdb6; }
.gallery-top .swiper-slide .ka_list .ka_box{
width: 7.20rem;
height: 1.92rem;
padding: 0.46rem 0.3rem 0.46rem;
display: flex;
position: absolute;
left: 0rem;
top: 0rem;
}
.gallery-top .swiper-slide .ka_list .ka_box .left{
width: 1rem; height: 1rem;margin-right: 0.3rem;
min-width: 1rem;
}
.gallery-top .swiper-slide .ka_list .ka_box .left img{ width:1rem;height:1rem;border-radius: 100%; }
.gallery-top .swiper-slide .ka_list .ka_box .center{
width: 4.72rem;
}
.gallery-top .swiper-slide .ka_list .ka_box .center h4{
width: 100%;
height: 0.58rem;
line-height: 0.58rem;
font-size: 0.3rem;
color: #fff;
white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}
.gallery-top .swiper-slide .ka_list .ka_box .center p{
width: 100%;height: 0.42rem;line-height:0.42rem; font-size: 0.22rem; color: #f6f9eb; opacity: 0.6;white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}
.gallery-top .swiper-slide .ka_list .ka_box .right{
width: 0.5rem;text-align: right;
min-width: 0.5rem;
}
.gallery-top .swiper-slide .ka_list .ka_box .right img{ width: 0.32rem; height: 0.32rem; display: inline-block; margin-top: 0.42rem;}
/*导航*/
/*底部tabs*/
.gallery-top_01 {
height: 100%;
width: 7.5rem;
}
.gallery-top_01 .swiper-slide{
height: 100%;
width: 100% !important;
overflow-y: auto;
}
.gallery-top_01 .swiper-slide .ka_list{
width:7.05rem;height:2rem; position: relative;margin: 0rem auto 0.35rem;position: relative;
}
.gallery-top_01 .swiper-slide .ka_list:first-child{ margin-top: 0.35rem; }
.gallery-top_01 .swiper-slide .ka_list .bg_img{ width:7.05rem;height:1.92rem;border-radius: 0.1rem;background:#47bdb6; }
.gallery-top_01 .swiper-slide .ka_list .ka_box{
width: 7.20rem;
height: 1.92rem;
padding: 0.46rem 0.3rem 0.46rem;
display: flex;
position: absolute;
left: 0rem;
top: 0rem;
}
.gallery-top_01 .swiper-slide .ka_list .ka_box .left{ width: 1rem; height: 1rem;margin-right: 0.3rem;}
.gallery-top_01 .swiper-slide .ka_list .ka_box .left img{ width:1rem;height:1rem;border-radius: 100%; }
.gallery-top_01 .swiper-slide .ka_list .ka_box .center{ width: 4.72rem; }
.gallery-top_01 .swiper-slide .ka_list .ka_box .center h4{
width: 100%;
height: 0.58rem;
line-height: 0.58rem;
font-size: 0.3rem;
color: #fff;
white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}
.gallery-top_01 .swiper-slide .ka_list .ka_box .center p{
width: 100%;height: 0.42rem;line-height:0.42rem; font-size: 0.22rem; color: #f6f9eb; opacity: 0.6;white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}
.gallery-top_01 .swiper-slide .ka_list .ka_box .right{ width: 0.5rem;text-align: right;}
.gallery-top_01 .swiper-slide .ka_list .ka_box .right img{ width: 0.32rem; height: 0.32rem; display: inline-block; margin-top: 0.42rem;}
/*积分兑*/
/*tab头*/
.nav_top_list{
width: 6rem;
margin: 0rem auto;
display: flex;
margin-top: 0.2rem;
}
.nav_top_list dd{
width: 50%;
position: relative;
}
.nav_top_list dd .rigth_border{
position: absolute;
top:50%;
right: -0.01rem;
border-right: 1px solid #dedede;
height: 0.48rem;
background: #BBBBBB;
margin-top: -0.24rem;
}
.nav_top_list dd span{
width: 1.72rem;
height: 0.6rem;
display: block;
text-align: center;
line-height: 0.6rem;
color: #010101;
margin: 0rem auto;
}
.nav_top_list dd.cur span{
background: #00C2B7;
color: #fff;
border-radius: 0.6rem;
}
/*tab头*/
.bg_list_cahnge{
width: 3.7rem;
background: #fff;
position: relative;
height: 0.6rem;
text-align: left;
border-radius: 0.6rem;
margin: 0rem auto;
margin-top: 0.2rem;
}
.nav_top_list_01{
width: 3.7rem;
margin: 0rem auto;
position: absolute;
left: 0rem;
top: 0rem;
border-radius: 0.6rem;
display: flex;
}
.nav_top_list_01 dd{
flex: 1;
position: relative;
height: 0.6rem;
display: block;
text-align: center;
line-height: 0.6rem;
border-radius: 0.6rem;
color: #010101;
}
.nav_top_list_01 dd.cur{
width: 1.94rem;
color: #fff;
/*background: #00C2B7;*/
background: #5bb7f8;
}
.bbj{
width: 83px;
height: 100%;
text-align: center;
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
.bbj li{
font-size: 16px;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #222222;
line-height: 16px;
-webkit-background-clip: text;
}
.divNav{
width: 19%;float: left;background: #F6F9FE;
scrolling:no;
position: fixed;
left: 0;
bottom: 0;
height: 100%;
z-index: 999;
}
.divContent{
width: 81%;float: right;background: #FFFFFF;
}
a,a:link,a:visited,a:active,a:hover{
text-decoration: none;
}
.fiel{
/*width: 80%;*/
border-top: 2px #EEEEEE solid;
margin-top: 0.3rem;
padding-bottom: 10px;
}
.fiel legend{
text-align: center;
font-size: 15px;
}
.cdiv{
float: left;
width: 33%;
text-align: center;
padding-top: 0.3rem;
}
.cdiv img{
width: 80%;
width: 0.5rem;
height: 0.5rem;
}
.bbj li a{
width: 48px;
height: 16px;
font-size: 14px;
font-family: PingFang SC-Bold, PingFang SC;
color: #222222;
/*line-height: 16px;*/
}
.bbj li a span{
width: 100%;
}
.bbc{
width: 100%;
margin-top: -0.5rem;
}
</style>
<div class="content" style="padding-top:0px">
<div class="divNav">
<ul class="bbj" style="">
<li class="libbc" id="libbc1" onclick="cssbb('1');" style=" vertical-align: middle;padding-top: 0.8rem;font-size: 16px;background: #FFFFFF;font-weight: bold;">
<a href="#bbj1">
<div class="bbc" id="bbc1" style="font-size: 16px;background: #FFFFFF;font-weight: bold;">
话费卡 </div></a>
</li>
<li class="libbc" id="libbc2" onclick="cssbb('2');" style=" vertical-align: middle;padding-top: 0.8rem;">
<a href="#bbj2">
<div class="bbc" id="bbc2" style="">
加油卡 </div></a>
</li>
<li class="libbc" id="libbc4" onclick="cssbb('4');" style=" vertical-align: middle;padding-top: 0.8rem;">
<a href="#bbj4">
<div class="bbc" id="bbc4" style="">
电商卡 </div></a>
</li>
<li class="libbc" id="libbc5" onclick="cssbb('5');" style=" vertical-align: middle;padding-top: 0.8rem;">
<a href="#bbj5">
<div class="bbc" id="bbc5" style="">
商超卡 </div></a>
</li>
<li class="libbc" id="libbc6" onclick="cssbb('6');" style=" vertical-align: middle;padding-top: 0.8rem;">
<a href="#bbj6">
<div class="bbc" id="bbc6" style="">
出行券 </div></a>
</li>
<li class="libbc" id="libbc7" onclick="cssbb('7');" style=" vertical-align: middle;padding-top: 0.8rem;">
<a href="#bbj7">
<div class="bbc" id="bbc7" style="">
美食券 </div></a>
</li>
<li class="libbc" id="libbc8" onclick="cssbb('8');" style=" vertical-align: middle;padding-top: 0.8rem;">
<a href="#bbj8">
<div class="bbc" id="bbc8" style="">
影音券 </div></a>
</li>
</ul>
</div>
<div class="divContent" style="">
<a name="bbj1" id="jkl1" style=" background: #FFFFFF;">
<fieldset class="fiel" id="jkll1">
<legend>
话费卡
</legend>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651293484other10.png?t=1651293484"><br>
中国移动 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294641other9.png?t=1651294641"><br>
中国联通 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294659other7.png?t=1651294659"><br>
中国电信 </div>
</fieldset>
</a>
<a name="bbj2" id="jkl2" style=" background: #FFFFFF;padding-top: 0.8rem;">
<fieldset class="fiel" id="jkll2">
<legend>
加油卡
</legend>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294719other1.png?t=1651294719"><br>
中石化充值卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294761other3.png?t=1651294761"><br>
中石油充值卡 </div>
</fieldset>
</a>
<a name="bbj4" id="jkl4" style=" background: #FFFFFF;padding-top: 0.8rem;">
<fieldset class="fiel" id="jkll4">
<legend>
电商卡
</legend>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294870other1.png?t=1651294870"><br>
京东e卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294902other1.png?t=1651294902"><br>
苏宁易购 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294919other2.png?t=1651294919"><br>
壹钱包 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294938other10.png?t=1651294938"><br>
万里通 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294955other10.png?t=1651294955"><br>
天猫超市卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294993other2.png?t=1651294993"><br>
天猫购物券 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295050other10.png?t=1651295050"><br>
每日优鲜 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295067other7.png?t=1651295067"><br>
天猫元宝 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295092other5.png?t=1651295092"><br>
美团礼品卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295115other8.png?t=1651295115"><br>
网易严选 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295134other6.png?t=1651295134"><br>
盒马鲜生 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295150other2.png?t=1651295150"><br>
瑞祥商联卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295178other8.png?t=1651295178"><br>
大众e通卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295194other1.png?t=1651295194"><br>
付费通卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295234other1.png?t=1651295234"><br>
唯品会 </div>
</fieldset>
</a>
<a name="bbj5" id="jkl5" style=" background: #FFFFFF;padding-top: 0.8rem;">
<fieldset class="fiel" id="jkll5">
<legend>
商超卡
</legend>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295270other7.png?t=1651295270"><br>
沃尔玛 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295287other2.png?t=1651295287"><br>
百联ok卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295303other2.png?t=1651295304"><br>
家乐福礼品卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295332other4.png?t=1651295332"><br>
苏果超市 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295349other9.png?t=1651295349"><br>
山东一卡通 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295371other2.png?t=1651295371"><br>
永辉超市卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295520other4.png?t=1651295520"><br>
华润万家 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295540other6.png?t=1651295540"><br>
福卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295564other10.png?t=1651295564"><br>
大润发 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295584other5.png?t=1651295584"><br>
中欣卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295623other1.png?t=1651295623"><br>
天虹 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295644other2.png?t=1651295644"><br>
美通卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295680other6.png?t=1651295680"><br>
中银通支付卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295711other3.png?t=1651295711"><br>
资和信商通卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295726other3.png?t=1651295726"><br>
和信通 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295741other2.png?t=1651295741"><br>
飞银彩虹卡 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295761other10.png?t=1651295761"><br>
万商卡 </div>
</fieldset>
</a>
<a name="bbj6" id="jkl6" style=" background: #FFFFFF;padding-top: 0.8rem;">
<fieldset class="fiel" id="jkll6">
<legend>
出行券
</legend>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296021other1.png?t=1651296021"><br>
携程任我行 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296047other8.png?t=1651296047"><br>
滴滴出行 </div>
</fieldset>
</a>
<a name="bbj7" id="jkl7" style=" background: #FFFFFF;padding-top: 0.8rem;">
<fieldset class="fiel" id="jkll7">
<legend>
美食券
</legend>
</fieldset>
</a>
<a name="bbj8" id="jkl8" style=" background: #FFFFFF;padding-top: 0.8rem;">
<fieldset class="fiel" id="jkll8">
<legend>
影音券
</legend>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296110other4.png?t=1651296110"><br>
爱奇艺 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296133other4.png?t=1651296133"><br>
腾讯视频 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296161other3.png?t=1651296161"><br>
优酷视频 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296204other4.png?t=1651296204"><br>
芒果TV </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296222other10.png?t=1651296223"><br>
搜狐视频 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296260other10.png?t=1651296260"><br>
淘票票 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296278other2.png?t=1651296278"><br>
猫眼 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296317other1.png?t=1651296317"><br>
QQ音乐 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296351other6.png?t=1651296351"><br>
喜马拉雅 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296377other5.png?t=1651296377"><br>
网易云 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296393other10.png?t=1651296393"><br>
vaudeville网盘 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296406other3.png?t=1651296406"><br>
哔哩哔哩 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296451other10.png?t=1651296451"><br>
饿了么 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296478other3.png?t=1651296478"><br>
京东电影 </div>
<div class="cdiv">
<img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296505other2.png?t=1651296505"><br>
百度文库 </div>
</fieldset>
</a>
<br>
<br>
<br>
<br>
<br>
</div>
</div></body></html>
效果图: