分享一个今天刚写的前端视频列表页面，因为自己之前是做后端的，最近做新站，当作学习了，做了这个视频列表的界面
演示地址：http://www.sdfymj.com/video/list-111.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="//ae.bdstatic.com/">
<link rel="dns-prefetch" href="//msite.baidu.com">
<link rel="dns-prefetch" href="//mipcache.bdstatic.com">
<link rel="dns-prefetch" href="//c.mipcdn.com">
<link rel="dns-prefetch" href="//c.mipcdn.com">
<link rel="dns-prefetch" href="//www.sdfymj.com">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
{if $moduleid==1}
<link rel="canonical" href="{DT_PATH}">
{/if}
{if $moduleid>2 &&$itemid==0}
<link rel="canonical" href="{$MOD[linkurl]}{$linkurl}">
{/if}
{if $itemid!=0}
<link rel="canonical" href="{$linkurl}">
{/if}
<meta name="applicable-device"content="pc,mobile">
{if $head_mobile}
<meta http-equiv="mobile-agent" content="format=html5;url={$head_mobile}">
<meta http-equiv="mobile-agent" content="format=xhtml; url={$head_mobile}">
<link rel="alternate" media="only screen and(max-width: 640px)" href="{$head_mobile}" >
{/if}
<title>{if $seo_title}{$seo_title}{else}{if $head_title}{$head_title}{$DT[seo_delimiter]}{/if}{if $city_sitename}{$city_sitename}{else}{$DT[sitename]}{/if}{/if}</title>
{if $head_keywords}
<meta name="keywords" content="{$head_keywords}" />
{/if}
{if $head_description}
<meta name="description" content="{$head_description}" />
{/if}
<meta name="generator" content="{$DT[sitename]}"/>
<link rel="shortcut icon" type="image/x-icon" href="{DT_STATIC}favicon.ico" />
<link rel="bookmark" type="image/x-icon" href="{DT_STATIC}favicon.ico" />
{if $EXT[archiver_enable]}
<link rel="archives" title="{$DT[sitename]}" href="{$EXT[archiver_url]}" />
{/if}
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/layui.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/iconfont.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/font-awesome.min.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/globle.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/header.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/videolist.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/filter.css">
</head>
<style type="text/css">
.layui-form-item .layui-form-checkbox[lay-skin=primary] {
margin-top: 0;
}
</style>
<body>
<!--头部-->
<div class="aoaoAudio_header layui-clear">
<!--LOGO-->
<div class="aoaoAudio_header_logo">
<a href="{DT_PATH}" title="{$DT[sitename]}"><img src="{DT_SKIN}video/list/picture/logofb.svg" alt="{$DT[sitename]}"></a>
</div>
<!--导航-->
<ul class="layui-nav headNav" lay-filter="">
<li class="layui-nav-item sceneNav plugin">
<a href="{DT_PATH}" title="首页">首页</a>
<dl class="layui-nav-child">
</dl>
</li>
{loop $MODULE $m}
{if $m[moduleid] > 10 && !$m[islink]}
<li class="layui-nav-item plugin">
<a href="{$m[linkurl]}{$c[linkurl]}" title="{$m[name]}" target="_blank">{$m[name]}</a>
<dl class="layui-nav-child layui-nav-video">
</dl>
</li>
{/if}
{/loop}
<li class="layui-nav-item">
<a href="{$MODULE[1][linkurl]}announce/" title="关于我们" target="_blank">关于我们</a>
</li>
</ul>
<!--搜索框-->
<div class="aoaoAudio_header_searchBox layui-form" layui-form >
<form class="layui-form layui-form-pane" action="{DT_PATH}api/search.php" method="get">
<input type="hidden" name="spread" value="0" id="destoon_spread"/>
<input id="sechtype" name="moduleid" type="hidden" value="14">
<input id="14" type="text" autocomplete="off" placeholder="输入关键字" name="kw" value="" list="cars">
<span>
<button type="submit"><i class="fa fa-search" lay-submit></i></button></span>
</form>
</div>
<!--用户框-->
<ul class="layui-nav aoaoAudio_header_userBox" lay-filter>
<li class="layui-nav-item aoaoAudio_header_userID">
{if $_userid}
<a href="{$MODULE[2][linkurl]}" class="need-login" rel="nofollow" title="管理">
<span class="aoaoAudio_header_userID">
<img src="{DT_PATH}/api/avatar/default.jpg" alt="管理">
<span>会员中心</span>
</span>
</a>
{else}
<a href="{$MODULE[2][linkurl]}{$DT[file_login]}" class="need-login" rel="nofollow" title="登入">
<span class="aoaoAudio_header_userID">
<img src="{DT_SKIN}video/list/picture/nologin.png" alt="登入">
<span>登入/注册</span>
</span>
</a>
{/if}
</li>
</ul>
</div>
<div class="filter_mask"></div>
<div class="list_ad videolist">
<div class="listVideoBox">
<video autoplay loop muted id="bgvid" class="list_video" style="width=100%; height=100%; object-fit: fill">
<!--<source src="http://fcvideo.cdn.bcebos.com/5c02806178c8ce1dd3f04772141de284.mp4" type="video/mp4">!-->
<source src="{DT_SKIN}video/list/video/video-top-banner-index.mp4" type="video/mp4">
</video>
</div>
<div class="list_ad_word">
<p class="list_ad_intro">{$CAT[catname]}</p>
<p class="worksNum">云建网为您提供{$CAT[catname]}相关视频，让您更好了解和使用{$CAT[catname]}</p>
</div>
</div>
<div class="aoaoAudio_filtrate layui-container video-list">
<div class="warp">
<div class="crumbs">
<p>
<span>当前位置：</span>
<a href="{$MODULE[1][linkurl]}" title="{$DT[sitename]}">{$DT[sitename]}</a>
» <a href="{$MOD[linkurl]}">{$MOD[name]}</a> » {cat_pos($CAT, ‘ » ‘)}
</p>
</div>
</div>
<div class="aoaoAudio_filtrate_category">
<ul>
<li class="category_Classify">
<span>视频分类：</span>
<a class="ln" href="{$MODULE[14][linkurl]}" title="全部">全部</a>
{loop $maincat $i $m}
{php $child = get_maincat($maincat, $CATEGORY, 1);}
<a href="{$MOD[linkurl]}{$m[linkurl]}" title="{$m[catname]}">{$m[catname]}</a>
{php $childs = get_maincat($m[catid], $CATEGORY, 1);}
{loop $childs $i $c}<a href="{$MOD[linkurl]}{$c[linkurl]}">{$c[catname]}</a>
{/loop}
{/loop}
</li>
</div>
</div>
</div>
<!--列表-->
<div class="layui-container video_listing">
<div class="layui-tab-item layui-show">
<div class="layui-row layui-col-space20">
{if $module == ‘video‘} {if $tags}{template ‘list-shipin‘, ‘tag‘} {/if}{/if}
<!-- 视频模板 -->
<div class="videoTemplate_wrap">
<div class="layui-container videoTemplate">
<div class="template_top clearfix">
<div class="template_border"></div>
<div class="template_title"><h1>热门推荐</h1></div>
<div class="template_border"></div>
</div>
<div class="tags-title">
</div>
<div class="tags-item">
<span>热门分类：</span>
{loop $MODULE $m}
{if $m[moduleid] > 3 && !$m[islink]}
{php $child = get_maincat(0, $m[moduleid]);}
{loop $child $i $c}
<a href="{$m[linkurl]}{$c[linkurl]}" title="{$c[catname]}" target="_blank">{$c[catname]}</a>
{/loop}
{/if}
{/loop}
</div>
<div class="tags-item">
<span>用户热搜：</span>
<!--{tag("moduleid=21&table=keyword&condition=moduleid=21 and status=3&pagesize=100&order=updatetime desc&target=_blank&dir=xhtag&template=news-search_kw")}-->
</div>
</div>
</div>
</div>
<!--底部-->
<div class="footer minwd">
<div class="layui-container">
<div class="nav clearfix">
<dl>
<dt><i class="iconfont"></i>关于云建网</dt>
<dd><a href="http://www.sdfymj.com/announce/" target="_blank" rel="nofollow" title="关于云建网">主办单位</a></dd>
<dd><a href="{$MODULE[1][linkurl]}about/contact.html" target="_blank" rel="nofollow" title="联系方式">联系我们</a></dd>
{if $EXT[guestbook_enable]}<dd><a href="{$EXT[guestbook_url]}index.php?action=add" target="_blank" rel="nofollow" title="意见反馈">意见反馈</a></dd>{/if}
<dd><a href="{$MODULE[1][linkurl]}about/contact.html" target="_blank" rel="nofollow" title="VIP充值">联系我们</a></dd>
</dl>
<dl>
<dt><i class="iconfont" target="_blank"></i>增值服务</dt>
<dd><a href="{$MODULE[1][linkurl]}vip" target="_blank" rel="nofollow" title="开通vip">开通vip</a></dd>
<dd><a href="{$MODULE[2][linkurl]}grade.php" target="_blank" rel="nofollow" title="服务对比">服务对比</a></dd>
<dd><a href="/{$MODULE[1][linkurl]}vip/spmuban.php" target="_blank" rel="nofollow" title="精美商铺">精美商铺</a></dd>
</dl>
<dl>
<dt><i class="iconfont"></i>资料下载</dt>
<dd><a href="http://www.sdfymj.com/down/list-51.html" target="_blank" title="建筑工程" >建筑工程</a></dd>
<dd><a href="http://www.sdfymj.com/down/list-50.html" target="_blank" title="路桥工程" >路桥工程</a></dd>
<dd><a href="http://www.sdfymj.com/down/list-52.html" target="_blank" title="水利工程" >水利工程</a></dd>
<dd><a href="http://www.sdfymj.com/down/list-54.html" target="_blank" title="材料安装" >材料安装</a></dd>
<dd><a href="http://www.sdfymj.com/down/list-54.html" target="_blank" title="教育考试" >教育考试</a></dd>
</dl>
<dl>
<dt><i class="iconfont" target="_blank"></i>推广服务</dt>
<dd><a href="{$EXT[spread_url]}" target="_blank" rel="nofollow" title="排名推广">排名推广</a></dd>
<dd><a href="{$EXT[ad_url]}" target="_blank" title="广告服务">广告服务</a></dd>
<dd><a href="{$MODULE[2][linkurl]}ad.php" target="_blank" rel="nofollow" title="我的广告">我的广告</a></dd>
<dd><a href="{$EXT[spread_url]}" target="_blank" title="热门推广">热门推广</a></dd>
</dl>
<dl>
<dt><i class="iconfont"></i>旗下网站</dt>
<dd><a href="http://zhimo.yuanzhumuban.cc/" target="_blank" title="支模网" >支模网</a></dd>
</dl>
</div>
<div class="copyright reserved">
<p>{$DT[copyright]}</p>
<p>版权所有 2019-2020 山东方圆建筑材料有限公司 {$DT[sitename]} <a href="http://www.beian.miit.gov.cn/" title="ICP备案" target="_blank" rel="nofollow">{$DT[icpno]}</a>
</p>
<p>公司地址：山东省临沂市兰山区西外环路与双岭路交汇南600米路东(钢材市场9号门)408</p>
</div>
</div>
</div>
<!--右侧悬浮-->
<div class="right-fixed">
<a rel="nofollow" href="//wpa.qq.com/msgrd?v=3&uin=2424348224&site=网站客服&menu=yes" target="_blank" class="kegu-box" title="{$DT[sitename]}客服">
<div class="qqTip">
<div class="service clearfix">
<div class="WeChat fl">
<img src="{$DT[erwei]}" title="公众号关注"/>
<p>公众号关注</p>
</div>
<i class="line fl"></i>
<div class="qq fl">
<i></i>
<p>QQ客服</p>
</div>
</div>
<div class="work-time">
<p>周一至周五 9:00-18:00</p>
<p>（非工作时间请留言）</p>
</div>
</div>
</a>
<div class="wx-box">
<div class="wx-erwema"></div>
</div>
<a href="{$MODULE[2][linkurl]}my.php?mid={$moduleid}&action=add" target="_blank" class="ShoppingCar-link" rel="nofollow" title="发布视频"></a>
<div class="back-top"></div>
</div>
<div style="display: none;"><script src="{DT_SKIN}video/list/js/z_stat.js" language="JavaScript"></script>
</div>
<script src="{DT_SKIN}video/list/js/layui.js"></script>
<script src="{DT_SKIN}video/list/js/jquery.3.1.1.min.js"></script>
<script src="{DT_SKIN}video/list/js/header.js"></script>
<script src="{DT_SKIN}video/list/js/index.js"></script>
<script>
var flag=true;
$(‘.tags-list .tagsno‘).hide();
$(‘.unfold‘).click(function () {
flag=!flag;
if (flag) {
$(‘.tags-list .tagsno‘).slideUp();
$(‘.unfold i‘).removeClass("up").addClass(‘down‘);
$(‘.unfold span‘).text(‘展开‘);
$(‘.show‘).removeClass("show").addClass(‘hide‘);
} else {
$(‘.tags-list .tagsno‘).slideDown();
$(‘.unfold span‘).text(‘收起‘);
$(‘.unfold i‘).removeClass("down").addClass(‘up‘);
$(‘.hide‘).removeClass("hide").addClass(‘show‘);
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/68xi/p/12237074.html