Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用grid布局写一个视频首页
Blogger Information
Blog 17
fans 1
comment 0
visits 8737
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
用grid布局写一个视频首页
P粉933302309
Original
627 people have browsed it

仿某视频网站

效果图如下

直接给上代码

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>腾讯视频</title>
  8.     <link rel="stylesheet" href="css/index.css" />
  9.   </head>
  10.   <body>
  11. <header class="top">
  12.       <div class="top_logo">
  13.         <!-- logo -->
  14.         <a href=""
  15. <img
  16.          src="https://puui.qpic.cn/vupload/0/1570516378024_vr59hnsql8.png/0"
  17.             alt=""
  18.         /></a>
  19.         <div class="search">
  20.           <input
  21.             type="text"
  22.             placeholder="请输入搜索内容"
  23.             style="outline: none"
  24.           />
  25.           <span class="iconfont icon-31sousuo"></span>
  26.         </div>
  27.         <div class="sousuo">
  28.           <span>登录</span>
  29.           <span>打开APP</span>
  30.         </div>
  31.         <!-- 搜索 -->
  32.       </div>
  33.       <div class="daohang">
  34.         <a href="">精选</a>
  35.         <a href="">电视剧</a>
  36.         <a href="">VIP</a>
  37.         <a href="">NBA</a>
  38.         <a href="">电影</a>
  39.         <a href="">综艺</a>
  40.         <a href="">动漫</a>
  41.         <a href="">少儿</a>
  42.       </div>
  43.     </header>
  44.     <main class="main_top">
  45.       <!-- 轮播图 -->
  46.       <div class="luobo">
  47.         <a href=""
  48. <img
  49.             src="https://puui.qpic.cn/tv/0/1246465846_1080607/0?max_age=7776000"
  50.             alt=""
  51.         /></a>
  52.         <span class="luobo_jiesao"
  53. 【斗罗大陆⚡更新】此刻，熊熊烈焰燃于我手！</span>
  54.       </div>
  55.       <!-- 列表 -->
  56.       <!-- 重磅热搜 -->
  57.       <div class="main_list_zhongbang">
  58.         <div class="fenlei">
  59.           <span class="lanmu">重磅热播</span>
  60.           <span>更多</span>
  61.         </div>
  62.         <div>
  63.           <ul class="litm">
  64.             <li class="img_1">
  65.               <a href=""
  66. <img
  67.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fr1ry1o1656480949986/0?max_age=7776000"
  68.                   alt=""
  69.                 />
  70.               </a>
  71.             </li>
  72.             <li><span>龙族</span></li>
  73.             <li class="litm_jiesao"><span>凡王之血，必以剑终！</span></li>
  74.           </ul>
  75.           <ul class="litm">
  76.             <li>
  77.               <a href=""
  78. <img
  79.                   src="https://puui.qpic.cn/vcover_hz_pic/0/yl6lapwmmx5ivew1635490256534/0?max_age=7776000"
  80.                   alt=""
  81.               /></a>
  82.             </li>
  83.             <li><span>妖神记</span></li>
  84.             <li class="litm_jiesao"><span>重生踏足武道巅峰</span></li>
  85.           </ul>
  86.           <ul class="litm">
  87.             <li>
  88.               <a href=""
  89. <img
  90.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200maswqzu1651902452584/0?max_age=7776000"
  91.                   alt=""
  92.               /></a>
  93.             </li>
  94.             <li><span>通天塔</span></li>
  95.             <li class="litm_jiesao"><span>秦俊杰邓家佳揭秘情欲谜案</span></li>
  96.           </ul>
  97.           <ul class="litm">
  98.             <li>
  99.               <a href=""
  100. <img
  101.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200a7qrcod1631776770594/0?max_age=7776000"
  102.                   alt=""
  103.               /></a>
  104.             </li>
  105.             <li><span>一人之下 第1季·动态漫</span></li>
  106.             <li class="litm_jiesao"><span>长生不老冯宝宝</span></li>
  107.           </ul>
  108.           <ul class="litm">
  109.             <li>
  110.               <a href=""
  111. <img
  112.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200sm0qv1l1629282945110/0?max_age=7776000"
  113.                   alt=""
  114.               /></a>
  115.             </li>
  116.             <li><span>我气哭了百万修炼者</span></li>
  117.             <li class="litm_jiesao"><span>大孝子气人逆天之路</span></li>
  118.           </ul>
  119.           <ul class="litm">
  120.             <li>
  121.               <a href=""
  122. <img
  123.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc002005p5bbvh1657157115878/0?max_age=7776000"
  124.                   alt=""
  125.               /></a>
  126.             </li>
  127.             <li><span>浪子降魔</span></li>
  128.             <li class="litm_jiesao"><span>神力少年何与杀虎斩龙</span></li>
  129.           </ul>
  130.         </div>
  131.       </div>
  132.       <!-- 猜你喜欢 -->
  133.       <div class="main_list_live">
  134.         <div class="fenlei">
  135.           <span class="lanmu">猜你喜欢</span>
  136.           <span>更多</span>
  137.         </div>
  138.         <div>
  139.           <ul class="litm">
  140.             <li>
  141.               <a href=""
  142. <img
  143.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200vmd652y1656904220599/0?max_age=7776000"
  144.                   alt=""
  145.               /></a>
  146.             </li>
  147.             <li><span>星汉灿烂</span></li>
  148.             <li class="litm_jiesao"><span>吴磊赵露思“甜虐”救赎</span></li>
  149.           </ul>
  150.           <ul class="litm">
  151.             <li>
  152.               <a href=""
  153. <img
  154.                   src="https://puui.qpic.cn/vcover_hz_pic/0/m441e3rjq9kwpsc1648255354751/0?max_age=7776000"
  155.                   alt=""
  156.               /></a>
  157.             </li>
  158.             <li><span>斗罗大陆</span></li>
  159.             <li class="litm_jiesao"><span>此生不悔入唐门</span></li>
  160.           </ul>
  161.           <ul class="litm">
  162.             <li>
  163.               <a href=""
  164. <img
  165.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200p51jpn71648780963882/0?max_age=7776000"
  166.                   alt=""
  167.               /></a>
  168.             </li>
  169.             <li><span>梦华录</span></li>
  170.             <li class="litm_jiesao"><span>刘亦菲陈晓共闯大宋繁华</span></li>
  171.           </ul>
  172.           <ul class="litm">
  173.             <li>
  174.               <a href=""
  175. <img
  176.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mcv8hkc8zk8lnov1628408048303/0?max_age=7776000"
  177.                   alt=""
  178.               /></a>
  179.             </li>
  180.             <li><span>完美世界</span></li>
  181.             <li class="litm_jiesao"><span>岁月淹埋，休想把我沉浮！</span></li>
  182.           </ul>
  183.           <ul class="litm">
  184.             <li>
  185.               <a href=""
  186. <img
  187.                   src="    https://puui.qpic.cn/vcover_hz_pic/0/mzc00200zk14u3x1585545437584/0?max_age=7776000"
  188.                   alt=""
  189.               /></a>
  190.             </li>
  191.             <li><span>拜托了，我饿</span></li>
  192.             <li class="litm_jiesao"><span>马伯骞家博物馆造型超帅</span></li>
  193.           </ul>
  194.           <ul class="litm">
  195.             <li>
  196.               <a href=""
  197. <img
  198.                   src="https://puui.qpic.cn/vcover_hz_pic/0/p24gpftuz8qjz0gt1463236222.jpg/0?max_age=7776000"
  199.                   alt=""
  200.               /></a>
  201.             </li>
  202.             <li><span>x诊所</span></li>
  203.             <li class="litm_jiesao"><span>神力少年何与杀虎斩龙</span></li>
  204.           </ul>
  205.           <ul class="litm">
  206.             <li>
  207.               <a href=""
  208. <img
  209.                   src="    https://puui.qpic.cn/tv/0/1246446523_1080607/0?max_age=7776000"
  210.                   alt=""
  211.               /></a>
  212.             </li>
  213.             <li><span>一起同过窗3·更新</span></li>
  214.             <li class="litm_jiesao"><span>经典校园剧回归</span></li>
  215.           </ul>
  216.           <ul class="litm">
  217.             <li>
  218.               <a href=""
  219. <img
  220.                   src="https://puui.qpic.cn/tv/0/1246469448_1080607/0?max_age=7776000"
  221.                   alt=""
  222.               /></a>
  223.             </li>
  224.             <li><span>定时之恋·更新</span></li>
  225.             <li class="litm_jiesao"><span>少女跨时空体验双面人生</span></li>
  226.           </ul>
  227.           <ul class="litm">
  228.             <li>
  229.               <a href=""
  230. <img
  231.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200x1fxkf21655179297201/0?max_age=7776000"
  232.                   alt=""
  233.               /></a>
  234.             </li>
  235.             <li><span>遇见璀璨的你</span></li>
  236.             <li class="litm_jiesao"><span>陈乔恩金瀚极限暧昧较量</span></li>
  237.           </ul>
  238.           <ul class="litm">
  239.             <li>
  240.               <a href=""
  241. <img
  242.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200crgj4471658298754432/0?max_age=7776000"
  243.                   alt=""
  244.               /></a>
  245.             </li>
  246.             <li><span>龙一，你要怎样</span></li>
  247.             <li class="litm_jiesao"><span>中二少爷直球追妻</span></li>
  248.           </ul>
  249.           <ul class="litm">
  250.             <li>
  251.               <a href=""
  252. <img
  253.                   src="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200i5qtikl1652272384068/0?max_age=7776000"
  254.                   alt=""
  255.               /></a>
  256.             </li>
  257.             <li><span>夏小姐的先婚后爱</span></li>
  258.             <li class="litm_jiesao"><span>先婚后爱总裁恋上替嫁女</span></li>
  259.           </ul>
  260.           <ul class="litm">
  261.             <li>
  262.               <a href=""
  263. <img
  264.                   src="    https://puui.qpic.cn/vcover_hz_pic/0/mzc00200maswqzu1651902452584/0?max_age=7776000"
  265.                   alt=""
  266.               /></a>
  267.             </li>
  268.             <li><span>通天塔</span></li>
  269.             <li class="litm_jiesao"><span>秦俊杰邓家佳揭秘情欲谜案</span></li>
  270.           </ul>
  271.           <ul class="litm">
  272.             <li>
  273.               <a href=""
  274. <img
  275.                   src="https://puui.qpic.cn/tv/0/1246321871_450630/0?max_age=7776000"
  276.                   alt=""
  277.               /></a>
  278.             </li>
  279.             <li><span>掌门女友2</span></li>
  280.             <li class="litm_jiesao"><span>明星老板爱上掌门小保镖</span></li>
  281.           </ul>
  282.           <ul class="litm">
  283.             <li>
  284.               <a href=""
  285. <img
  286.                   src="https://puui.qpic.cn/tv/0/1246252031_450630/0?max_age=7776000"
  287.                   alt=""
  288.               /></a>
  289.             </li>
  290.             <li><span>致命香气</span></li>
  291.             <li class="litm_jiesao"><span>猎心调香 甜虐攻防</span></li>
  292.           </ul>
  293.           <ul class="litm">
  294.             <li>
  295.               <a href=""
  296. <img
  297.                   src="https://puui.qpic.cn/tv/0/1246122158_450630/0?max_age=7776000"
  298.                   alt=""
  299.               /></a>
  300.             </li>
  301.             <li><span>队长不对劲</span></li>
  302.             <li class="litm_jiesao"><span>篮球天才意外性转寻真爱</span></li>
  303.           </ul>
  304.           <ul class="litm">
  305.             <li>
  306.               <a href=""
  307. <img
  308.                   src="https://puui.qpic.cn/tv/0/1244109437_450630/0?max_age=7776000"
  309.                   alt=""
  310.               /></a>
  311.             </li>
  312.             <li><span>日和月</span></li>
  313.             <li class="litm_jiesao"><span>保洁小妹攻略霸总</span></li>
  314.           </ul>
  315.         </div>
  316.       </div>
  317.     </main>
  318.     <!-- 底部 -->
  319.     <footer>
  320.       <div class="APP">
  321.         <a href=""
  322. <img src="https://vfiles.gtimg.cn/vupload/20210415/6407271618491171592.png"
  323.             alt=""
  324.           />打开APP看海量高清内容</a>
  325.       </div>
  326.     </footer>
  327. </body>
  328. </html>

