search

博客列表 >仿PHP中文网APP首页

仿PHP中文网APP首页

新手1314
新手1314原创
2022年04月18日 16:13:52421浏览

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>仿PHP中文网App首页</title>
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="css/footer.css" />
  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3280782_az0e3d2vvfl.css" />
  11.     <link rel="stylesheet" href="css/header.css" />
  12.     <link rel="stylesheet" href="css/lunbo.css" />
  13.     <link rel="stylesheet" href="css/main.css" />
  14.   </head>
  15.   <body>
  16.     <header>
  17.       <div class="head">
  18.         <div><img src="images/user_avatar.jpg" alt="" class="ima" /></div>
  19.         <div>
  20.           <a href=""><img src="images/logo.png" alt="" class="imag" /></a>
  21.         </div>
  22.         <div style="margin-top: 10px"><span class="iconfont icon-spread-left"></span></div>
  23.       </div>
  24.     </header>
  25.     <div class="slider" onmouseover="pointerIn()" onmouseleave="pointerOut()">
  26.       <div class="imgs">
  27.         <img src="images/1.png" alt="" data-index="1" class="active" />
  28.         <img src="images/2.png" alt="" data-index="2" />
  29.         <img src="images/3.jpg" alt="" data-index="3" />
  30.         <img src="images/4.jpg" alt="" data-index="4" />
  31.         <img src="images/5.jpg" alt="" data-index="5" />
  32.       </div>
  34.       <div class="btns">
  35.         <span data-index="1" class="active" onclick="setActive()"></span>
  36.         <span data-index="2" onclick="setActive()"></span>
  37.         <span data-index="3" onclick="setActive()"></span>
  38.         <span data-index="4" onclick="setActive()"></span>
  39.         <span data-index="5" onclick="setActive()"></span>
  40.       </div>
  41.     </div>
  42.     <main>
  43.       <div class="show">
  44.         <div class="list">
  45.           <a href=""><img src="images/html.png" alt="" /></a>
  46.           <a href="" class="f">HTML/CSS</a>
  47.         </div>
  48.         <div class="list">
  49.           <a href=""><img src="images/JavaScript.png" alt="" /></a>
  50.           <a href="" class="f">JavaScript</a>
  51.         </div>
  52.         <div class="list">
  53.           <a href=""><img src="images/code.png" alt="" /></a>
  54.           <a href="" class="fo">服务端</a>
  55.         </div>
  56.         <div class="list">
  57.           <a href=""><img src="images/sql.png" alt="" /></a>
  58.           <a href="" class="fo">数据库</a>
  59.         </div>
  60.         <div class="list">
  61.           <a href=""><img src="images/app.png" alt="" /></a>
  62.           <a href="" class="fo">移动端</a>
  63.         </div>
  64.         <div class="list">
  65.           <a href=""><img src="images/shouce.png" alt="" /></a>
  66.           <a href="" class="fos">手册</a>
  67.         </div>
  68.         <div class="list">
  69.           <a href=""><img src="images/gongju.png" alt="" /></a>
  70.           <a href="" class="fos">工具</a>
  71.         </div>
  72.         <div class="list">
  73.           <a href=""><img src="images/live.png" alt="" /></a>
  74.           <a href="" class="fos">直播</a>
  75.         </div>
  76.       </div>
  77.       <div class="course">
  78.         <h3 class="re">推荐课程</h3>
  79.         <div>
  80.           <a href=""><img src="images/php.png" alt="" /></a>
  81.           <a href=""><img src="images/php.png" alt="" /></a>
  82.         </div>
  83.         <div class="clear">
  84.           <div class="restli">
  85.             <a href=""><img src="images/php8.png" alt="" /></a>
  86.             <h2><a href="" class="php8">php8 , 我来也</a></h2>
  87.             <div class="spe">
  88.               <span class="sp">初级</span>
  89.               <span class="spa">96715次播放</span>
  90.             </div>
  91.           </div>
  92.           <div class="restli">
  93.             <a href=""><img src="images/php2021.png" alt="" /></a>
  94.             <h2><a href="" class="php8">细说php(2021)第一季</a></h2>
  95.             <div class="spe">
  96.               <span class="sp">中级</span>
  97.               <span class="spa">73090次播放</span>
  98.             </div>
  99.           </div>
  100.         </div>
  101.       </div>
  102.       <div class="course">
  103.         <h3 class="re">最新更新</h3>
  104.         <div class="clears">
  105.           <div class="restli">
  106.             <a href=""><img src="images/h5.png" alt="" /></a>
  107.             <h2><a href="" class="php8">前段基础HTML5+CSS...</a></h2>
  108.             <h2><a href="" class="web">本视频基于2021年最新web标准...</a></h2>
  109.             <div class="spe">
  110.               <span class="sp">初级</span>
  111.               <span class="spas">11235次播放</span>
  112.             </div>
  113.           </div>
  114.           <div class="restli">
  115.             <a href=""><img src="images/java.png" alt="" /></a>
  116.             <h2><a href="" class="php8">JavaScript基础语法【d...</a></h2>
  117.             <h2><a href="" class="web">素材大全:https://gitee.com/xiao...</a></h2>
  118.             <div class="spe">
  119.               <span class="sp">初级</span>
  120.               <span class="spas">12112次播放</span>
  121.             </div>
  122.           </div>
  123.           <div class="restli">
  124.             <a href=""><img src="images/html5.png" alt="" /></a>
  125.             <h2><a href="" class="php8">前段最全HTTP基础原...</a></h2>
  126.             <h2><a href="" class="web">HTTP是基于B/S架构进行通信的...</a></h2>
  127.             <div class="spe">
  128.               <span class="sp">初级</span>
  129.               <span class="spas">913次播放</span>
  130.             </div>
  131.           </div>
  132.           <div class="restli">
  133.             <a href=""><img src="images/xieyi.png" alt="" /></a>
  134.             <h2><a href="" class="php8">HTTP协议</a></h2>
  135.             <h2><a href="" class="web">HTTP协议是一个简单的请求-响...</a></h2>
  136.             <div class="spe">
  137.               <span class="sp">初级</span>
  138.               <span class="spas">791次播放</span>
  139.             </div>
  140.           </div>
  141.           <div class="restli">
  142.             <a href=""><img src="images/api.png" alt="" /></a>
  143.             <h2><a href="" class="php8">API接口开发规范【服...</a></h2>
  144.             <h2><a href="" class="web">RESTful是一种面向资源的软件...</a></h2>
  145.             <div class="spe">
  146.               <span class="sp">中级</span>
  147.               <span class="spas">4814次播放</span>
  148.             </div>
  149.           </div>
  150.           <div class="restli">
  151.             <a href=""><img src="images/mysql.png" alt="" /></a>
  152.             <h2><a href="" class="php8">MySQL查询优化方案...</a></h2>
  153.             <h2><a href="" class="web">海量数据下，如何根据执行计划...</a></h2>
  154.             <div class="spe">
  155.               <span class="sp">中级</span>
  156.               <span class="spas">3415次播放</span>
  157.             </div>
  158.           </div>
  159.         </div>
  160.       </div>
  161.       <div class="course">
  162.         <h3 class="re">最新文章</h3>
  163.         <div class="articie">
  164.           <a href=""><img src="images/p.jpg" alt="" /></a>
  165.           <div>
  166.             <h2>php怎么去掉字符串的逗号</h2>
  167.             <span>发布时间：2022-04-14</span>
  168.           </div>
  169.         </div>
  170.       </div>
  171.       <div class="articie" style="margin: 10px">
  172.         <a href=""><img src="images/p.jpg" alt="" /></a>
  173.         <div>
  174.           <h2>脚手架也有插件形式！vscode实...</h2>
  175.           <span>发布时间：2022-04-15</span>
  176.         </div>
  177.       </div>
  178.       <div class="articie" style="margin: 10px">
  179.         <a href=""><img src="images/v.png" alt="" /></a>
  180.         <div>
  181.           <h2>手把手带你使用Vue + Laravel开...</h2>
  182.           <span>发布时间：2022-04-15</span>
  183.         </div>
  184.       </div>
  185.       <div class="articie" style="margin: 10px">
  186.         <a href=""><img src="images/uni.png" alt="" /></a>
  187.         <div>
  188.           <h2>UniApp实战之开发一个复杂场景...</h2>
  189.           <span>发布时间：2022-01-07</span>
  190.         </div>
  191.       </div>
  192.       <div class="articie" style="margin: 10px">
  193.         <a href=""><img src="images/ja.jpg" alt="" /></a>
  194.         <div>
  195.           <h2>JAVA详细解析之IO流、File、字...</h2>
  196.           <span>发布时间：2022-04-14</span>
  197.         </div>
  198.       </div>
  199.       <div class="articie" style="margin: 10px">
  200.         <h3>更多内容</h3>
  201.       </div>
  202.     </main>
  203.     <footer>
  204.       <div class="item active">
  205.         <a href="" class="iconfont icon-shouye"></a>
  206.         <a href="" class="font">首页</a>
  207.       </div>
  208.       <div class="item">
  209.         <a href="" class="iconfont icon-shipin1x"></a>
  210.         <a href="" class="font">视频</a>
  211.       </div>
  212.       <div class="item">
  213.         <a href=""><img src="images/gif_live.gif" alt="" /></a>
  214.         <a href="" class="fonts">培训</a>
  215.       </div>
  216.       <div class="item">
  217.         <a href="" class="iconfont icon-code-circle"></a>
  218.         <a href="" class="font">社区</a>
  219.       </div>
  220.       <div class="item">
  221.         <a href="" class="iconfont icon-31wode"></a>
  222.         <a href="" class="font">我的</a>
  223.       </div>
  224.     </footer>
  225.     <script>
  226.       const imgs = document.querySelectorAll(".slider .imgs img");
  227.       const btns = document.querySelectorAll(".slider .btns span");
  229.       function setActive() {
  230.         imgs.forEach(img => img.classList.remove("active"));
  231.         btns.forEach(btn => btn.classList.remove("active"));
  233.         event.target.classList.add("active");
  234.         imgs.forEach(img => {
  235.           if (img.dataset.index === event.target.dataset.index) {
  236.             img.classList.add("active");
  237.           }
  238.         });
  239.       }
  241.       let car = setInterval(
  242.         arr => {
  243.           let i = arr.shift();
  245.           arr.push(i);
  246.           arrNew = arr;
  248.           btns[i].dispatchEvent(new Event("click"));
  249.         },
  250.         3000,
  251.         Object.keys(btns)
  252.       );
  254.       function pointerIn() {
  255.         clearInterval(car);
  256.       }
  258.       function pointerOut() {
  259.         car = setInterval(
  260.           arr => {
  261.             let i = arr.shift();
  263.             arr.push(i);
  264.             arrNew = arr;
  266.             btns[i].dispatchEvent(new Event("click"));
  267.           },
  268.           3000,
  269.           arrNew
  270.         );
  271.       }
  272.     </script>
  273.   </body>
  274. </html>
上一条：常用函数类型和数据类型下一条：解决nginx: [emerg] unknown directive “stream“ in /etc/nginx/nginx.conf问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多