星之书笔记
WienDesign | 左手代码，右手诗词
星之书笔记WienDesign | 左手代码，右手诗词
设计思路：点击按钮，CSS动画，显示侧边导航栏，再次点击，隐藏。1、编写HTML结构与CSS动画2、JS获取点击按钮元素和侧边导航?栏元素。3、给按钮元素添加onclick事件。4、获取侧边导航栏的right的值，使用parsoInt()转换为整数。5、if判断当前侧边栏状态，添加显示或者隐藏类名。
HTML DOM 节点。在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:文档是一个文档。所有的HTML元素都是元素节点。所有 HTML 属性都是属性节点。文本插入到 HTML 元素是文本节点。are text nodes。注释是注释节点。
刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目，轮播图应该是写的最多的。但是很多时候对于基础不是很好的新手，虽然参照别人的代码能写出来一些轮播图，但其中的一些细节和过程可能还是一知半解甚至不懂，这里为大家介绍一种简单的原生JS轮播图写法。
需求功能：在浏览内容页文章时，需要添加左右翻页功能。实现方式：<ul><li>上一篇：<a href="{:cmf_url('portal/Article/index',['id'=>$prev_article['id']])}">{$prev_article.post_title}</a> </li> <li>下一篇：<a href="{:cmf_url('portal/Article/index',['id'=>$next_article['id']])}">{$next_article.post_title}</a> </li></ul>下面这段代码相对复杂一点，判断是否存在$prev_article和$next_article，如果没有提示已翻阅完毕。
JS右键单击事件，在我们前端写页面时使用的并不太频繁。JavaScript实现自定义右键菜单，设计思路如下：1. 屏蔽默认右键事件；2. 隐藏自定义的菜单模块；3. 右键点击特定或非特定区域，显示菜单模块；4. 再次点击，隐藏菜单。
很多时候，我们在添加发布文章的时候会重复使用同一张图片，或者添加一张已上传的图片。ThinkCMF虽然自带有网络地址方式，但资源地址查询起来又非常麻烦。重复传入图片的话，又有点浪费服务器资源。所以我们就来添加一个图片在线管理。
PC端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。
网名:Oliver Wien | 奥利弗·韦恩
职业:Web前端设计师、网页设计
现居地:陕西省-西安市
Phone:+86 182 2052 3738
Email:oliverwien@126.com
