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

用grid布局写一个视频首页

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

仿某视频网站

效果图如下

直接给上代码

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. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议