之前發布過一個純靜態的訪騰訊注冊頁面，所以呢！今天發布一個大的web網頁項目——【仿騰訊視頻】；也是純CSS、HTML。
其中還使用了 字體圖標、輪播圖為css實現的；
頁面共5個網頁，頁面的小圖標來自icomoon字庫和阿里圖標庫；
頁面的效果
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>
👀
想要獲得完整版【仿騰訊視頻】的最新源碼，可以點擊頁面右上角的GitHub圖標即可下載完整源碼。