响应式 YouTube 嵌入 Flex 中-PHP中文网问答

我尝试在 Flex 容器中嵌入响应式 YouTube 以及其他一些内容，但 YouTube 嵌入的容器不会增长，因此要么重叠，要么被其他元素重叠。我不确定我是否解释得很好，所以我还制作了一个代码和盒子来演示：
https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.js
import { Box, Paper } from "@mui/material";

export default function App() {
  return (
    
      
        
          Some content
          
            
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
              maximus at enim in sollicitudin. Nam suscipit tellus sit amet
              porttitor hendrerit. Lorem ipsum dolor sit amet, consectetur
              adipiscing elit. Quisque vel dolor felis. Nulla sodales felis
              iaculis venenatis aliquam. Integer vehicula turpis a mauris
              maximus, eu sagittis ligula dignissim. In faucibus est lacus,
              auctor ornare lacus auctor ut. Morbi vitae ullamcorper nisi.
              Integer non sagittis erat.
            
          
        
      
      
        
          YouTube player
          
            
          </Box>
        </Paper>
      </Box>
      <Box>
        <Paper
          variant="outlined"
          sx={{
            padding: 2
          }}
        >
          <h2>Some other content</h2>
          <p>
            In vehicula a est non tempor. Maecenas ut leo ac arcu sollicitudin
            ullamcorper et vitae lectus. In venenatis lectus purus, non rhoncus
            ante pellentesque a. Sed sollicitudin leo sit amet odio ultricies
            pretium. Mauris eu nibh diam. Sed ante ipsum, efficitur ac leo eget,
            cursus ornare augue. Morbi aliquet porta rhoncus. Quisque ut tellus
            metus. Nam purus arcu, accumsan a dolor at, rhoncus iaculis velit.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra,
            per inceptos himenaeos. Nulla augue metus, semper id varius sit
            amet, congue vitae nunc. Phasellus interdum arcu quis quam tristique
            porta. Curabitur sit amet imperdiet turpis, ut facilisis mauris.
            Aliquam sit amet commodo nisi. Quisque elementum nulla ac
            ullamcorper interdum. Aliquam interdum sed lorem a tempus.
          </p>
        </Paper>
      </Box>
    </Box>
  );
}</pre>
<p>如何更改才能使嵌入的容器随着嵌入视频的大小而增大和缩小？
感谢您的帮助</p>            </div>
            <div class="share flexRow">
                <div class="shareReply flexColumn shareDiv">
                    <a   href="javascript:;"><img class="sharerImg" src="/static/images/images/icon50.png" data-id="1"></a>
                    <span class="sharerSpan">1</span>
                </div>

                <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(174864)">
                    <a   href="javascript:;" >
                                                    <img class="sharerImg" src="/static/images/images/icon52.png" data-id="2">
                                            </a>
                    <span class="sharerSpan">0</span>
                </div>


                <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 aiaskgoodICollection" data-id="">
                    <a   href="javascript:;" >
                                                    <img class="sharerImg " src="/static/images/images/icon37.png" data-id="5">
                                            </a>
                    <span class="sharerSpan">0</span>
                </div>




            </div>
            <script>
                $('.jbtitleimg').on('click',function(){
                    $("#layuitc").hide()
                    var layer = layui.layer;
                    layer.closeAll();
                })
                $('.jbbtn').on('click',function(){
                    $("#layuitc").hide()
                    var layer = layui.layer;
                    layer.closeAll();
                })
                $('.sharerImg').mouseenter(function(e){
                    var dataId = e.currentTarget.dataset.id
                    if(dataId == 1){
                        // $('.shareReply').find('img').attr('src','/static/images/images/icon51.png')
                    }else if(dataId == 2){
                        // $('.shareLike').find('img').attr('src','/static/images/images/icon53.png')
                    }else if(dataId == 4){
                        $('.shareShare').find('img').attr('src','/static/images/images/icon55.png')
                    }else{

                    }

                })
                $('.sharerImg').mouseleave(function(e){
                    var dataId = e.currentTarget.dataset.id
                    if(dataId == 1){
                        // $('.shareReply').find('img').attr('src','/static/images/images/icon50.png')
                    }else if(dataId == 2){
                        // $('.shareLike').find('img').attr('src','/static/images/images/icon52.png')
                    }else if(dataId == 4){
                        $('.shareShare').find('img').attr('src','/static/images/images/icon54.png')
                    }
                })
            </script>
            <!--            <div class="reply">-->
            <!---->
            <!--                <div class="replyTop flexRow">-->
            <!--                    <div class="retLeft flexRow">-->
            <!--                        <img src="/static/images/examples/text55.png" class="retlAvatar" >-->
            <!--                        <span class="retlName">飞儿</span>-->
            <!--                    </div>-->
            <!--                    <a   href="#"><img src="/static/images/images/icon-del.png" class="retRight"></a>-->
            <!--                </div>-->
            <!--                <img src="/static/images/examples/text26.jpg" class="replyTextarea">-->
            <!--                <button type="button" class="replayBtn">回答</button>-->
            <!--            </div>-->

            <div id="commentinput" class="info detail-comment-input layui-hide-sm">
                <div class="detail-ci-avator">
                    <img src="https://www.php.cn/static/images/user_avatar.jpg" alt="P粉111641966"/>
                    <div class="detail-r">
                        <span class="detail-name">P粉111641966</span>
                        <p class="detail-signal"></p>
                    </div>
                </div>
                <div id="js-reply-wrap">
                    <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div>
                    <div class="qa-ci-footer">
                        <div class="qa-ci-footright">
                            <button id="js-wenda-ci-submit" class="detail-btn" data-qid="174864">回答</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content">
                <div class="arTop flexRow">
                    <div class="artLeft flexRow fontBold fontColor1">全部回复<b class="artlb colorGrey">(0)</b></div>
                    <button class="artBtn ask-comment-answer">我来回复</button>
                </div>
                <div class="allReplayLine"></div>

                



                <div></div>
            </div>
        </div>

        <!-- left end -->
        <div class="phpwzright wdxq">
            <a   href="javascript:void(0);" onclick="publish_ask('发布话题',1)"><img src="/static/images/images/needtiwen.png"  class="wdxqrImg"></a>
            <div class="wzrTwo">
                <div class="wzrt-title">
                    <div>专题推荐</div>
                    <a   href="/faq/zt">更多>
                    </a>
                </div>
                <div class="wzrtlist">

                    <ul>
                                                <li>
                            <a    href="/faq/scddyrhhf"><img src="https://img.php.cn/upload/subject/202408/12/2024081216570056607.jpg?x-oss-process=image/resize,m_mfit,h_96,w_156,limit_0" /> </a>
                            <a    href="/faq/scddyrhhf" class="title-a-spanl"><span>删除的抖音如何恢复</span> </a>
                        </li>
                                                <li>
                            <a    href="/faq/win7tswffwapp"><img src="https://img.php.cn/upload/subject/202403/01/2024030116224095433.jpg?x-oss-process=image/resize,m_mfit,h_96,w_156,limit_0" /> </a>
                            <a    href="/faq/win7tswffwapp" class="title-a-spanl"><span>win7提示无法访问application data解决办法</span> </a>
                        </li>
                                                <li>
                            <a    href="/faq/linuxczxtdzyy"><img src="https://img.php.cn/upload/subject/202403/21/2024032109352154339.jpg?x-oss-process=image/resize,m_mfit,h_96,w_156,limit_0" /> </a>
                            <a    href="/faq/linuxczxtdzyy" class="title-a-spanl"><span>Linux操作系统的主要用途</span> </a>
                        </li>
                                                <li>
                            <a    href="/faq/dnkbljdwdyy"><img src="https://img.php.cn/upload/subject/202402/27/2024022714321029582.jpg?x-oss-process=image/resize,m_mfit,h_96,w_156,limit_0" /> </a>
                            <a    href="/faq/dnkbljdwdyy" class="title-a-spanl"><span>电脑开不了机的五大原因</span> </a>
                        </li>
                                            </ul>
                </div>

            </div>
            <div class="wzrOne">

                <div class="wzroTitle">
                    <div> 热门话题 </div>
                    <!--                                <a   href="/article.html" class="wzroTitlea">更多> </a>-->
                </div>
                <div class="wzroList">
                    <ul>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1291741.html">免费看csgo高清视频 csgo高清视频在线入口免登录</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/2001588.html">Yandex搜索官网2026最新入口_俄罗斯搜索引擎官方主页免登录使用（2026最新）</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1985894.html">Yandex俄罗斯搜索引擎官网入口(2026)_Yandex全球版网页链接直接进入</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1985293.html">yandex搜索引擎官网入口在哪 yandex俄罗斯网页版首页一键打开</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1998350.html">Yandex俄罗斯搜索引擎电脑版入口 Yandex官方网站地址指南</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1279295.html">csgo高清视频在线入口 csgo高清视频最新入口网址</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1995585.html">俄罗斯引擎官方入口在哪里 俄罗斯引擎Yandex最新稳定地址分享</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1985011.html">Yandex俄罗斯搜索引擎官网入口_俄罗斯Yandex搜索引擎网页版登录入口（2026最新）</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/1989194.html">俄罗斯搜索引擎Yandex官方入口 无需注册免费外贸在线使用</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots wzrolr"></span>
                                <a    href="/faq/2021537.html">俄罗斯搜索引擎官方网址是哪个 Yandex最新可用入口链接</a>
                            </div>
                        </li>
                                            </ul>
                </div>
            </div>
            <div class="wzrThree">
                <div class="wzrthree-title">
                    <div>热门教程</div>
                    <a    href="https://www.php.cn/k.html">更多>
                    </a>
                </div>
                <div class="wzrthreelist">
                    <div class="wzrthreeTab">
                        <div class="check tabdiv" data-id="one">相关教程 <div></div></div>
                        <div class="tabdiv" data-id="two">热门推荐<div></div></div>
                        <div class="tabdiv" data-id="three">最新课程<div></div></div>
                    </div>
                    <ul class="one">
                                            </ul>
                    <ul class="two" style="display: none;">
                                                <li>
                            <a    href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >100277次学习</div>

                                                                            <a   class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
                                <div class="wzrthreerb">
                                    <div >1514513次学习</div>

                                                                            <a   class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/639.html" title="phpStudy极速入门视频教程" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/639.html">phpStudy极速入门视频教程</a>
                                <div class="wzrthreerb">
                                    <div >533973次学习</div>

                                                                            <a   class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/379.html">独孤九贱(4)_PHP视频教程</a>
                                <div class="wzrthreerb">
                                    <div >1267532次学习</div>

                                                                            <a   class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a>
                                <div class="wzrthreerb">
                                    <div >777991次学习</div>

                                                                            <a   class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            </ul>
                    <ul class="three" style="display: none;">
                                                <li>
                            <a    href="/course/1696.html" title="最新Python教程 从入门到精通" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png" alt="最新Python教程 从入门到精通"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/1696.html">最新Python教程 从入门到精通</a>
                                <div class="wzrthreerb">
                                    <div >144017次学习</div>

                                                                            <a   class="courseICollection" data-id="1696"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >100277次学习</div>

                                                                            <a   class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/1655.html" title="PHP新手语法线上课程教学" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png" alt="PHP新手语法线上课程教学"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/1655.html">PHP新手语法线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >8782次学习</div>

                                                                            <a   class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/1654.html" title="支付宝沙箱支付（个人也能用的支付）" class="wzrthreelaimg">
                                <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付（个人也能用的支付）"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/1654.html">支付宝沙箱支付（个人也能用的支付）</a>
                                <div class="wzrthreerb">
                                    <div >5501次学习</div>

                                                                            <a   class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                                <li>
                            <a    href="/course/1650.html" title="麻省理工大佬Python课程" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/>
                            </a>
                            <div class="wzrthree-right">
                                <a    href="/course/1650.html">麻省理工大佬Python课程</a>
                                <div class="wzrthreerb">
                                    <div >51777次学习</div>

                                                                            <a   class="courseICollection" data-id="1650"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            </ul>
                </div>
                <script>
                    $('.wzrthreeTab>div').click(function(e){
                        $('.wzrthreeTab>div').removeClass('check')
                        $(this).addClass('check')
                        $('.wzrthreelist>ul').css('display','none')
                        $('.'+e.currentTarget.dataset.id).show()
                    })
                </script>
            </div>
            <div class="wzrFour">
                <div class="wzrfour-title">
                    <div>最新下载</div>
                    <a   href="/xiazai">更多>
                    </a>
                </div>

                                <script>
                    $(document).ready(function(){
                        var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                            speed:1000,
                            autoplay:{
                                delay:3500,
                                disableOnInteraction: false,
                            },
                            pagination:{
                                el:'.sjyx_banSwiperwz .swiper-pagination',
                                clickable :false,
                            },
                            loop:true
                        })
                    })
                </script>

                <div class="wzrfourList">
                    <div class="wzrfourlTab">
                        <div class="check" data-id="onef">网站特效 <div></div></div>
                        <div class="" data-id="twof">网站源码<div></div></div>
                        <div class="" data-id="threef">网站素材<div></div></div>
                        <div class="" data-id="fourf">前端模板<div></div></div>
                    </div>
                    <ul class="onef">
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="jquery点击弹出大图切换代码" href="/xiazai/js/8641">[图片特效] jquery点击弹出大图切换代码</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="HTML5手机登录注册表单代码" href="/xiazai/js/8640">[表单按钮] HTML5手机登录注册表单代码</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="jQuery动画登录注册表单切换代码" href="/xiazai/js/8639">[表单按钮] jQuery动画登录注册表单切换代码</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="jQuery滑动解锁登录表单代码" href="/xiazai/js/8638">[表单按钮] jQuery滑动解锁登录表单代码</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="jquery智能弹窗提醒" href="/xiazai/js/8637">[图片特效] jquery智能弹窗提醒</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="jQuery遮罩图片hover翻转效果" href="/xiazai/js/8636">[图片特效] jQuery遮罩图片hover翻转效果</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="jQuery鼠标点击图片滑动切换特效" href="/xiazai/js/8635">[图片特效] jQuery鼠标点击图片滑动切换特效</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a     title="西山居首页jQuery焦点图代码" href="/xiazai/js/8634">[图片特效] 西山居首页jQuery焦点图代码</a>
                            </div>
                        </li>
                                            </ul>

                    <ul class="twof" style="display:none">
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11355" title="openaishop" >[电商源码] openaishop</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11354" title="思翔企(事)业单位文件柜 build 20080313" >[其它模板] 思翔企(事)业单位文件柜 build 20080313</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0" >[企业站源码] 雅龙智能装备工业设备类WordPress主题1.0</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11352" title="威发卡自动发卡系统" >[电商源码] 威发卡自动发卡系统</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11351" title="卡密分发系统" >[电商源码] 卡密分发系统</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11350" title="中华陶瓷网" >[电商源码] 中华陶瓷网</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11349" title="简洁粉色食品公司网站" >[电商源码] 简洁粉色食品公司网站</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/11348" title="极速网店系统" >[电商源码] 极速网店系统</a>
                            </div>
                        </li>
                                            </ul>

                    <ul class="threef" style="display:none">
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4273"    title="手绘热带菠萝水果合集矢量素材">[矢量素材] 手绘热带菠萝水果合集矢量素材</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4272"    title="3D礼物主题海报设计下载">[psd素材] 3D礼物主题海报设计下载</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4271"    title="2026马年线性装饰矢量素材">[矢量素材] 2026马年线性装饰矢量素材</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4270"    title="货币金融科技金融海报设计下载">[psd素材] 货币金融科技金融海报设计下载</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4269"    title="水墨冬季寒梅傲雪风景矢量模板">[矢量素材] 水墨冬季寒梅傲雪风景矢量模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4268"    title="清新拼贴自然环保海报矢量模板">[矢量素材] 清新拼贴自然环保海报矢量模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4267"    title="2026马年黑金贺卡矢量模板">[矢量素材] 2026马年黑金贺卡矢量模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/sucai/4266"    title="INS风格快餐美食宣传模板设计下载">[psd素材] INS风格快餐美食宣传模板设计下载</a>
                            </div>
                        </li>
                                            </ul>

                    <ul class="fourf" style="display:none">
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8590"   title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8589"   title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8588"   title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8587"   title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8586"   title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8585"   title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8584"   title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a>
                            </div>
                        </li>
                                                <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a   href="/xiazai/code/8583"   title="创意T恤打印店网站HTML5模板">[前端模板] 创意T恤打印店网站HTML5模板</a>
                            </div>
                        </li>
                                            </ul>

                </div>
                <script>
                    $('.wzrfourlTab>div').click(function(e){
                        $('.wzrfourlTab>div').removeClass('check')
                        $(this).addClass('check')
                        $('.wzrfourList>ul').css('display','none')
                        $('.'+e.currentTarget.dataset.id).show()
                    })
                </script>
            </div>

        </div>
    </div>
