猿梦wordpress主题制作完整系列教程四:写前端框架代码

2017年12月9日12:26:14 发表评论 54

wordpress主题前端页面,其实是还原PSD在网页显示的效果,我没有像公司那样1比1还原,因为我们这毕竟没有这需求,也不必费那样的时间,我们最主要的还是优化我们写的代码。

猿梦wordpress主题制作完整系列教程四:写前端框架代码

我这里要说一个前端非常重要的思想,CSS重用,好多刚学习前端的小白,包括我之前也认为css最好学了,属性值都是固定的,只需要记住属性值作用就可以写好一个页面,当然说的有道理,但是,你们会不会发现,每写一个静态页面时间都花在CSS上,CSS代码成百上千行,对于前端大咖来说,这是致命的错误,虽说你把前端页面效果1比1有还原了,但是你的项目代码太多,css太多重复的,没有做优化,这显然也是不过关的。

我学过bootstrap前端构架,我认为bootstrap前端源码对于前端工程师来说是非常值得去研究的,去研究css less,去领悟bootstrap中代码的重用是如何实现的,这对于写前端进阶来说是重中之重。

 

 

         下面来看一下项目的首页前端框架代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  6.     <title>猿梦|钟储兵-关注web全栈开发和seo优化的个人博客</title>
  7.     <link rel="stylesheet" href="css/reset.css">
  8.     <link rel="stylesheet" href="css/style.css">
  9.     <link rel="stylesheet" href="http://at.alicdn.com/t/font_484804_8oa1lynvj97fogvi.css">
  10. </head>
  11. <body>
  12.     <!-- 头部 -->
  13.     <div>
  14.         <!-- 导航 -->
  15.         <div>
  16.             <!-- logo -->
  17.             <a href="#"><img src="img/logo.svg" alt=""></a>
  18.             <!-- 菜单 -->
  19.             <div>
  20.                 <ul>
  21.                     <div>
  22.                         <span><i class="iconfont icon-x"></i></span>
  23.                         <input placeholder type="text">
  24.                         <span><i class="iconfont icon-sousuo"></i></span>
  25.                     </div>
  26.                     <li><a href="#">首页</a></li>
  27.                     <li>
  28.                         <a href="#">前端技术</a>
  29.                         <ul>
  30.                             <li><a href="#">H5/CS3</a></li>
  31.                             <li><a href="#">JS/Jquery</a></li>
  32.                             <li><a href="#">BootStrap</a></li>
  33.                         </ul>
  34.                     </li>
  35.                     <li>
  36.                         <a href="#">后端技术</a>
  37.                         <ul>
  38.                             <li><a href="#">PHP</a></li>
  39.                             <li><a href="#">Python</a></li>
  40.                             <li><a href="#">NodeJs</a></li>
  41.                             <li><a href="#">PHP</a></li>
  42.                             <li><a href="#">Python</a></li>
  43.                             <li><a href="#">NodeJs</a></li>
  44.                         </ul>
  45.                     </li>
  46.                     <li><a href="#">运营技术</a></li>
  47.                     <li><a href="#">福利资源</a></li>
  48.                     <li><a href="#">猿梦生活</a></li>
  49.                     <li><a href="#"><i class="iconfont icon-sousuo"></i></a></li>
  50.                 </ul>
  51.             </div>
  52.             <!-- 登录 -->
  53.             <a class="fr login" href="#"><i class="iconfont icon-touxiang"></i>登录</a>
  54.         </div>
  55.     </div>
  56.     <!-- 头部END -->
  57.     <!-- 轮播 -->
  58.     <div id="slider">
  59.         <ul id="big-pic">
  60.             <li><a href="#"><img src="img/slide (1).jpg" alt=""></a></li>
  61.             <li><a href="#"><img src="img/slide (2).jpg" alt=""></a></li>
  62.             <li><a href="#"><img src="img/slide (3).jpg" alt=""></a></li>
  63.             <li><a href="#"><img src="img/slide (4).jpg" alt=""></a></li>
  64.             <li><a href="#"><img src="img/slide (5).jpg" alt=""></a></li>
  65.             <li><a href="#"><img src="img/slide (6).jpg" alt=""></a></li>
  66.             <li><a href="#"><img src="img/slide (7).jpg" alt=""></a></li>
  67.         </ul>
  68.         <ul id="small-pic">
  69.             <li><a href="#"><img src="img/slide (2).jpg" alt=""></a></li>
  70.             <li><a href="#"><img src="img/slide (3).jpg" alt=""></a></li>
  71.             <li><a href="#"><img src="img/slide (4).jpg" alt=""></a></li>
  72.             <li><a href="#"><img src="img/slide (5).jpg" alt=""></a></li>
  73.             <li><a href="#"><img src="img/slide (6).jpg" alt=""></a></li>
  74.             <li><a href="#"><img src="img/slide (7).jpg" alt=""></a></li>
  75.             <li><a href="#"><img src="img/slide (1).jpg" alt=""></a></li>
  76.         </ul>
  77.         <a id="prev"><i class="iconfont icon-icon"></i></a>
  78.         <a id="next"><i class="iconfont icon-icon1"></i></a>
  79.     </div>
  80.     <!-- 主体 -->
  81.     <div>
  82.         <div>
  83.             <!-- 主要内容 -->
  84.             <div>
  85.                 <!-- 文章列表 -->
  86.                 <div class="card active">
  87.                     <!-- 作者 -->
  88.                     <div>
  89.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  90.                         <a href="#">猿梦</a>
  91.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  92.                     </div>
  93.                     <!-- 文章内容 -->
  94.                     <div>
  95.                         <div>
  96.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  97.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  98.                         </div>
  99.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  100.                     </div>
  101.                     <!-- 文章组件 -->
  102.                     <div>
  103.                         <a href="#">web前端</a>
  104.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  105.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  106.                         <span><i class="iconfont icon-zan"></i>666</span>
  107.                     </div>
  108.                 </div>
  109.                 <div class="card active">
  110.                     <!-- 作者 -->
  111.                     <div>
  112.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  113.                         <a href="#">猿梦</a>
  114.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  115.                     </div>
  116.                     <!-- 文章内容 -->
  117.                     <div>
  118.                         <div>
  119.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  120.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  121.                         </div>
  122.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  123.                     </div>
  124.                     <!-- 文章组件 -->
  125.                     <div>
  126.                         <a href="#">web前端</a>
  127.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  128.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  129.                         <span><i class="iconfont icon-zan"></i>666</span>
  130.                     </div>
  131.                 </div>
  132.                 <div class="card active">
  133.                     <!-- 作者 -->
  134.                     <div>
  135.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  136.                         <a href="#">猿梦</a>
  137.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  138.                     </div>
  139.                     <!-- 文章内容 -->
  140.                     <div>
  141.                         <div>
  142.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  143.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  144.                         </div>
  145.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  146.                     </div>
  147.                     <!-- 文章组件 -->
  148.                     <div>
  149.                         <a href="#">web前端</a>
  150.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  151.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  152.                         <span><i class="iconfont icon-zan"></i>666</span>
  153.                     </div>
  154.                 </div>
  155.                 <div class="card active">
  156.                     <!-- 作者 -->
  157.                     <div>
  158.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  159.                         <a href="#">猿梦</a>
  160.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  161.                     </div>
  162.                     <!-- 文章内容 -->
  163.                     <div>
  164.                         <div>
  165.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  166.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  167.                         </div>
  168.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  169.                     </div>
  170.                     <!-- 文章组件 -->
  171.                     <div>
  172.                         <a href="#">web前端</a>
  173.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  174.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  175.                         <span><i class="iconfont icon-zan"></i>666</span>
  176.                     </div>
  177.                 </div>
  178.                 <div class="card active">
  179.                     <!-- 作者 -->
  180.                     <div>
  181.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  182.                         <a href="#">猿梦</a>
  183.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  184.                     </div>
  185.                     <!-- 文章内容 -->
  186.                     <div>
  187.                         <div>
  188.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  189.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  190.                         </div>
  191.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  192.                     </div>
  193.                     <!-- 文章组件 -->
  194.                     <div>
  195.                         <a href="#">web前端</a>
  196.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  197.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  198.                         <span><i class="iconfont icon-zan"></i>666</span>
  199.                     </div>
  200.                 </div>
  201.                 <div class="card active">
  202.                     <!-- 作者 -->
  203.                     <div>
  204.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  205.                         <a href="#">猿梦</a>
  206.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  207.                     </div>
  208.                     <!-- 文章内容 -->
  209.                     <div>
  210.                         <div>
  211.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  212.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  213.                         </div>
  214.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  215.                     </div>
  216.                     <!-- 文章组件 -->
  217.                     <div>
  218.                         <a href="#">web前端</a>
  219.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  220.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  221.                         <span><i class="iconfont icon-zan"></i>666</span>
  222.                     </div>
  223.                 </div>
  224.                 <div class="card active">
  225.                     <!-- 作者 -->
  226.                     <div>
  227.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  228.                         <a href="#">猿梦</a>
  229.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  230.                     </div>
  231.                     <!-- 文章内容 -->
  232.                     <div>
  233.                         <div>
  234.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  235.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  236.                         </div>
  237.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  238.                     </div>
  239.                     <!-- 文章组件 -->
  240.                     <div>
  241.                         <a href="#">web前端</a>
  242.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  243.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  244.                         <span><i class="iconfont icon-zan"></i>666</span>
  245.                     </div>
  246.                 </div>
  247.                 <div class="card active">
  248.                     <!-- 作者 -->
  249.                     <div>
  250.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  251.                         <a href="#">猿梦</a>
  252.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  253.                     </div>
  254.                     <!-- 文章内容 -->
  255.                     <div>
  256.                         <div>
  257.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  258.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  259.                         </div>
  260.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  261.                     </div>
  262.                     <!-- 文章组件 -->
  263.                     <div>
  264.                         <a href="#">web前端</a>
  265.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  266.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  267.                         <span><i class="iconfont icon-zan"></i>666</span>
  268.                     </div>
  269.                 </div>
  270.                 <div class="card active">
  271.                     <!-- 作者 -->
  272.                     <div>
  273.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  274.                         <a href="#">猿梦</a>
  275.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  276.                     </div>
  277.                     <!-- 文章内容 -->
  278.                     <div>
  279.                         <div>
  280.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  281.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  282.                         </div>
  283.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  284.                     </div>
  285.                     <!-- 文章组件 -->
  286.                     <div>
  287.                         <a href="#">web前端</a>
  288.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  289.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  290.                         <span><i class="iconfont icon-zan"></i>666</span>
  291.                     </div>
  292.                 </div>
  293.                 <div class="card active">
  294.                     <!-- 作者 -->
  295.                     <div>
  296.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  297.                         <a href="#">猿梦</a>
  298.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  299.                     </div>
  300.                     <!-- 文章内容 -->
  301.                     <div>
  302.                         <div>
  303.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  304.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  305.                         </div>
  306.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  307.                     </div>
  308.                     <!-- 文章组件 -->
  309.                     <div>
  310.                         <a href="#">web前端</a>
  311.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  312.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  313.                         <span><i class="iconfont icon-zan"></i>666</span>
  314.                     </div>
  315.                 </div>
  316.                 <div class="card active">
  317.                     <!-- 作者 -->
  318.                     <div>
  319.                         <a href="#"><img src="img/author.jpg" alt=""></a>
  320.                         <a href="#">猿梦</a>
  321.                         <span><i class="iconfont icon-shijian"></i>1小时前</span>
  322.                     </div>
  323.                     <!-- 文章内容 -->
  324.                     <div>
  325.                         <div>
  326.                             <a href="#">零基础的前端开发初学者应如何系统地学习?</a>
  327.                             <p>网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路习系统学习:</p>
  328.                         </div>
  329.                         <a href="#"><img class="" src="img/active-pic.jpg" alt=""></a>
  330.                     </div>
  331.                     <!-- 文章组件 -->
  332.                     <div>
  333.                         <a href="#">web前端</a>
  334.                         <span><i class="iconfont icon-kanguo"></i>999</span>
  335.                         <span><i class="iconfont icon-pinglun"></i>111</span>
  336.                         <span><i class="iconfont icon-zan"></i>666</span>
  337.                     </div>
  338.                 </div>
  339.                 <!-- 加载更多 -->
  340.                 <div class="card load-more">
  341.                     <a class="" href="#">加载更多</a>
  342.                 </div>
  343.             </div>
  344.             <!-- 侧边栏 -->
  345.             <div>
  346.                 <div class="card hot-active">
  347.                     <!-- 热门文章 -->
  348.                     <div>
  349.                         <span>热门文章</span>
  350.                         <a href="#">更多热门 »</a>
  351.                     </div>
  352.                     <ul>
  353.                         <li>
  354.                             <a href="#">
  355.                                 <span class="pic fl"><img src="img/hot-active-pic.jpg" alt=""></span>
  356.                                 <span>小白Python爬虫之爬妹子图</span><br>
  357.                                 <span>2017年11月11日</span>
  358.                                 <span>666评论</span>
  359.                             </a>
  360.                         </li>
  361.                         <li>
  362.                             <a href="#">
  363.                                 <span class="pic fl"><img src="img/hot-active-pic.jpg" alt=""></span>
  364.                                 <span>小白Python爬虫之爬妹子图</span><br>
  365.                                 <span>2017年11月11日</span>
  366.                                 <span>666评论</span>
  367.                             </a>
  368.                         </li>
  369.                         <li>
  370.                             <a href="#">
  371.                                 <span class="pic fl"><img src="img/hot-active-pic.jpg" alt=""></span>
  372.                                 <span>小白Python爬虫之爬妹子图</span><br>
  373.                                 <span>2017年11月11日</span>
  374.                                 <span>666评论</span>
  375.                             </a>
  376.                         </li>
  377.                         <li>
  378.                             <a href="#">
  379.                                 <span class="pic fl"><img src="img/hot-active-pic.jpg" alt=""></span>
  380.                                 <span>小白Python爬虫之爬妹子图</span><br>
  381.                                 <span>2017年11月11日</span>
  382.                                 <span>666评论</span>
  383.                             </a>
  384.                         </li>
  385.                         <li>
  386.                             <a href="#">
  387.                                 <span class="pic fl"><img src="img/hot-active-pic.jpg" alt=""></span>
  388.                                 <span>小白Python爬虫之爬妹子图</span><br>
  389.                                 <span>2017年11月11日</span>
  390.                                 <span>666评论</span>
  391.                             </a>
  392.                         </li>
  393.                     </ul>
  394.                 </div>
  395.                 <!-- 关于本站 -->
  396.                 <div class="card about-web clear">
  397.                     <div>关于本站</div>
  398.                     <div>
  399.                         <!-- 二维码 -->
  400.                         <a href="#"><img src="img/qr-weixin.jpg" alt=""></a>
  401.                         <!-- 概要 -->
  402.                         <div class="summary mb10">
  403.                             <a href="#">猿梦</a>
  404.                             <p>分享头脑,分享技术,专注网站全栈开发和互联网运营之道</p>
  405.                             <!-- 联系方式 -->
  406.                             <div>
  407.                                 <a href="#"><i class="iconfont icon-qq"></i></a>
  408.                                 <a href="#"><i class="iconfont icon-0023"></i></a>
  409.                                 <a href="#"><i class="iconfont icon-weibo"></i></a>
  410.                                 <a href="#"><i class="iconfont icon-dingyue"></i></a>
  411.                             </div>
  412.                         </div>
  413.                     </div>
  414.                 </div>
  415.                 <!-- 文章归档 -->
  416.                 <div class="card filing">
  417.                     <div>文章归档</div>
  418.                     <!-- 文章列表 -->
  419.                     <div>
  420.                         <a href="#">2017年1月</a>
  421.                         <a href="#">2017年2月</a>
  422.                         <a href="#">2017年3月</a>
  423.                         <a href="#">2017年4月</a>
  424.                         <a href="#">2017年5月</a>
  425.                         <a href="#">2017年6月</a>
  426.                         <a href="#">2017年7月</a>
  427.                         <a href="#">2017年8月</a>
  428.                         <a href="#">2017年9月</a>
  429.                         <a href="#">2017年10月</a>
  430.                         <a href="#">2017年11月</a>
  431.                         <a href="#">2017年12月</a>
  432.                     </div>
  433.                 </div>
  434.                 <!-- 文章标签 -->
  435.                 <div class="card active-tag">
  436.                     <div>文章标签</div>
  437.                     <div>
  438.                         <a href="#">Jquery1</a>
  439.                         <a href="#">Jquery2</a>
  440.                         <a href="#">Jquery3</a>
  441.                         <a href="#">Jquery4</a>
  442.                         <a href="#">Jquery5</a>
  443.                         <a href="#">Jquery6</a>
  444.                         <a href="#">Jquery7</a>
  445.                         <a href="#">Jquery8</a>
  446.                         <a href="#">Jquery9</a>
  447.                         <a href="#">Jquery10</a>
  448.                         <a href="#">Jquery11</a>
  449.                         <a href="#">Jquery12</a>
  450.                         <a href="#">Jquery13</a>
  451.                         <a href="#">Jquery14</a>
  452.                         <a href="#">Jquery15</a>
  453.                     </div>
  454.                 </div>
  455.                 <!-- 友情链接 -->
  456.                 <div class="card friend-link">
  457.                     <div>友情链接</div>
  458.                     <div>
  459.                         <a href="#">阿里云</a>
  460.                         <a href="#">腾讯云</a>
  461.                         <a href="#">百度云</a>
  462.                         <a href="#">京东云</a>
  463.                         <a href="#">微软云</a>
  464.                         <a href="#">苹果云</a>
  465.                         <a href="#">三星云</a>
  466.                         <a href="#">小米云</a>
  467.                     </div>
  468.                 </div>
  469.             </div>
  470.        </div>
  471.     <!-- 侧边小工具 -->
  472.         <div>
  473.             <a href="#"><i class="iconfont icon-icon2"></i></a>
  474.             <a class="login weaken" href="#">Hello PM</a>
  475.             <a class="feedback weaken" href="#">意见反馈</a>
  476.         </div>
  477.     </div>
  478.     <!-- 主体END -->
  479.     <!-- 页脚 -->
  480.     <div class="footer clear">
  481.         <div>
  482.             <a href="#">关于猿梦</a> ·
  483.             <a href="#">联系我们</a> ·
  484.             <a href="#">其它产品</a>
  485.             <br>
  486.             <div>
  487.                 <a href="#">京ICP备11017824号-4 </a>
  488.                 <span>Copyright © 2017-2050 <a href="#">zcbboke猿梦</a></span>
  489.             </div>
  490.         </div>
  491.     </div>
  492.     <!-- 页脚END -->
  493.     <script src="js/jquery-3.2.1.min.js"></script>
  494.     <script src="js/slider.js"></script>
  495.     <script src="js/search.js"></script>
  496. </body>
  497. </html>

我就不把CSS,JS文件全部贴出来了,毕竟还是有点多,有兴趣的可以自己下载:https://pan.baidu.com/s/1eSAO3N8

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: