currently reading articles under 前端

demo10:盒模型:你真的理解margin和padding吗

在浏览器渲染页面的时候,每个元素都会被渲染为一个矩形。

我们可以用CSS来指定任何元素的任何方向的边距和边框大小,浏览器会根据CSS的写法,来确定矩形的外边距(margin)/边框(border)/内边距(padding)以及内容宽高(content area)。

content area是元素内容部分真正占用的空间大小。

内边距padding指的是,元素和边框之间的距离。

可以通过CSS的border属性设置元素边框宽度。

外边距margin用来指定元素外所占区域,在margin区域虽然没有本元素的内容,其他元素也无法显示在这片区域——除非其他元素通过特殊方式脱离了文档流。margin通常用......

demo10-封装自己的框架kylinGo之GET方法

封装自己的框架kylinGo——GET操作篇

ajax操作在前端工作中必不可少,其重要性我就不再赘述,而常用的几乎每一种框架都有ajax的封装实现。而我们要做的,是用原生代码实现GET和POST方法,再封装成简单的形式以方便调用。这要求我们对原生ajax有一些了解,面试中也经常会谈到原生ajax部分。

假设你对ajax的使用场景和功能已经比较了解。下面我来对ajax进行一些技术层面的简要介绍

ajax其本质是通过一个对象来向某个服务器发出异步请求,获取数据,并执行回调函数的过程。

同步和异步

同步请求:严格按照时间顺序发出请求,等待请求结果,执行回调函数,向下执行

异步请求:发起请求后,......

demo9-封装自己的框架kylinGo之dom操作

封装自己的框架kylinGo——dom操作篇

丛这一章开始,我会指引你一步步封装出自己的框架,独立完成一些框架所应具备的主要功能。

为什么要封装框架

原生的javascript代码非常长,既浪耗费写代码的时间又降低了可读性。请看如下代码:

//原生

document.getElementById("id");

document.querySelector("#id");

//jquery

$("#id");

如上,jquery可以用很短的代码来代替javascript很长的代码。这种代替的累加效果会让开发人员在开发一款产......

demo8-模拟黑客帝国效果

模拟黑客帝国效果

提要:本demo涉及到CSS3与javascript的综合应用

最终效果:

http://siida.cn/book/demo8.html(请用电脑访问)

为了专注于核心代码,我并没有做兼容,因此请用高版本的chrome浏览器访问。

需求分析:

正如你所见,页面主要由两部分组成,一部分是中间的输入框,另一部分是背景的模拟黑客帝国动画,而难点是背景部分,下面我们就来一步一步对动画部分进行拆解分析。

选型

解决问题的第一步就是根据目标效果进行技术选型:即选择一个可以实现这个效果的最佳技术方案,如果有多种方法均可实现效果,则要从开发时间、性能、兼容性等多方面进行考虑,......