</div>
<!--主体 end-->
<!--底部-->

<!--底部 end-->
<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a target="_blank"  href="/about/us.html" rel="nofollow"  title="关于我们" class="cBlack">关于我们</a>
                        <a target="_blank"  href="/about/disclaimer.html" rel="nofollow"  title="免责申明" class="cBlack">免责申明</a>
                        <a target="_blank"  href="/about/jbzx.html" rel="nofollow"  title="举报中心" class="cBlack">举报中心</a>
                        <a   href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                        <a target="_blank"  href="https://www.php.cn/teacher.html" rel="nofollow"   title="讲师合作" class="cBlack">讲师合作</a>
                        <a  target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow"  title="广告合作" class="cBlack">广告合作</a>
                        <a  target="_blank" href="/new/"    title="最新文章列表" class="cBlack">最新更新</a>
                                                <div class="clear"></div>
                    </dt>
                    <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd>
                    <dd class="cont2">
                      <span class="ylwTopBox">
                        <a   href="javascript:;"  class="cBlack"><b class="icon1"></b>关注服务号</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>微信扫码<br/>关注PHP中文网服务号</p>
                          <img src="/static/images/examples/text16.png"/>
                        </em>
                      </span>
                        <span class="ylwTopBox">
                        <a   href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes"  class="cBlack"><b class="icon2"></b>技术交流群</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>QQ扫码<br/>加入技术交流群</p>
                          <img src="/static/images/examples/text18.png"/>
                        </em>
                      </span>
                        <div class="clear"></div>
                    </dd>
                </dl>
                
            </div>
            <div class="phpFootRight">
                <div class="phpFootMsg">
                    <span><img src="/static/images/examples/text17.png"/></span>
                    <dl>
                        <dt>PHP中文网订阅号</dt>
                        <dd>每天精选资源文章推送</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="phpFootCode">
        <div class="phpFootCodeIn"><p>Copyright 2014-2026 <a   href="https://www.php.cn/" >https://www.php.cn/</a> All Rights Reserved | php.cn | <a   href="https://beian.miit.gov.cn/" rel="nofollow" >湘ICP备2023035733号</a></p><a   href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" ><b></b></a></div>
    </div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>

<script src="/static/js/cdn.js?v=1.0.1"></script>



<!--
    <div class="phpFudong">
        <div class="phpFudongIn">
            <div class="phpFudongImg"></div>
            <div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div>
            <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div>
            <div class="phpFudongCode"><a   href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div>
            <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div>
            <div class="clear"></div>
        </div>
    </div>
--><!--侧导航-->
<style>
    .layui-fixbar{display: none;}
</style>
<div class="phpSdhBox" style="height:240px !important;">
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="/k24.html"  class="hover" title="PHP学习">
                    <b class="icon1"></b>
                    <p>PHP学习</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="https://www.php.cn/blog/detail/1047189.html" >
                    <b class="icon2"></b>
                    <p>技术支持</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="#">
                    <b class="icon6"></b>
                    <p>返回顶部</p>
                </a>
            </div>
        </div>
    </li>
</div>
<!--侧导航 end-->


<script src="/static/layui/layui.all.js"></script>
<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.user.all.js"></script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="/static/video/video.js?1.7" charset="UTF-8"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/>
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script>
<script>$('.isAct-attr').viewer();</script>

</body>
</html>