![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端项目
DurianPudding
这个作者很懒,什么都没留下…
展开
-
用vue实现的二级菜单
主要是对二级菜单和当前点击的处理:点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2018-11-30 10:50:47 · 15654 阅读 · 3 评论 -
JS实现动画
三种方式setTimeoutsetIntervalrequestAnimationFrame<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <styl原创 2019-02-26 16:37:23 · 300 阅读 · 0 评论 -
前端项目性能优化(待查)
减少HTTP请求图片地图:将几个连续的图片合成为同一个图片,用定位去得到不同的部分CSS Sprites:用css背景定位得到同一张图片的不同部分合并脚本和css:即打包,如webpack使用CDN代码、图片字体等压缩代码分割、css分割,懒加载:不同的页面使用自己的内容,而不是全部加载样式表放在顶部脚本放在页面底部使用外部js和css:浏览器会缓存,再次访问速度快优...原创 2019-03-05 17:14:35 · 269 阅读 · 0 评论 -
Flex布局实例:流式布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流式布局</title> <style> .main { width: 200px; hei原创 2019-02-26 15:37:53 · 1861 阅读 · 0 评论 -
flex布局实例:输入框的布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;输入框的布局&lt;/title&gt;原创 2019-02-25 14:57:08 · 750 阅读 · 0 评论 -
右边宽度固定,左边自适应的三种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右边宽度固定,左边自适应</title> <style> html, body { margin: 0;原创 2019-02-22 15:50:26 · 867 阅读 · 0 评论 -
flex布局实例:圣杯布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圣杯布局&lt;/title&gt;原创 2019-02-22 15:42:57 · 708 阅读 · 0 评论 -
flex布局实例:网格布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;flex实例之网格布局&lt;/title&am原创 2019-02-22 15:14:28 · 727 阅读 · 0 评论 -
flex布局实例:骰子的布局
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;骰子实例&lt;/title&gt;原创 2019-02-22 14:45:40 · 525 阅读 · 0 评论