html+css前端作业 王者光彩官网6个页面无js 大门生HTML5期末作业 Web前端网页制作 html5+css3+js

[复制链接]
发表于 2026-4-24 09:37:36 | 显示全部楼层 |阅读模式
html+css前端作业 王者光彩官网6个页面无js 大门生HTML5期末作业 Web前端网页制作 html5+css3+js

网页作品代码简单,可使用恣意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等恣意html编辑软件举行运行及修改编辑等使用)。

获取源码

1,访问该网站 https://download.csdn.net/download/qq_42431718/89571150
2,点击上方下载
目次1


目次2


项目视频


   王者光彩6个页面(无js)

页面1


页面2


页面3


页面4


页面5


页面6


代码展示

  1. <body>
  2.     <!-- 顶部 -->
  3.     <div class="top">
  4.       <div class="top_wrapper area">
  5.         <div class="left-area">
  6.           <h2 class="logo">
  7.             <a href="#">腾讯游戏</a>
  8.           </h2>
  9.           <div class="recommend">
  10.             <img src="https://tiem-cdn.qq.com/o2/images/65b6ddbc07dff9692fc1787ab92def71.jpg" alt="" />
  11.             <a class="recommend-ad" href="#">
  12.               <img src="https://tiem-cdn.qq.com/o2/images/60fc172906f290f3e101ece2ae43f47c.jpg" alt="" />
  13.             </a>
  14.           </div>
  15.         </div>
  16.         <ul class="right-area">
  17.           <li class="item">
  18.             <a class="growth" href="#">
  19.               <i class="icon-grow"></i>
  20.               成长守护平台
  21.             </a>
  22.           </li>
  23.           <li class="item">
  24.             <a class="ranking" href="#">腾讯游戏排行榜</a>
  25.           </li>
  26.         </ul>
  27.       </div>
  28.     </div>
  29.     <div class="main">
  30.       <div class="header">
  31.         <div class="area headder_wrapper">
  32.           <div class="left-area">
  33.             <h1 class="logo">
  34.               <a href="#">王者荣耀</a>
  35.             </h1>
  36.             <ul class="nav-list">
  37.               <li class="item active">
  38.                 <a href="">
  39.                   游戏资料
  40.                   <span>DATA</span>
  41.                 </a>
  42.               </li>
  43.               <li class="item">
  44.                 <a href="./introduce.html">
  45.                   内容中心
  46.                   <span>CONTENT</span>
  47.                 </a>
  48.               </li>
  49.               <li class="item">
  50.                 <a href="./herointroduce.html">
  51.                   赛事中心
  52.                   <span>MATCH</span>
  53.                 </a>
  54.               </li>
  55.               <li class="item">
  56.                 <a href="./strategy.html">
  57.                   百态王者
  58.                   <span>CULTURE</span>
  59.                 </a>
  60.               </li>
  61.               <li class="item">
  62.                 <a href="">
  63.                   社区互动
  64.                   <span>COMMUNITY</span>
  65.                 </a>
  66.               </li>
  67.               <li class="item">
  68.                 <a href="">
  69.                   玩家支持
  70.                   <span>PLAYER</span>
  71.                 </a>
  72.               </li>
  73.               <li class="item">
  74.                 <a href="">
  75.                   IP新游
  76.                   <span>NEW GAMES</span>
  77.                 </a>
  78.               </li>
  79.             </ul>
  80.           </div>
  81.           <div class="right-area">
  82.             <a class="imge" href="#">
  83.               <img src="./img/login.png" alt="" />
  84.             </a>
  85.             <div class="info">
  86.               <a style="color: aliceblue" href="#">欢迎登录</a>
  87.               <p style="color: aliceblue">登陆后查看游戏战绩</p>
  88.             </div>
  89.           </div>
  90.         </div>
  91.         <div class="dropmenu">
  92.           <div class="inner">1234566</div>
  93.         </div>
  94.       </div>
  95.       <a class="link" href="#"></a>
  96.       <div class="main_wrapper">
  97.         <!-- main_news区域 -->
  98.         <div class="news-section">
  99.           <div class="banner">
  100.             <ul class="imge-list">
  101.               <li class="item">
  102.                 <a href="#">
  103.                   <img src="https://ossweb-img.qq.com/upload/adw/image/194/20240612/07d2d86f85880ef8f2e92652cf69adbf.jpeg" alt="" />
  104.                 </a>
  105.               </li>
  106.               <li class="item">
  107.                 <a href="#">
  108.                   <img src="https://ossweb-img.qq.com/upload/adw/image/194/20240612/defa3567d0579f09173fe1c0de21773b.jpeg" alt="" />
  109.                 </a>
  110.               </li>
  111.               <li class="item">
  112.                 <a href="#">
  113.                   <img src="https://ossweb-img.qq.com/upload/adw/image/194/20240614/3f65aee25a5e3262c94e8f99b5e8295b.jpeg" alt="" />
  114.                 </a>
  115.               </li>
  116.             </ul>
  117.             <ul class="title-list">
  118.               <li class="item active">
  119.                 <a href="#">夏季赛主题曲</a>
  120.               </li>
  121.               <li class="item">
  122.                 <a href="#">夏季赛开赛</a>
  123.               </li>
  124.               <li class="item">
  125.                 <a href="#">选手大名单</a>
  126.               </li>
  127.               <li class="item">
  128.                 <a href="#">K甲选手卡</a>
  129.               </li>
  130.               <li class="item">
  131.                 <a href="#">假期风景大片</a>
  132.               </li>
  133.             </ul>
  134.           </div>
  135.           <div class="news">
  136.             <ul class="title-list">
  137.               <li class="item active">
  138.                 <a href="#">热门</a>
  139.               </li>
  140.               <li class="item">
  141.                 <a href="#">新闻</a>
  142.               </li>
  143.               <li class="item">
  144.                 <a href="#">公告</a>
  145.               </li>
  146.               <li class="item">
  147.                 <a href="#">活动</a>
  148.               </li>
  149.               <li class="item">
  150.                 <a href="#">赛事</a>
  151.               </li>
  152.               <li class="item more">
  153.                 <a href="#">...</a>
  154.               </li>
  155.             </ul>
  156.             <p class="notice">
  157.               <a href="#">《魂斗罗:归来》七周年 和魂斗罗一起共庆盛典!</a>
  158.             </p>
  159.             <ul class="news-list">
  160.               <li class="item">
  161.                 <a class="desc news_type news_type_hot" href="#"> 大家最想要他!—活动皮肤票选结果公示! </a>
  162.                 <span class="date">05/30</span>
  163.               </li>
  164.               <li class="item">
  165.                 <a class="desc news_type news_type_hot" href="#"> 【投票选皮肤】活动开启,你最想要哪款? </a>
  166.                 <span class="date">05/30</span>
  167.               </li>
  168.               <li class="item">
  169.                 <a class="desc news_type news_type_hot" href="#"> 源梦大赛创作分享第三期——社区热度作品作者 </a>
  170.                 <span class="date">05/09</span>
  171.               </li>
  172.               <li class="item">
  173.                 <a class="desc news_type news_type_hot" href="#"> 王者小兵向你投来假期风景大片,请注意查收~ </a>
  174.                 <span class="date">05/07</span>
  175.               </li>
  176.               <li class="item">
  177.                 <a class="desc news_type news_type_hot" href="#">5月1日 朋友节好礼等你!</a>
  178.                 <span class="date">04/30</span>
  179.               </li>
  180.               <li class="item">
  181.                 <a class="desc news_type news_type_hot" href="#"> 源梦大赛创作分享第二期——入选人气创意奖作者 </a>
  182.                 <span class="date">04/30</span>
  183.               </li>
  184.               <li class="item">
  185.                 <a class="desc news_type news_type_hot" href="#"> 2024年第3期荣耀战令更新上线——守护天痕 </a>
  186.                 <span class="date">04/30</span>
  187.               </li>
  188.             </ul>
  189.           </div>
  190.           <div class="download">
  191.             <a href="#" class="download-btn"></a>
  192.             <a href="#" class="guard-btn"></a>
  193.             <a href="#" class="experience-btn"></a>
  194.           </div>
  195.         </div>
  196.         <div class="content-section"></div>
  197.         <div class="match-section"></div>
  198.         <!-- main_entrance区域 -->
  199.         <ul class="entrance-section">
  200.           <li class="item">
  201.             <a href="#">
  202.               <img src="./img/entrance_01.jpg" alt="" />
  203.             </a>
  204.           </li>
  205.           <li class="item">
  206.             <a href="#">
  207.               <img src="./img/entrance_02.png" alt="" />
  208.             </a>
  209.           </li>
  210.           <li class="item">
  211.             <a href="#">
  212.               <img src="./img/entrance_03.jpg" alt="" />
  213.             </a>
  214.           </li>
  215.           <li class="item">
  216.             <a href="#">
  217.               <img src="./img/entrance_04.png" alt="" />
  218.             </a>
  219.           </li>
  220.         </ul>
  221.         <!-- main_content -->
  222.         <div class="section-content">
  223.           <div class="left-content">
  224.             <div class="contetn-center">
  225.               <div class="section_header">
  226.                 <div class="header_left">
  227.                   <h3 class="title">内容中心</h3>
  228.                 </div>
  229.                 <div class="header_right">
  230.                   <a class="more" href="#">更多</a>
  231.                 </div>
  232.               </div>
  233.               <div class="tab_control">
  234.                 <div class="item active">精品栏目</div>
  235.                 <div class="line"></div>
  236.                 <div class="item">赛事精品</div>
  237.                 <div class="line"></div>
  238.                 <div class="item">英雄攻略</div>
  239.               </div>
  240.               <div class="tab_keyword">
  241.                 <div class="item active">最新</div>
  242.                 <div class="item">峡谷大气层</div>
  243.                 <div class="item">马菠萝奇闻录</div>
  244.                 <div class="item">狄仁杰封神榜</div>
  245.                 <div class="item">游走基本法</div>
  246.                 <div class="item">野王修炼手册</div>
  247.                 <div class="item">法王的荣耀</div>
  248.               </div>
  249.               <div class="tab_video">
  250.                 <a class="video_item" href="#">
  251.                   <div class="album">
  252.                     <img src="https://shp.qpic.cn/cfwebcap/0/06070a1afb80a53d28ddebd267957854/0/?width=230&height=140" alt="" />
  253.                     <div class="info">
  254.                       <span class="count">400.0万</span>
  255.                       <span>2023.02.28</span>
  256.                     </div>
  257.                     <div class="cover">
  258.                       <i class="icon_play"></i>
  259.                     </div>
  260.                   </div>
  261.                   <div class="desc">处处都是细节!职业选手教你玩朵莉亚</div>
  262.                 </a>
  263.                 <a class="video_item" href="#">
  264.                   <div class="album">
  265.                     <img
  266.                       src="https://campfire-1255653016.file.myqcloud.com/campfire-img/1721740923/1705477284725_%E6%89%BE%E4%B8%8D%E5%88%B0%E8%8A%82%E5%A5%8F%E6%B2%A1%E6%9C%89%E4%BC%A4%E5%AE%B3%EF%BC%9F%E6%B5%B7%E8%AF%BA%E6%89%93%E6%B3%95%E6%80%9D%E8%B7%AF%E6%95%99%E5%AD%A6.jpg"
  267.                       alt=""
  268.                     />
  269.                     <div class="info">
  270.                       <span class="count">400.0万</span>
  271.                       <span>2023.02.28</span>
  272.                     </div>
  273.                     <div class="cover">
  274.                       <i class="icon_play"></i>
  275.                     </div>
  276.                   </div>
  277.                   <div class="desc">找不到节奏没有伤害?海诺打法思路教学</div>
  278.                 </a>
  279.                 <a class="video_item" href="#">
  280.                   <div class="album">
  281.                     <img src="https://shp.qpic.cn/cfwebcap/0/69ea0c37569f75e9ae04b4e19c95f65a/0/?width=230&height=140" alt="" />
  282.                     <div class="info">
  283.                       <span class="count">400.0万</span>
  284.                       <span>2023.02.28</span>
  285.                     </div>
  286.                     <div class="cover">
  287.                       <i class="icon_play"></i>
  288.                     </div>
  289.                   </div>
  290.                   <div class="desc">英雄玩法介绍——大司命:巡游生死,执戈诛恶</div>
  291.                 </a>
  292.                 <a class="video_item" href="#">
  293.                   <div class="album">
  294.                     <img src="https://shp.qpic.cn/cfwebcap/0/8cb43662d086932cda572951e6b1639a/0/?width=230&height=140" alt="" />
  295.                     <div class="info">
  296.                       <span class="count">400.0万</span>
  297.                       <span>2023.02.28</span>
  298.                     </div>
  299.                     <div class="cover">
  300.                       <i class="icon_play"></i>
  301.                     </div>
  302.                   </div>
  303.                   <div class="desc">英雄玩法介绍——敖隐:化身白龙!火雨风雪,尽揽剑中</div>
  304.                 </a>
  305.                 <a class="video_item" href="#">
  306.                   <div class="album">
  307.                     <img src="https://shp.qpic.cn/cfwebcap/0/75159c6005f0aa8baa079b226944bacf/0/?width=230&height=140" alt="" />
  308.                     <div class="info">
  309.                       <span class="count">400.0万</span>
  310.                       <span>2023.02.28</span>
  311.                     </div>
  312.                     <div class="cover">
  313.                       <i class="icon_play"></i>
  314.                     </div>
  315.                   </div>
  316.                   <div class="desc">英雄玩法介绍——云中君品质升级:永久飞行,全新大招强势卷人!</div>
  317.                 </a>
  318.                 <a class="video_item" href="#">
  319.                   <div class="album">
  320.                     <img src="https://shp.qpic.cn/cfwebcap/0/70d24301cae63fe4cef1a5168f94c594/0/?width=230&height=140" alt="" />
  321.                     <div class="info">
  322.                       <span class="count">400.0万</span>
  323.                       <span>2023.02.28</span>
  324.                     </div>
  325.                     <div class="cover">
  326.                       <i class="icon_play"></i>
  327.                     </div>
  328.                   </div>
  329.                   <div class="desc">新法师海月玩法教学来袭!准备好在幻境中决斗了吗?</div>
  330.                 </a>
  331.                 <a class="video_item" href="#">
  332.                   <div class="album">
  333.                     <img src="https://shp.qpic.cn/cfwebcap/0/5d16932c89267e4646def79045f2eb9a/0/?width=230&height=140" alt="" />
  334.                     <div class="info">
  335.                       <span class="count">400.0万</span>
  336.                       <span>2023.02.28</span>
  337.                     </div>
  338.                     <div class="cover">
  339.                       <i class="icon_play"></i>
  340.                     </div>
  341.                   </div>
  342.                   <div class="desc">英雄玩法介绍——海诺:嗨,来逆转终局?!</div>
  343.                 </a>
  344.                 <a class="video_item" href="#">
  345.                   <div class="album">
  346.                     <img src="https://shp.qpic.cn/cfwebcap/0/4e1736f185a0569b7b87912b58e88921/0/?width=230&height=140" alt="" />
  347.                     <div class="info">
  348.                       <span class="count">400.0万</span>
  349.                       <span>2023.02.28</span>
  350.                     </div>
  351.                     <div class="cover">
  352.                       <i class="icon_play"></i>
  353.                     </div>
  354.                   </div>
  355.                   <div class="desc">英雄玩法介绍——朵莉亚:准备迎接人鱼的变身吧!</div>
  356.                 </a>
  357.               </div>
  358.             </div>
  359.             <div class="match-center">
  360.               <div class="section_header">
  361.                 <div class="header_left">
  362.                   <h3 class="title title-icon-match">赛事中心</h3>
  363.                 </div>
  364.                 <div class="header_right">
  365.                   <a class="more" href="#">更多</a>
  366.                 </div>
  367.               </div>
  368.               <div class="tab_control">
  369.                 <div class="item item_wrap">KPL</div>
  370.                 <div class="line"></div>
  371.                 <div class="item item_wrap">世界冠军杯</div>
  372.                 <div class="line"></div>
  373.                 <div class="item item_wrap">挑战者杯</div>
  374.                 <div class="line"></div>
  375.                 <div class="item item_wrap">K甲联赛</div>
  376.                 <div class="line"></div>
  377.                 <div class="item item_wrap">全国大赛</div>
  378.                 <div class="line"></div>
  379.                 <div class="item item_wrap">高校联赛</div>
  380.                 <div class="line"></div>
  381.               </div>
  382.               <div class="match-news">
  383.                 <a class="news-left" href="#">
  384.                   <img src="https://ossweb-img.qq.com/upload/webplat/info/yxzj/20231229/332621669296507.jpg" alt="" />
  385.                 </a>
  386.                 <div class="news-right">
  387.                   <div class="title nowrap_ellipsis">2023年王者荣耀世界冠军杯总决赛今日开战!冠军荣誉花落谁家</div>
  388.                   <ul class="news-list">
  389.                     <li class="item">
  390.                       <span class="news_type_match">KIC</span>
  391.                       <a class="desc nowrap_ellipsis" href="#"> 2023王者世冠KIC抽签落定 中外战队顶级对决拉开序幕! </a>
  392.                       <span class="date">11-29</span>
  393.                     </li>
  394.                     <li class="item">
  395.                       <span class="news_type_match">KIC</span>
  396.                       <a class="desc nowrap_ellipsis" href="#"> 2023年王者世冠KIC小组赛正赛11月29日即将热力开启! </a>
  397.                       <span class="date">11-28</span>
  398.                     </li>
  399.                     <li class="item">
  400.                       <span class="news_type_match">KIC</span>
  401.                       <a class="desc nowrap_ellipsis" href="#"> 2023王者世冠KIC主题曲《The Moment》 </a>
  402.                       <span class="date">11-26</span>
  403.                     </li>
  404.                     <li class="item">
  405.                       <span class="news_type_match">KIC</span>
  406.                       <a class="desc nowrap_ellipsis" href="#"> 2023王者世冠KIC小组赛16支战队集结,向八强进发! </a>
  407.                       <span class="date">11-26</span>
  408.                     </li>
  409.                     <li class="item">
  410.                       <span class="news_type_match">KIC</span>
  411.                       <a class="desc nowrap_ellipsis" href="#"> 2023王者世冠KIC KPL队伍集结完毕,全力备战小组赛! </a>
  412.                       <span class="date">11-23</span>
  413.                     </li>
  414.                     <li class="item">
  415.                       <span class="news_type_match">KIC</span>
  416.                       <a class="desc nowrap_ellipsis" href="#"> KIC2023外卡选拔赛11月22日开赛,11进5谁能登上正赛舞台? </a>
  417.                       <span class="date">11-20</span>
  418.                     </li>
  419.                   </ul>
  420.                 </div>
  421.               </div>
  422.               <div class="tab_video">
  423.                 <a class="video_item" href="#">
  424.                   <div class="album">
  425.                     <img src="https://shp.qpic.cn/cfwebcap/0/d70082f244c1ae11c92f10b1ce7109f3/0/?width=333&height=222" alt="" />
  426.                     <div class="info">
  427.                       <span class="count">400.0万</span>
  428.                       <span>2023.02.28</span>
  429.                     </div>
  430.                     <div class="cover">
  431.                       <i class="icon_play"></i>
  432.                     </div>
  433.                   </div>
  434.                   <div class="desc">2024KPL夏季赛开赛主题曲《亮闪闪》</div>
  435.                 </a>
  436.                 <a class="video_item" href="#">
  437.                   <div class="album">
  438.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  439.                     <div class="info">
  440.                       <span class="count">400.0万</span>
  441.                       <span>2023.02.28</span>
  442.                     </div>
  443.                     <div class="cover">
  444.                       <i class="icon_play"></i>
  445.                     </div>
  446.                   </div>
  447.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  448.                 </a>
  449.                 <a class="video_item" href="#">
  450.                   <div class="album">
  451.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  452.                     <div class="info">
  453.                       <span class="count">400.0万</span>
  454.                       <span>2023.02.28</span>
  455.                     </div>
  456.                     <div class="cover">
  457.                       <i class="icon_play"></i>
  458.                     </div>
  459.                   </div>
  460.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  461.                 </a>
  462.                 <a class="video_item" href="#">
  463.                   <div class="album">
  464.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  465.                     <div class="info">
  466.                       <span class="count">400.0万</span>
  467.                       <span>2023.02.28</span>
  468.                     </div>
  469.                     <div class="cover">
  470.                       <i class="icon_play"></i>
  471.                     </div>
  472.                   </div>
  473.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  474.                 </a>
  475.                 <a class="video_item" href="#">
  476.                   <div class="album">
  477.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  478.                     <div class="info">
  479.                       <span class="count">400.0万</span>
  480.                       <span>2023.02.28</span>
  481.                     </div>
  482.                     <div class="cover">
  483.                       <i class="icon_play"></i>
  484.                     </div>
  485.                   </div>
  486.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  487.                 </a>
  488.                 <a class="video_item" href="#">
  489.                   <div class="album">
  490.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  491.                     <div class="info">
  492.                       <span class="count">400.0万</span>
  493.                       <span>2023.02.28</span>
  494.                     </div>
  495.                     <div class="cover">
  496.                       <i class="icon_play"></i>
  497.                     </div>
  498.                   </div>
  499.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  500.                 </a>
  501.                 <a class="video_item" href="#">
  502.                   <div class="album">
  503.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  504.                     <div class="info">
  505.                       <span class="count">400.0万</span>
  506.                       <span>2023.02.28</span>
  507.                     </div>
  508.                     <div class="cover">
  509.                       <i class="icon_play"></i>
  510.                     </div>
  511.                   </div>
  512.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  513.                 </a>
  514.                 <a class="video_item" href="#">
  515.                   <div class="album">
  516.                     <img src="https://shp.qpic.cn/cfwebcap/0/60a55be9015fb84f05bad2d19698a654/0/?width=230&height=140" alt="" />
  517.                     <div class="info">
  518.                       <span class="count">400.0万</span>
  519.                       <span>2023.02.28</span>
  520.                     </div>
  521.                     <div class="cover">
  522.                       <i class="icon_play"></i>
  523.                     </div>
  524.                   </div>
  525.                   <div class="desc">【荣耀大话王XIII】广州TTG表演猿声齐鸣 一诺展示乒乓球</div>
  526.                 </a>
  527.               </div>
  528.             </div>
  529.           </div>
  530.           <div class="right-content">
  531.             <div class="hero-skin">
  532.               <div class="section_header">
  533.                 <div class="header_left">
  534.                   <div class="title title-icon-hero">英雄/皮肤</div>
  535.                 </div>
  536.                 <div class="header_right">
  537.                   <a href="#" class="more">更多</a>
  538.                 </div>
  539.               </div>
  540.               <div class="tab_control">
  541.                 <div class="item active">最新英雄</div>
  542.                 <div class="line"></div>
  543.                 <div class="item">最新皮肤</div>
  544.                 <div class="line"></div>
  545.                 <div class="item">周免英雄</div>
  546.               </div>
  547.               <div class="new-hero">
  548.                 <a class="album" href="#">
  549.                   <img width="295px" height="156px" src="https://game.gtimg.cn/images/yxzj/img201606/freehero/horizontal/dasiming.jpg" alt="" />
  550.                 </a>
  551.                 <div class="intro">
  552.                   <div class="name">新英雄:大司命</div>
  553.                   <div class="date">上线时间:2024.03.28</div>
  554.                 </div>
  555.               </div>
  556.               <ul class="hero-list">
  557.                 <li class="item">
  558.                   <a href="#">
  559.                     <div class="cover">敖隐</div>
  560.                     <img src="https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/519.jpg" alt="" />
  561.                   </a>
  562.                 </li>
  563.                 <li class="item">
  564.                   <a href="#">
  565.                     <div class="cover">海诺</div>
  566.                     <img src="https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/563.jpg" alt="" />
  567.                   </a>
  568.                 </li>
  569.                 <li class="item">
  570.                   <a href="#">
  571.                     <div class="cover">朵莉亚</div>
  572.                     <img src="https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/159.jpg" alt="" />
  573.                   </a>
  574.                 </li>
  575.                 <li class="item">
  576.                   <a href="#">
  577.                     <div class="cover">亚连</div>
  578.                     <img src="https://game.gtimg.cn/images/yxzj/img201606/freehero/vertical/514.jpg" alt="" />
  579.                   </a>
  580.                 </li>
  581.               </ul>
  582.             </div>
  583.             <div class="kpl-schedule">
  584.               <div class="section_header">
  585.                 <div class="header_left">
  586.                   <div class="title">赛事表</div>
  587.                 </div>
  588.                 <div class="header_right">
  589.                   <a href="#" class="more">更多</a>
  590.                 </div>
  591.               </div>
  592.               <table class="schedule-time">
  593.                 <thead>
  594.                   <tr>
  595.                     <td>时间</td>
  596.                     <td>战队</td>
  597.                     <td></td>
  598.                     <td>战队</td>
  599.                   </tr>
  600.                 </thead>
  601.                 <tbody>
  602.                   <tr>
  603.                     <td>8-31 19:00</td>
  604.                     <td>
  605.                       <div>
  606.                         <img src="https://smobatv-pic.tga.qq.com/203f77f44f24f446f073c7b11fb56f99.png" alt="" />
  607.                       </div>
  608.                       佛山DRG
  609.                     </td>
  610.                     <td>vs</td>
  611.                     <td>
  612.                       <div>
  613.                         <img src="https://smobatv-pic.tga.qq.com/b18d511c93127872c81e0af9b74c424e.png" alt="" />
  614.                       </div>
  615.                       苏州KSG
  616.                     </td>
  617.                   </tr>
  618.                   <tr>
  619.                     <td>9-1 19:00</td>
  620.                     <td>
  621.                       <div>
  622.                         <img src="https://smobatv-pic.tga.qq.com/b7668d1eecd13d64875a960b15a4941d.png" alt="" />
  623.                       </div>
  624.                       重庆狼队
  625.                     </td>
  626.                     <td>vs</td>
  627.                     <td>
  628.                       <div>
  629.                         <img src="https://smobatv-pic.tga.qq.com/6b580d2f97ee81f4206a2bfba5b98ad5.png" alt="" />
  630.                       </div>
  631.                       广州TTG
  632.                     </td>
  633.                   </tr>
  634.                 </tbody>
  635.               </table>
  636.             </div>
  637.           </div>
  638.         </div>
  639.       </div>
  640.     </div>
  641.     <div>
  642.       <div id="gfooter" ams="15592/35033/m11738" age="17" ieg-logo="1" class="footer-wrap">
  643.         <div class="foot">
  644.           <div class="foot_cpright">
  645.             <div class="foot_lefts">
  646.               <a target="_blank" rel="noopener" href="//ieg.tencent.com/" title="腾讯互动娱乐" class="foot_ieg_logo"> 腾讯互动娱乐 </a>
  647.               <a target="_blank" href="//timi.qq.com/" title="天美工作室群" class="foot_left logo1"> timi </a>
  648.             </div>
  649.             <ul class="foot_links">
  650.               <li class="link_map">
  651.                 <a target="_blank" rel="noopener" href="//ieg.tencent.com">腾讯互动娱乐</a>
  652.                 <span class="f_line">|</span>
  653.                 <a target="_blank" rel="noopener" href="https://game.qq.com/tencent_other_contract.shtml"> 服务条款 </a>
  654.                 <span class="f_line">|</span>
  655.                 <a target="_blank" rel="noopener" href="https://rule.tencent.com/rule/preview/d277ee20-2709-4cd5-882b-cbd485753346"> 王者荣耀隐私保护指引 </a>
  656.                 <span class="f_line">|</span>
  657.                 <a target="_blank" rel="noopener" href="https://game.qq.com/tencent_other_children_privacy.shtml"> 儿童隐私保护指引 </a>
  658.                 <span class="f_line">|</span>
  659.                 <a target="_blank" rel="noopener" href="https://careers.tencent.com/"> 腾讯游戏招聘 </a>
  660.                 <span class="f_line">|</span>
  661.                 <span class="f_line">|</span>
  662.                 <a target="_blank" rel="noopener" href="//game.qq.com/web201910/introduce.html?ADTAG=gamepcbottom"> 游戏列表 </a>
  663.                 <span class="f_line">|</span>
  664.                 <a target="_blank" rel="noopener" href="https://www.tencent.com/zh-cn/partnership.html"> 广告服务及商务合作 </a>
  665.                 <span class="f_line">|</span>
  666.               </li>
  667.               <li class="copyright_zh">
  668.                 <a target="_blank" rel="noopener" href="//www.tencent.com/law/mo_law.shtml?/law/copyright.htm"> 腾讯公司版权所有 </a>
  669.                 <a target="_blank" rel="noopener" href="//game.qq.com/self-discipline_pact.shtml"> 网络游戏行业防沉迷自律公约 </a>
  670.               </li>
  671.               <li class="copyright_en">
  672.                 <p class="copyright_txt">COPYRIGHT © 1998 - 2024 TENCENT. ALL RIGHTS RESERVED.</p>
  673.               </li>
  674.               <li class="limit_age">本网络游戏适合17+岁的用户使用;为了您的健康,请合理控制游戏时间。</li>
  675.               <li class="copyright_public">
  676.                 <a target="_blank" rel="noopener" href="https://szcert.ebs.org.cn/6917b6fe-b844-4e12-97c5-85b8d1df30ed" title="深圳市市场监督管理局企业主体身份公示">
  677.                   <img src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png" width="15" height="15" alt="深圳市市场监督管理局企业主体身份公示" />
  678.                   工商网监电子标识
  679.                 </a>
  680.                 <span class="f_line">|</span>
  681.                 <a target="_blank" rel="noopener" href="//www.qq.com/culture.shtml"> 粤网文[2023]2882-203号 </a>
  682.                 <span class="f_line">|</span>
  683.                 <a target="_blank" rel="noopener" href="//game.qq.com/culture2.htm"> (署)网出证(粤)字第054号 </a>
  684.               </li>
  685.               <li class="copyright_private">
  686.                 <a rel="noopener" href="javascript:;">
  687.                   <img src="https://game.gtimg.cn/images/js/2018foot/logo/icplogo.png" width="13" height="15" alt="文网游备字[2016]M-CSG 0059 号" />
  688.                   文网游备字[2016]M-CSG 0059 号
  689.                 </a>
  690.                 <span class="f_line">|</span>
  691.                 新广出审[2017] 6712号
  692.                 <span class="f_line">|</span>
  693.                 ISBN 978-7-7979-8408-9
  694.               </li>
  695.             </ul>
  696.           </div>
  697.           <div class="foot_bottom foot-tips fl">
  698.             <p>
  699.               <em>抵制不良游戏</em>
  700.               <em>拒绝盗版游戏</em>
  701.               <em>注意自我保护</em>
  702.               <em>谨防受骗上当</em>
  703.               <em>适度游戏益脑</em>
  704.               <em>沉迷游戏伤身</em>
  705.               <em>合理安排时间</em>
  706.               <em>享受健康生活</em>
  707.             </p>
  708.             <p class="intro">《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作,并非正史。若因观看王者故事对相关历史人物产生兴趣,建议查阅正史记载。</p>
  709.             <p class="report">全国文化市场统一举报电话:12318</p>
  710.           </div>
  711.         </div>
  712.       </div>
  713.     </div>
  714.   </body>```
  715. ## 总结
  716. 设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:
  717. ### 1.简洁实用
  718. 尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;
  719. #### 2.使用方便
  720. 要满足使用者的要求,网页适合使用,显示出其功能美;
  721. ### 3.整体性好
  722. 围绕一个统一的目标设计,强调整体的功能性;
  723. ### 4.形象突出
  724. 尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。
  725. ### 5.交互式强
  726. 发挥网络的优势,想方设法使每个使用者都参与到其中来。
  727. 更多推荐
  728. 【关注作者|获取更多源码|优质文章】;Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等,有兴趣的联系我!
  729. 更多优质博客文章、网页模板点击以下链接查阅:
  730.   [html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)
  731.   [html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)
  732.   [html+css+js网页设计 CSDN博客](https://blog.csdn.net/qq_42431718)
  733.   关注作者,点赞收藏博文,获取更多源码,Thanks!5000+完整代码,主题涵盖30+种类型:
  734. ![在这里插入图片描述](https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzUwZGFhMzRlYzViNGRlMzgwODQ1ZWZkN2E3M2Y4YzEucG5nI3BpY19jZW50ZXI=)
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
回复

使用道具 举报

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表