Fork me on GitHub

仿腾讯视频(纯CSS、HTML)

  之前发布过一个纯静态的访腾讯注册页面博文，所以呢！今天发布一个大的web网页项目——【仿腾讯视频】；也是纯CSS、HTML。

其中还使用了 字体图标、轮播图为css实现的；
​页面共5个网页，页面的小图标来自icomoon字库和阿里图标库；

  github下载地址：https://github.com/Lencamo/imitate-tencent-video 。欢迎start🙏。

页面的效果

index.html

极限挑战介绍.html

全网热搜榜.html

热搜榜更多内容.html

  我已经将自己的案例上传至云服务器，如果想先看效果的话，可以直接在浏览器中输入网站名：http://renhongfei.web3v.vip/ 即可查看效果。由于服务器不稳定，图片加载可能会消耗一些时间。

网页间跳转

index.html

极限挑战介绍.html

全网热搜榜.html

热搜榜更多内容.html

index.html页面的HTML代码如下：

<body>
    <div class="ren">
        <!-- 头部 -->
        <header>
            <div class="out">
                <!-- 1、top部分 -->
                <div class="header-top">
                    <img src="images/header/logo-ps抠图.png" alt="">
                    <div class="search">
                        <input type="search" class="cin" type="text" placeholder="奔跑吧 第5季">
                        <div class="hot">
                            <a href="全网热搜榜.html" target="blank">热搜榜</a>
                        </div>
                        <div class="see"></div>
                        <button>全网搜</button>
                    </div>
                    <div class="select">
                        <img src="images/header/图标/VIP1.png" alt="">
                        <img src="images/header/图标/历史1.png" alt="">
                        <img src="images/header/图标/创作中心1.png" alt="">
                        <img src="images/header/图标/画质1.png" alt="">
                        <div class="circle">
                            <a href="QQ注册页面.html" target="_blank"><img class="register" src="images/header/图标/1-1.png"
                                    alt=""></a>
                        </div>
                    </div>
                </div>
                <!-- 2、aside部分 -->
                <div class="header-right_aside">
                    <div class="aside-up">
                        <img src="images/header/图标/看点1.png" alt="">
                        <h2>大家在看</h2>
                    </div>
                    <div class="aside-down">
                        <div class="down">
                            <img src="images/header/图标/热搜榜 (1).png" alt="">
                            <h2>重磅推荐</h2>
                        </div>
                        <ul>
                            <li><a href="https://v.qq.com/x/cover/mzc002003h7vka8.html" target="_blank">奔跑吧</a></li>
                            <li><a href="https://v.qq.com/x/cover/mzc00200y4wycre.html" target="_blank">千古玦尘首播</a></li>
                            <li><a href="https://v.qq.com/x/cover/mzc0020029wfxgg.html" target="_blank">心动的信号</a></li>
                            <li class="my">
                                <a href="https://v.qq.com/x/cover/mzc00200bcryyw5.html" target="_blank">直击上影</a>
                            </li>
                            <li><a href="https://v.qq.com/x/cover/qjr4mfe8xf85j0j.html" target="_blank">双世宠妃3</a></li>
                            <li><a href="https://v.qq.com/x/cover/gehpfier9upkqz5.html" target="_blank">眷思量</a></li>
                            <li><a href="https://v.qq.com/x/page/f3243xebb7k.html" target="_blank">光辉历程</a></li>
                            <li><a href="https://v.qq.com/x/cover/mzc0020077b1ff5.html" target="_blank">牛头不对马嘴</a></li>
                            <li><a href="#">年卡128元</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 3、轮播图部分 -->
                <div class="lunbotu">
                    <div class="donghua">
                        <img src="images/header/0 (2).png" alt="" class="tu">
                        <img src="images/header/0 (6).png" alt="" class="tu">
                        <img src="images/header/0 (5).png" alt="" class="tu">
                        <img src="images/header/0 (3).png" alt="" class="tu">
                        <img src="images/header/0 (1).png" alt="" class="tu">
                        <img src="images/header/0 (4).png" alt="" class="tu">
                        <img src="images/header/0 (10).png" alt="" class="tu">
                        <img src="images/header/0 (7).png" alt="" class="tu">
                        <img src="images/header/0 (8).png" alt="" class="tu">
                        <img src="images/header/0 (2).png" alt="" class="tu">
                    </div>
                </div>
            </div>

        </header>

        <!-- 主体内容 部分 -->
        <article>
            <!-- 导航栏-->
            <nav>
                <img src="images/未完成1.png" alt="">
            </nav>

            <!-- 内容1 -->
            <!-- <div>
                <img src="images/未完成5.png" alt="">
            </div> -->

            <!-- 广告位1号 -->
            <div class="adv1">
                <div class="adert1">
                    <img src="images/index页面/广告位/6-1.jpg" alt="">
                    <a href="#"><img src="images/index页面/广告位/6-11.png" alt="" class="i"></a>
                </div>
                <div class="adert2">
                    <img src="images/index页面/广告位/6-2.png" alt="">
                    <a href="#"><img src="images/index页面/广告位/6-22.png" alt="" class="i"></a>
                </div>
                <div class="adert3">
                    <img src="images/index页面/广告位/6-3.jpg" alt="">
                    <a href="极限挑战介绍.html" target="_blank"><img src="images/index页面/广告位/6-33.png" alt="" class="i"></a>
                </div>
                <div class="adert4">
                    <img src="images/index页面/广告位/6-4.jpg" alt="">
                    <a href="#"><img src="images/index页面/广告位/6-44.png" alt="" class="i"></a>
                </div>
                <div class="adert5">
                    <img src="images/index页面/广告位/6-5.jpg" alt="">
                    <a href="#"><img src="images/index页面/广告位/6-55.png" alt="" class="i"></a>
                </div>
            </div>

            <!-- 内容2 -->
            <!-- <div>
                <img src="images/未完成2.png" alt="">
                <img src="images/未完成3.png" alt="">
            </div> -->

            <!-- 广告位2号 -->
            <div class="adv2">
                <div class="adv2-left">
                    <img src="images/index页面/广告位/7-3.jpg" alt="">
                </div>
                <div class="adv2-right">
                    <img src="images/index页面/广告位/7-12.jpg" alt="">
                </div>
            </div>

        </article>
        <!-- 尾部 -->
        <footer>
            <div class="line">
                <hr size="3px" color="#ff5c38">
            </div>
            <div class="footer">
                <!-- 1、links部分 -->
                <div class="links1">
                    <img src="images/footer/links1.png" alt="">
                </div>
                <div class="links2">
                    <dl>
                        <dt>特色推荐</dt>
                        <dd><a href="#">自制推荐</a></dd>
                        <dd><a href="#">杀毒软件</a></dd>
                    </dl>
                </div>
                <div class="links3">
                    <h4>软件下载</h4>
                    <div class="icon1">
                        <span><a href="https://v.qq.com/biu/download#iPhone" target="_blank"></a></span>
                        <p>手机版</p>
                    </div>
                    <div class="icon2">
                        <span><a href="https://v.qq.com/biu/download#Windows" target="_blank"></a></span>
                        <p>Windows版</p>
                    </div>
                    <div class="icon3">
                        <span><a href="https://v.qq.com/biu/download#Mac" target="_blank"></a></span>
                        <P>Mac版</P>
                    </div>
                    <div class="icon4">
                        <span><a href="https://v.qq.com/biu/download#Pad" target="_blank"></a></span>
                        <p>iPad版</p>
                    </div>
                    <div class="icon5">
                        <span><a href="https://v.qq.com/biu/download#TV" target="_blank"></a></span>
                        <p>TV版</p>
                    </div>
                </div>
                <div class="links4">
                    <dl>
                        <dt>服务</dt>
                        <dd><a href="#">客服</a></dd>
                        <dd><a href="#">反馈</a></dd>
                        <dd><a href="#">侵权投诉</a></dd>
                        <dd><a href="#">免广告合作</a></dd>
                        <dd><a href="#">vip采购</a></dd>
                    </dl>
                </div>
            </div>
            <!-- 2、声明部分部分 -->
            <div class="speak">
                <p>粤网文[2017]6138-1456号 | 网络视听许可证1904073号 | 增值电信业务经营许可证：粤B2-20090059 | 粤公网安备 44030002000001号</p>
                <p>关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
                <p>Copyright © 1998 - 2021 Tencent. All Rights Reserved.</p>
                <p>腾讯公司 版权所有</p>
            </div>
            <div class="img">
                <a href="#"><img src="images/footer/工商网监.png" alt=""></a>
            </div>
        </footer>
    </div>
</body>
posted @   Lencamo  阅读(3398)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