css代码

  1. @import url(reset.css);
  2. @import url(../icon_font/iconfont.css);
  3. /* 顶部 */
  4. /* logo */
  5. .top {
  6.   height: 0.5rem;
  7.   position: fixed;
  8.   z-index: 100;
  9.   left: 0;
  10.   top: 0;
  11.   right: 0;
  12.   /* background-color: #ffffff; */
  13. }
  14. .top .top_logo {
  15.   /* padding-top: 0.1rem; */
  16.   height: 0.3rem;
  17.   display: grid;
  18.   grid-template-columns: repeat(3, 1fr);
  19.   place-content: center;
  20.   background-color: #ffffff;
  21. }
  22. .top .top_logo a {
  23.   width: 0.5rem;
  24.   padding-left: 0.15rem;
  25. }
  26. .top .top_logo .sousuo {
  27.   padding-top: 0.02rem;
  28.   display: grid;
  29.   grid-template-columns: repeat(3, auto);
  30.   place-items: center;
  31.   place-content: space-between;
  32. }
  33. /* 搜索框 */
  34. .top .top_logo.search {
  35.   display: flex;
  36. }
  37. .top .top_logo input {
  38.   border: 1px solid #ff9463;
  39.   border-radius: 30px;
  40.   padding-left: 0.1rem;
  41.   height: 0.15rem;
  42.   width: 0.8rem;
  43.   margin-left: 0.08rem;
  44. }
  45. .top .top_logo .search .icon-31sousuo {
  46.   margin-left: -0.16rem;
  47.   font-size: large;
  48.   color: #a4a8c0;
  49.   margin-top: -0.2rem;
  50. }
  51. .top .top_logo .search .icon-31sousuo:hover {
  52.   color: #ff6022;
  53.   cursor: pointer;
  54. }
  55. .top .top_logo .sousuo > span:nth-last-of-type(1) {
  56.   background-color: #ff6022;
  57.   width: 0.42rem;
  58.   height: 0.15rem;
  59.   font-size: smaller;
  60.   color: aliceblue;
  61.   border-radius: 20px;
  62.   text-align: center;
  63.   font-size: 70%;
  64.   margin-right: 0.1rem;
  65.   margin-top: 0.02rem;
  66.   padding-top: 0.02rem;
  67. }
  68. .top .top_logo .sousuo > span:first-of-type {
  69.   padding-top: 0.02rem;
  70.   width: 0.3rem;
  71.   margin-left: 0.05rem;
  72.   place-self: center end;
  73.   font-size: 0.08rem;
  74.   color: #3a5469;
  75. }
  76. /* 导航 */
  77. .top .daohang {
  78.   display: grid;
  79.   height: 0.2rem;
  80.   font-weight: bold;
  81.   font-size: 0.08rem;
  82.   grid-template-columns: repeat(8, auto);
  83.   place-items: center;
  84.   background-color: #ffffff;
  85.   /* gap: 0.1rem; */
  86. }
  87. .top .daohang a:hover {
  88.   color: #ff6022;
  89.   transform: scaleX(1);
  90. }
  91. /* 轮播图 */
  92. .main_top > .luobo {
  93.   margin-top: 0.5rem;
  94.   display: grid;
  95.   background-color: #f3f5f5;
  96.   grid-template-rows: repeat(2, auto);
  97. }
  98. .main_top > .luobo a,
  99. .luobo_jiesao {
  100.   padding: 0 0.1rem;
  101.   font-size: 0.08rem;
  102. }
  103. /* 列表 */
  104. /* 重磅热播 */
  105. .main_list_zhongbang {
  106.   margin: 0.1rem 0.1rem;
  107. }
  108. .main_list_zhongbang .fenlei {
  109.   display: grid;
  110.   grid-template-columns: repeat(2, auto);
  111.   place-content: space-between;
  112. }
  113. .main_list_zhongbang .fenlei span:nth-last-of-type(1) {
  114.   font-size: smaller;
  115.   place-self: end;
  116.   color: #5b6b69;
  117. }
  118. .main_list_zhongbang div {
  119.   display: grid;
  120.   grid-template-columns: repeat(2, 1fr);
  121.   grid-template-rows: repeat(3, auto);
  122.   margin: 0 0.01rem;
  123.   gap: 0.05rem;
  124. }
  125. .main_list_zhongbang div .litm li span:first-of-type {
  126.   font-size: small;
  127. }
  128. .main_list_zhongbang .litm .litm_jiesao {
  129.   color: #949eaa;
  130. }
  131. .main_list_zhongbang .lanmu {
  132.   position: relative;
  133.   margin-top: 0.1rem;
  134.   font-weight: bold;
  135. }
  136. /* 集数 */
  137. /* 猜你喜欢 */
  138. .main_list_live {
  139.   margin: 0.1rem 0.1rem;
  140. }
  141. .main_list_live .fenlei {
  142.   display: grid;
  143.   grid-template-columns: repeat(2, auto);
  144.   place-content: space-between;
  145. }
  146. .main_list_live .fenlei span:nth-last-of-type(1) {
  147.   font-size: smaller;
  148.   place-self: end;
  149.   color: #5b6b69;
  150. }
  151. .main_list_live div {
  152.   display: grid;
  153.   grid-template-columns: repeat(2, 1fr);
  154.   grid-template-rows: repeat(3, auto);
  155.   margin: 0 0.01rem;
  156.   gap: 0.05rem;
  157. }
  158. .main_list_live div .litm li span:first-of-type {
  159.   font-size: small;
  160. }
  161. .main_list_live .litm .litm_jiesao {
  162.   color: #949eaa;
  163. }
  164. .main_list_live .lanmu {
  165.   position: relative;
  166.   margin-top: 0.1rem;
  167.   font-weight: bold;
  168. }
  169. /* 底部 */
  170. footer {
  171.   height: 0.2rem;
  172.   position: fixed;
  173.   z-index: 100;
  174.   left: 0;
  175.   right: 0;
  176.   bottom: 0.1rem;
  177. }
  178. footer .APP {
  179.   display: flex;
  180.   place-content: center;
  181.   height: 0.2rem;
  182. }
  183. footer div a {
  184.   font-size: smaller;
  185.   background-color: #ff6022;
  186.   color: #ffffff;
  187.   text-align: center;
  188.   /* padding-top: 0.02rem; */
  189.   border-radius: 30px;
  190.   width: 1.6rem;
  191. }
  192. footer div a img {
  193.   padding-top: 0.02rem;
  194.   width: 8%;
  195. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post