search

博客列表 >用grid布局写一个视频首页

用grid布局写一个视频首页

P粉933302309
P粉933302309原创
2022年07月27日 11:14:48625浏览

仿某视频网站

效果图如下

直接给上代码

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. }
上一条：项目部署到Linux下一条：仿站能做什么？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多