摘要: 一、背景 设计狮童鞋总是会设计各种高大上的效果图,比如下面这个土豪金的效果。 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框,打钩时是一个金色的对勾。接下来说说怎样实现该效果。 二、解决方法 1、纯css解决方法 在css3 选择器(三)一文中介绍过一个选择器【:checked】选择阅读全文
posted @ 2015-10-27 12:51 starof 阅读(2064) 评论(2) 编辑
摘要: css多栏自适应布局还是需要总结一下的,都是基本功。 一般使用position属性布局,或者用float属性布局,也可以使用display属性。 看资料说position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 一、左侧尺寸固定右侧自适应 1、浮阅读全文
posted @ 2015-08-20 15:55 starof 阅读(1929) 评论(6) 编辑
摘要: 一、包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块。 1、包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。 1、初始包含块(Initial containi阅读全文
posted @ 2015-07-13 22:45 starof 阅读(487) 评论(0) 编辑
摘要: 一、浮动介绍 历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”。 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。 Note: 1阅读全文
posted @ 2015-07-06 23:13 starof 阅读(1242) 评论(5) 编辑
摘要: 一、text-overflow 1、text-overflow作用 简单来说,text-overflow用来设置文本溢出时是否用省略标记(...) 准确的说是设置溢出的文本在不显示的情况下怎样展示给用户,直接裁剪掉?用省略(...)标记?或者显示自定义的string。 2、text-overflow阅读全文
posted @ 2015-05-30 23:21 starof 阅读(305) 评论(0) 编辑
摘要: 前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值: scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。 fix阅读全文
posted @ 2015-05-19 17:25 starof 阅读(2792) 评论(1) 编辑
摘要: 一、opacity属性 1、opacity 习惯上说“透明度”,其实应该叫“不透明度”。opacity 意思:不透明,而背景色的默认值:transparent意思才是“透明的”。所以opacity用来设置不透明度,取值从[0.0~1.0],代表从完全透明到完全不透明,0.0就和transparent阅读全文
posted @ 2015-05-19 14:23 starof 阅读(450) 评论(0) 编辑
摘要: 为什么要写这篇文章是因为 上面代码执行结果是这样的。按照我的理解,body在DOM中比html近,应该会按body h1中定义的绿色来显示文字,但是恰恰相反,文字颜色是紫色的。 原因现在我当然是知道的,因为css中优先级无视DOM树中节点的距离远近,就是说DOM树中的距离不会对元素优先级计算产生影响阅读全文
posted @ 2015-04-07 09:28 starof 阅读(1131) 评论(2) 编辑
摘要: 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。 callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行阅读全文
posted @ 2017-05-22 15:11 starof 阅读(93) 评论(0) 编辑
摘要: 工具方法。对函数的统一管理。 jquery2.0.3版本$.Callback()部分的源码如下: // String to Object options format cache var optionsCache = {}; // Convert String-formatted options i阅读全文
posted @ 2017-05-21 23:08 starof 阅读(196) 评论(2) 编辑
摘要: 时间戳: 时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数。它也被称为 Unix 时间戳(Unix Timestamp)。 JavaScript 获取当前时间戳: 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追阅读全文
posted @ 2017-05-19 13:56 starof 阅读(15) 评论(0) 编辑
摘要: 一、未使用预加载技术前 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图片预加载之无序加载</title> <style> .box { text-align: center; } .btn { di阅读全文
posted @ 2017-05-17 14:44 starof 阅读(88) 评论(0) 编辑
摘要: jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 ready():准备DOM触发。 jQuery.ready.promise=function(){}; 监听阅读全文
posted @ 2017-05-16 10:49 starof 阅读(432) 评论(5) 编辑
该文被密码保护。
posted @ 2017-05-16 10:32 starof 阅读(2) 评论(0) 编辑
摘要: 一次面试中面试官问到jQuery和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了。 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名字,比如传入jq,那我就挂载在window.jq上。 事实上这肯定不是jquery解决冲突的阅读全文
posted @ 2017-05-15 14:46 starof 阅读(600) 评论(0) 编辑
摘要: 一、对外提供接口 对外提供了jQuery。 jQuery本身是一个构造函数,包括了很多静态方法(工具方法)和实例方法。静态方法更底层。 return new jQuery.fn.init( selector, context, rootjQuery ); $('#casper')跟new $('#c阅读全文
posted @ 2017-05-15 13:51 starof 阅读(83) 评论(0) 编辑
摘要: 设计稿中 字体是9px。 firefox浏览器显示正常,chrome浏览器字体显示为12px。 在chrome浏览器下对字体进行缩放:12px*0.75= 9px -webkit-transform: scale(0.75); Note:translate移动的基点默认为元素中心点,可以根据tran阅读全文
posted @ 2017-05-08 16:54 starof 阅读(19) 评论(0) 编辑
摘要: 一、为什么要有localStorage 由于HTML4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据。 下面是Cookie的限制: 大阅读全文
posted @ 2017-05-08 14:13 starof 阅读(27) 评论(0) 编辑
摘要: 本文主要是列出一些javascript 相关的,不限于javascript的,容易记错或者遗忘的小知识,小技巧。 1、javascript中的false 在 JavaScript,常见的 false 值: 要注意空数组([])和空对象({}): 所以在 if 中,[] 和 {} 都表现为 true。阅读全文
posted @ 2017-05-07 10:13 starof 阅读(123) 评论(0) 编辑
摘要: 一、温故知新 做做题,总是能有温故知新的体验。这套题是2010年的了,比较老了, http://perfectionkills.com/ 还有一套http://perfectionkills.com/javascript-quiz-es6 比较新ES6相关的。 在这个页面有14道ECMAScript阅读全文
posted @ 2017-05-07 07:25 starof 阅读(124) 评论(0) 编辑
摘要: 说是面试题,其实也相当于是对js事件部分知识点的一个总结。简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章。JavaScript本身没有事件模型,但是环境可以有。 DOM:addEventListener、removeEventListener、dispatchEventIE-阅读全文
posted @ 2017-05-02 13:00 starof 阅读(787) 评论(0) 编辑
摘要: HTML+CSS 1、盒子模型,块级元素和行内元素特性与区别。 2、行内块的使用,兼容性解决。 3、清除浮动的方式以及各自的优劣。 4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。 5、CSS选择器以及优先级计算。 6、常用的CSS hack。 7、遇到的兼容性问题与解决方法。阅读全文
posted @ 2017-04-30 10:41 starof 阅读(46) 评论(0) 编辑
摘要: 封装一个能够隔离浏览器差异的JavaScript库EventUtil,主要是使用能力检测。 var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEven阅读全文
posted @ 2017-04-27 11:03 starof 阅读(35) 评论(0) 编辑
摘要: alt+insert:新建一个文件或其他 ctrl+shift+l:代码格式化 【可能会和qq的锁屏键冲突】 ctrl+shift+r:批量查找替换 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://w阅读全文
posted @ 2017-04-19 16:56 starof 阅读(30) 评论(0) 编辑
摘要: 一、设计稿 要实现下面这样一个效果,本文重点说的是下面“自动续费,可随时取消”这部分的实现。 我把问题简化一下,变成了 二、解决问题的思路 1、p标签加背景色 一般,很容易想到用p标签实现,代码如下: <style type="text/css"> .box { width: 154px; heig阅读全文
posted @ 2017-04-18 17:07 starof 阅读(250) 评论(0) 编辑
摘要: 一、为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示;但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? 解决方案就是给第二个div加上:vertical-align:top。 关于vertical-align和基线阅读全文
posted @ 2017-04-17 15:16 starof 阅读(406) 评论(1) 编辑
摘要: 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS,这里使用PS进行网页切图。 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background)。 一、使阅读全文
posted @ 2017-04-14 17:00 starof 阅读(49) 评论(0) 编辑
摘要: 在线ps【update 20170516】 很好用,有些png图片压缩的时候,在线压缩都413了,可以用这个把png转为jpg,也不失真。 https://www.webps.cn/ 在线无损压缩工具 【update20170523】 http://webresizer.com/ 去年给同事推荐过,阅读全文
posted @ 2017-04-13 11:25 starof 阅读(42) 评论(2) 编辑