随笔分类 - Frontend
W3C相关，前段相关
摘要：title: Hexo博客写作与图片处理的经验 date: 2020-03-14 08:07:13 tags: keywords: hexo, hexo 博客, hexo 图片 description: Hexo是一款非常优秀的开源博客管理工具，所有的博客文档都通过Markdown格式编写，Mark
阅读全文
摘要：现象 使用了 jQuery 1.10 的版本，想实现 checkbox 的全部选中和全部取消选中，使用了 attr 的方法，如下： 测试过程中发现，第一次从未选中状态变为选中，再从选中变为未选中，是可以的。但是第二次界面上就没有任何变化了，但是查看元素，发现 checked 属性实际上已经改变了。这
阅读全文
摘要：在HTML 5比较流行的当下，Plupload是文件上传的不二之选，特别是Adobe宣布2020年将停止对Flash的更新支持。本文记录一下如何在上传文件的时候，传递自定义参数。 了解到两种方式，一种是通过 setOption 方法，一种是直接操作对象。 参数通过POST请求发送到后端，后台可以根据
阅读全文
摘要：关于Favicon favicon 在英文中有几个别名，叫做 shortcut icon，website icon，tab icon，URL icon，bookmark icon，对应中文来说也叫作网页小图标、网站缩略图或收藏夹图标、书签图标。这实际上就是与某个网站或地址关联的图标文件。如果网站上传
阅读全文
摘要：Sublime Text 3对于Sublime Text 2压倒性的优势就是秒启动，启动非常非常快，所以从2012年到2016年我一直用Sublime Text 2，但是安装了3并且启动试用后，我再也不愿意打开Sublime Text 2了。 工欲善其事，必先利其器。经过多年使用，总结了一些Subl
阅读全文
摘要：本文要解决两个问题： 1、在ajax的数据交互中，如何获得后台的处理进度？ 2、在前台界面中，如何使用图形化的方式展示后台处理进度？ 关于第一个问题，不是本文的重点，简单说一下思路。因为HTTP协议实际上是无状态的协议，前台的请求提交给后台之后，一般情况下都是后台处理完成才会向前台返回处理结果。如果
阅读全文
摘要：一、Robots.txt协议Robots协议，也称为爬虫协议、机器人协议等，其全称为“网络爬虫排除标准（Robots Exclusion Protocol）”。网站通过Robots协议告诉搜索引擎哪些页面可以抓取，哪些页面不能抓取。也既是Robots的用法有两种，一种是告诉搜索引擎哪些页面你不能抓（...
阅读全文
摘要：这个题目似乎解决的办法很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面，第一解决左右居中的问题，第二解决上下居中的问题。1、左右居中。左右居中最为简单，使用 text-align:center; 就可以让绝大多数的对象居中对齐，并且这个属性也获得...
阅读全文
摘要：原型图设计是一个艺术创作的过程，所以我们应当使用能够提高工作效率、激发创作灵感的工具，让工具为创作服务，而不是为创作去学习如何使用工具。从这一点上说，我觉得Mac下的很多软件做的非常好，OmniGraffle就是其中一个。下面就介绍一下使用OmniGraffle制作移动应用原型图的设计。启动 OmniGraffle 后，可以选择模板，这里选择空白模板。OmniGraffle的默认参数设置有些奇怪，所以一般需要修改一下页面的设置。选择Inspectors->Canvas->Size。修改默认设置后，避免了文档随着文档中对象的拖动而自动改变页面的尺寸。另外，使用像素作为单位，也是因为我
阅读全文
摘要：Dede CMS 5.5 的漏洞实在是太多了，三天两头被Hacker们挂马。话说挂这些破网址真的能带来丰厚的回报吗？做人要厚道啊。闲话少说，我按照网上的升级到5.5升级到5.7不出错的方法，升级后编辑文章看起来没什么问题。但是在编辑栏目属性时，发现了以下问题：原来的确定和返回按钮不见了。不知道什么原因，后来也没有再仔细查找原因。所以开始考虑从5.5一路升级到5.7。升级过程，还比较顺利。升级后，http://www.sinotefl.ac.cn/cnadmin/catalog_do.php?cid=37&dopost=listArchives这个链接点击后页面空白。定位代码，原来是一个
阅读全文
摘要：CoffeeScript编程语言构建于Javascript之上，它可编译成高效JavaScript。可以在Web浏览器上，或者结合Node.js一类的技术构建服务端应用程序。The golden rule of CoffeeScript is: "It's just JavaScript".CoffeeScript的吸引力1、提供一种比较简单的语法，减少了样板代码，诸如括号和逗号；2、使用空格作为一种组织代码块的方法；3、提供拥有表达函数的简单语法；4、提供基于类的继承（可选项，但是在进行应用程序开发时非常有用）先决条件CoffeeScript使用Nodejs的包管
阅读全文
摘要：CSS的规范中，有一个很奇特的特性，支持计数器的功能。先来看下如何使用：<section> <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p> <p>Now add 1
阅读全文
摘要：jQuery提供了一个animate函数，可以通过改变CSS属性来实现一些动画效果。用法如下：.animate( properties[, duration ][, easing ][, complete ])或者.animate( properties, options )，其中 options 包含了duration、easing、queue、specialEasing、step、progress、complete、done、fail、always等多个属性。animate函数允许我们在所有使用数字值的CSS属性上创建动画效果。唯一必须的属性是一个 CSS 属性对象。例如：$('.
阅读全文
摘要：深入研究这个问题源于最近制作的几个页面，交给前端后，发现在IE8下，对于JS动态控制的内容，页面高度不能够随着动态的调整。仔细检查后发现问题在于 display:inline-block 这个属性。inline-block 这个属性确实帮我们解决了不少问题，但是IE8在动态内容的渲染支持上，还是会有奇怪的问题。最后的解决方法是使用 x-ua-compatible ，来强制IE8使用IE7的模式来解析页面。下面是整理的一些相关的资料。IE的文档模式Document Compatibility 决定了IE如何渲染你的页面，IE支持不同的 document (compatibility) mode。
阅读全文
摘要：目前在为移动设备设计界面时，最头疼的问题莫过于尺寸的问题。我们无法使用固定的尺寸来进行设计，因为不同设备的大小千变万化。但是如果我们了解了设备的物理特性后，这将有助于我们进行更好的设计。不同的设备可能具有相同的屏幕分辨率，但是他们的物理特性差别却非常大。一代iPad的屏幕尺寸是9.7寸，分辨率为1024*768、132dpi。Kindle Kyeboard 3G的物理尺寸只有6寸，同样是768*1024的分辨率，像素却是212dpi。获取屏幕的尺寸有很多种办法，包括" Resolution Media Query "，这种办法作为 Media Queries的规范已经存在很
阅读全文
摘要：Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。 Yeoman的目的不仅是要为新项目建立工作流，同时还是为
阅读全文
摘要：一、关于颜色 我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。（在印刷上，颜色是四种颜色合成的，这个是表示方式上的不同。）每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0，0），十六进制表示为#FF0000。按这种表达方式，理论上我们可以得到256*256*256=16777216种颜色。 网页中颜色的表示方式。 网页...
阅读全文
摘要：目前Javascript移动开发框架有些共同的特点：专门为移动设备做了优化，提供标准的UI组件；提供跨平台的支持（Android、IOS、etc）；轻量级，由于手机网络访问的特点，所有的框架都要注意轻量；大量使用HTML5和CSS3标准。 1、jQuery Mobile jQuery Mobile是一个可以帮助我们快速、高效构建跨平台的、统一界面的移动应用工具。也是最流行的一款Javas...
阅读全文
摘要：CSS中的@font-face方法可以调用服务器端的字体。Demo 可以参考：http://idv3.sinaapp.com中标题字体的用法，具体用法如下：@font-face { font-family:name; src: local('Ubuntu'), url(url) format('woff'); sRules}兼容性的情况，Chrome、Firefox、Opera均没有问题，IE系列不支持 .ttf 和 .otf。兼容IE需要 .eot 或者 .woff 的字体格式。看了［参考资料1］的文章，使用 font-face 有不需要本地字库支持就能够保持
阅读全文
摘要：YUI3的CSS与YUI2的CSS不同
改变最大的我觉得是Grids部分，YUI2中以模版的方式提供给我们调用，功能中多选项也很多，而且配合Grid Build Tool，可以快速的生成复杂的页面结构。但正因为其复杂，所以在一些需要自定义比较多的场景下使用起来就比较痛苦。YUI3一改以往的复杂性，仅仅是提供简单的页面逻辑结构单元，我们可以自由的定义页面的宽度，结构单元的分布。非常简单。当然，目前...
阅读全文
