收藏
PHPz批改状态：合格
老师批语：
效果图如下
html代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>腾讯视频</title><link rel="stylesheet" href="css/index.css" /></head><body><header class="top"><div class="top_logo"><!-- logo --><a href=""<imgsrc="https://puui.qpic.cn/vupload/0/1570516378024_vr59hnsql8.png/0"alt=""/></a><div class="search"><inputtype="text"placeholder="请输入搜索内容"style="outline: none"/><span class="iconfont icon-31sousuo"></span></div><div class="sousuo"><span>登录</span><span>打开APP</span></div><!-- 搜索 --></div><div class="daohang"><a href="">精选</a><a href="">电视剧</a><a href="">VIP</a><a href="">NBA</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">少儿</a></div></header><main class="main_top"><!-- 轮播图 --><div class="luobo"><a href=""<imgsrc="https://puui.qpic.cn/tv/0/1246465846_1080607/0?max_age=7776000"alt=""/></a><span class="luobo_jiesao"【斗罗大陆⚡更新】此刻，熊熊烈焰燃于我手！</span></div><!-- 列表 --><!-- 重磅热搜 --><div class="main_list_zhongbang"><div class="fenlei"><span class="lanmu">重磅热播</span><span>更多</span></div><div><ul class="litm"><li class="img_1"><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200fr1ry1o1656480949986/0?max_age=7776000"alt=""/></a></li><li><span>龙族</span></li><li class="litm_jiesao"><span>凡王之血，必以剑终！</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/yl6lapwmmx5ivew1635490256534/0?max_age=7776000"alt=""/></a></li><li><span>妖神记</span></li><li class="litm_jiesao"><span>重生踏足武道巅峰</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200maswqzu1651902452584/0?max_age=7776000"alt=""/></a></li><li><span>通天塔</span></li><li class="litm_jiesao"><span>秦俊杰邓家佳揭秘情欲谜案</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200a7qrcod1631776770594/0?max_age=7776000"alt=""/></a></li><li><span>一人之下 第1季·动态漫</span></li><li class="litm_jiesao"><span>长生不老冯宝宝</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200sm0qv1l1629282945110/0?max_age=7776000"alt=""/></a></li><li><span>我气哭了百万修炼者</span></li><li class="litm_jiesao"><span>大孝子气人逆天之路</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc002005p5bbvh1657157115878/0?max_age=7776000"alt=""/></a></li><li><span>浪子降魔</span></li><li class="litm_jiesao"><span>神力少年何与杀虎斩龙</span></li></ul></div></div><!-- 猜你喜欢 --><div class="main_list_live"><div class="fenlei"><span class="lanmu">猜你喜欢</span><span>更多</span></div><div><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200vmd652y1656904220599/0?max_age=7776000"alt=""/></a></li><li><span>星汉灿烂</span></li><li class="litm_jiesao"><span>吴磊赵露思“甜虐”救赎</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/m441e3rjq9kwpsc1648255354751/0?max_age=7776000"alt=""/></a></li><li><span>斗罗大陆</span></li><li class="litm_jiesao"><span>此生不悔入唐门</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200p51jpn71648780963882/0?max_age=7776000"alt=""/></a></li><li><span>梦华录</span></li><li class="litm_jiesao"><span>刘亦菲陈晓共闯大宋繁华</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mcv8hkc8zk8lnov1628408048303/0?max_age=7776000"alt=""/></a></li><li><span>完美世界</span></li><li class="litm_jiesao"><span>岁月淹埋，休想把我沉浮！</span></li></ul><ul class="litm"><li><a href=""<imgsrc=" https://puui.qpic.cn/vcover_hz_pic/0/mzc00200zk14u3x1585545437584/0?max_age=7776000"alt=""/></a></li><li><span>拜托了，我饿</span></li><li class="litm_jiesao"><span>马伯骞家博物馆造型超帅</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/p24gpftuz8qjz0gt1463236222.jpg/0?max_age=7776000"alt=""/></a></li><li><span>x诊所</span></li><li class="litm_jiesao"><span>神力少年何与杀虎斩龙</span></li></ul><ul class="litm"><li><a href=""<imgsrc=" https://puui.qpic.cn/tv/0/1246446523_1080607/0?max_age=7776000"alt=""/></a></li><li><span>一起同过窗3·更新</span></li><li class="litm_jiesao"><span>经典校园剧回归</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/tv/0/1246469448_1080607/0?max_age=7776000"alt=""/></a></li><li><span>定时之恋·更新</span></li><li class="litm_jiesao"><span>少女跨时空体验双面人生</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200x1fxkf21655179297201/0?max_age=7776000"alt=""/></a></li><li><span>遇见璀璨的你</span></li><li class="litm_jiesao"><span>陈乔恩金瀚极限暧昧较量</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200crgj4471658298754432/0?max_age=7776000"alt=""/></a></li><li><span>龙一，你要怎样</span></li><li class="litm_jiesao"><span>中二少爷直球追妻</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/vcover_hz_pic/0/mzc00200i5qtikl1652272384068/0?max_age=7776000"alt=""/></a></li><li><span>夏小姐的先婚后爱</span></li><li class="litm_jiesao"><span>先婚后爱总裁恋上替嫁女</span></li></ul><ul class="litm"><li><a href=""<imgsrc=" https://puui.qpic.cn/vcover_hz_pic/0/mzc00200maswqzu1651902452584/0?max_age=7776000"alt=""/></a></li><li><span>通天塔</span></li><li class="litm_jiesao"><span>秦俊杰邓家佳揭秘情欲谜案</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/tv/0/1246321871_450630/0?max_age=7776000"alt=""/></a></li><li><span>掌门女友2</span></li><li class="litm_jiesao"><span>明星老板爱上掌门小保镖</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/tv/0/1246252031_450630/0?max_age=7776000"alt=""/></a></li><li><span>致命香气</span></li><li class="litm_jiesao"><span>猎心调香 甜虐攻防</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/tv/0/1246122158_450630/0?max_age=7776000"alt=""/></a></li><li><span>队长不对劲</span></li><li class="litm_jiesao"><span>篮球天才意外性转寻真爱</span></li></ul><ul class="litm"><li><a href=""<imgsrc="https://puui.qpic.cn/tv/0/1244109437_450630/0?max_age=7776000"alt=""/></a></li><li><span>日和月</span></li><li class="litm_jiesao"><span>保洁小妹攻略霸总</span></li></ul></div></div></main><!-- 底部 --><footer><div class="APP"><a href=""<img src="https://vfiles.gtimg.cn/vupload/20210415/6407271618491171592.png"alt=""/>打开APP看海量高清内容</a></div></footer></body></html>css代码
@import url(reset.css);@import url(../icon_font/iconfont.css);/* 顶部 *//* logo */.top {height: 0.5rem;position: fixed;z-index: 100;left: 0;top: 0;right: 0;/* background-color: #ffffff; */}.top .top_logo {/* padding-top: 0.1rem; */height: 0.3rem;display: grid;grid-template-columns: repeat(3, 1fr);place-content: center;background-color: #ffffff;}.top .top_logo a {width: 0.5rem;padding-left: 0.15rem;}.top .top_logo .sousuo {padding-top: 0.02rem;display: grid;grid-template-columns: repeat(3, auto);place-items: center;place-content: space-between;}/* 搜索框 */.top .top_logo.search {display: flex;}.top .top_logo input {border: 1px solid #ff9463;border-radius: 30px;padding-left: 0.1rem;height: 0.15rem;width: 0.8rem;margin-left: 0.08rem;}.top .top_logo .search .icon-31sousuo {margin-left: -0.16rem;font-size: large;color: #a4a8c0;margin-top: -0.2rem;}.top .top_logo .search .icon-31sousuo:hover {color: #ff6022;cursor: pointer;}.top .top_logo .sousuo > span:nth-last-of-type(1) {background-color: #ff6022;width: 0.42rem;height: 0.15rem;font-size: smaller;color: aliceblue;border-radius: 20px;text-align: center;font-size: 70%;margin-right: 0.1rem;margin-top: 0.02rem;padding-top: 0.02rem;}.top .top_logo .sousuo > span:first-of-type {padding-top: 0.02rem;width: 0.3rem;margin-left: 0.05rem;place-self: center end;font-size: 0.08rem;color: #3a5469;}/* 导航 */.top .daohang {display: grid;height: 0.2rem;font-weight: bold;font-size: 0.08rem;grid-template-columns: repeat(8, auto);place-items: center;background-color: #ffffff;/* gap: 0.1rem; */}.top .daohang a:hover {color: #ff6022;transform: scaleX(1);}/* 轮播图 */.main_top > .luobo {margin-top: 0.5rem;display: grid;background-color: #f3f5f5;grid-template-rows: repeat(2, auto);}.main_top > .luobo a,.luobo_jiesao {padding: 0 0.1rem;font-size: 0.08rem;}/* 列表 *//* 重磅热播 */.main_list_zhongbang {margin: 0.1rem 0.1rem;}.main_list_zhongbang .fenlei {display: grid;grid-template-columns: repeat(2, auto);place-content: space-between;}.main_list_zhongbang .fenlei span:nth-last-of-type(1) {font-size: smaller;place-self: end;color: #5b6b69;}.main_list_zhongbang div {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(3, auto);margin: 0 0.01rem;gap: 0.05rem;}.main_list_zhongbang div .litm li span:first-of-type {font-size: small;}.main_list_zhongbang .litm .litm_jiesao {color: #949eaa;}.main_list_zhongbang .lanmu {position: relative;margin-top: 0.1rem;font-weight: bold;}/* 集数 *//* 猜你喜欢 */.main_list_live {margin: 0.1rem 0.1rem;}.main_list_live .fenlei {display: grid;grid-template-columns: repeat(2, auto);place-content: space-between;}.main_list_live .fenlei span:nth-last-of-type(1) {font-size: smaller;place-self: end;color: #5b6b69;}.main_list_live div {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(3, auto);margin: 0 0.01rem;gap: 0.05rem;}.main_list_live div .litm li span:first-of-type {font-size: small;}.main_list_live .litm .litm_jiesao {color: #949eaa;}.main_list_live .lanmu {position: relative;margin-top: 0.1rem;font-weight: bold;}/* 底部 */footer {height: 0.2rem;position: fixed;z-index: 100;left: 0;right: 0;bottom: 0.1rem;}footer .APP {display: flex;place-content: center;height: 0.2rem;}footer div a {font-size: smaller;background-color: #ff6022;color: #ffffff;text-align: center;/* padding-top: 0.02rem; */border-radius: 30px;width: 1.6rem;}footer div a img {padding-top: 0.02rem;width: 8%;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
