仿腾讯视频（纯CSS、HTML）delegate unit
如何制作网页登录
  之前发布过⼀个纯静态的访腾讯注册页⾯，所以呢！今天发布⼀个⼤的web⽹页项⽬——【仿腾讯视频】；也是纯CSS、HTML。
其中还使⽤了字体图标、轮播图为css实现的；
页⾯共5个⽹页，页⾯的⼩图标来⾃icomoon字库和阿⾥图标库；
页⾯的效果
index.html
极限挑战介绍.html
全⽹热搜榜.html
热搜榜更多内容.html
⽹页间跳转
index.html
极限挑战介绍.html
全⽹热搜榜.html
热搜榜更多内容.html
index.html页⾯的HTML代码如下：
<body>
<div class="ren">
<!-- 头部 -->
fontweight加粗
<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>html个人网页完整代码div+css
</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="v.qq/x/cover/mzc002003h7vka8.html" target="_blank">奔跑吧</a></li>
<li><a href="v.qq/x/cover/mzc00200y4wycre.html" target="_blank">千古玦尘⾸播</a></li>
<li><a href="v.qq/x/cover/mzc0020029wfxgg.html" target="_blank">⼼动的信号</a></li>
<li class="my">
<a href="v.qq/x/cover/mzc00200bcryyw5.html" target="_blank">直击上影</a>
</li>
<li><a href="v.qq/x/cover/qjr4mfe8xf85j0j.html" target="_blank">双世宠妃3</a></li>
<li><a href="v.qq/x/cover/gehpfier9upkqz5.html" target="_blank">眷思量</a></li>
<li><a href="v.qq/x/page/f3243xebb7k.html" target="_blank">光辉历程</a></li>
<li><a href="v.qq/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="v.qq/biu/download#iPhone" target="_blank"> </a></span>
<p>⼿机版</p>
</div>
<div class="icon2">
<span><a href="v.qq/biu/download#Windows" target="_blank"> </a></span>
<p>Windows版</p>
</div>
<div class="icon3">
<span><a href="v.qq/biu/download#Mac" target="_blank"> </a></span>
<P>Mac版</P>
</div>
<div class="icon4">
<span><a href="v.qq/biu/download#Pad" target="_blank"> </a></span>
<p>iPad版</p>
</div>
<div class="icon5">
<span><a href="v.qq/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>
想要获得完整版【仿腾讯视频】的最新源码，可以点击页⾯右上⾓的GitHub图标即可下载完整源码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。