<!-- 隔行添加背景颜色 -->
<style>
.container p {
    background-color: #fff; /* 默认白色 */
}
 
/* 奇数行（从0开始计算） */
.container p:nth-child(odd) {
    background-color: #f5f5f5; /* 设置为浅灰色或其他颜色 */
}
 
/* 偶数行 */
.container p:nth-child(even) {
    background-color: #eaeaea; /* 设置为更深的灰色或其他颜色 */
}
</style>
<!-- 隔行添加背景颜色 -->

<!-- 引用video.js，并设置画面的纵横比 -->
<head>
  <link href="https://vjs.zencdn.net/8.9.0/video-js.css" rel="stylesheet" />
</head>

<body>
  <video
    id="my-video"
    class="video-js vjs-default-skin vjs-16-9"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="这里是视频封面"        
    data-setup="{}"
  >
    <source src="这里是视频链接" type="video/mp4" />
    <source src

<!-- 当导航栏为文章列表的时候，给点击的文章添加active -->
  {if $id==$article.id}active{/if}
<!-- 当导航栏为文章列表的时候，给点击的文章添加active -->

<!-- swiper.js自定义切换按钮 -->
<div class="related-switch">
    <!-- 如果需要导航按钮 -->
    <div id="prevBtn" onclick="mySwiper.slidePrev()" class="switch-btn"><i class="iconfont icon-zuo"></i></div>
    <div id="nextBtn" onclick="mySwiper.slideNext()" class="switch-btn"><i class="iconfont icon-you"></i></div>
</div>


<script>
    
	var mySwiper = new Swiper ('#swiper6', {
        direction: 'hor

<!-- WhatsApp客服（只需更换手机号） -->
https://api.whatsapp.com/send?phone=17692787528&text=Hello
<!-- WhatsApp客服（只需更换手机号） -->

<!-- Telegram客服（只需更换用户名） -->
https://t.me/ocean_union
<!-- Telegram客服（只需更换用户名） -->

<!-- 将第一行代码改成第二行代码即可实现手机端等比例缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=0, maximum-scale=0, user-scalable=yes,shrink-to-fit=no">
<!-- 将第一行代码改成第二行代码即可实现手机端等比例缩放 -->

<!-- 当栏目ID：123123时添加active类 -->
{if $.id==123123}active{/if}
<!-- 当栏目ID：123123时添加active类 -->

<!-- 循环分类的同时循环分类下的文章 -->
{loop nav(123) as $nav}
    {loop a('cid',$nav['id'],'pagesize',5) as $article}
    文章标题:{$article.title} 文章网址:{$article.link} 文章栏目id:{$article.cid} 
    {/loop}
{/loop}
<!-- 循环分类的同时循环分类下的文章 -->

<!-- 该css属性确保宽度和高度的比例为1:1，适用于画圆和正方形 -->
.csdcvs {
    aspect-ratio: 1/1;
}
<!-- 该css属性确保宽度和高度的比例为1:1，适用于画圆和正方形 -->

<!-- 给文章页当前激活文章添加判断 -->
{if $id==$article.id}Open{/if}
<!-- 给文章页当前激活文章添加判断 -->

<style>
    .fdsfas img {
        background-attachment: fixed;
    }
</style>

<!-- 产品列表页，需要循环分类时，在ALL标签添加判断条件 -->
<div class="product-tab-menu">
    <a href="/66618103/" class="{if $.id==66618103}active{/if}">ALL</a>
    {loop nav(66618103) as $nav}
    <a href="{$nav.link}" class="{if $nav.active} active{/if}">{$nav.channelname}</a>
    {/loop}
</div>
<!-- 产品列表页，需要循环分类时，在ALL标签添加判断条件 -->

<!-- 文字超出3行隐藏并显示省略号： -->
 <style>
    display: -webkit-box;          /* 必须结合的弹性盒子模型 */
    -webkit-box-orient: vertical;  /* 设置子元素的排列方式 */
    -webkit-line-clamp: 3;         /* 限制显示行数（此处为3行） */
    overflow: hidden;              /* 隐藏超出内容 */
    text-overflow: ellipsis;  
 </style>
<!-- 文字超出3行隐藏并显示省略号： -->

<!-- 文章循环中，给当前激活的文章添加active类： -->
<?php if($id==$article['id']){echo('active');}?>
<!-- 文章循环中，给当前激活的文章添加active类： -->

<!-- 当循环中存在序号递增的情况使用下列代码 -->
文章序号:{$article.key},
如需从1开始则使用:{$article.key=$article.key+1}{$article.key}
<!-- 当循环中存在序号递增的情况使用下列代码 -->

{date(F d Y,$article.datetime)}