当前位置:首页 > 前端技术

截取location.search,转换为一个对象

Location 对象是 Window 对象的一个部分,包含有关当前 URL 的信息,可通过 window.location 属性来访问。 window.location.search 从问号 (?) 开始的 URL(查询部分)。 以下代码,将当前页面的location对象所请求的参数转化为对象形式 function formatSearch(se){ if (typeof se !== "undefined") { ...

阅读全文
前端技术 57 次阅读 抢沙发

CORS跨域资源共享,实现ajax跨域请求(php简单案例)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。目前,所有现代浏览器都支持该功能,IE浏览器需要IE11+。 ajax跨域请求的header设置和案例 和传统ajax请求相比,CORS跨域请求的偶尔工 ...

阅读全文
前端技术 51 次阅读 抢沙发

CSS3过渡 transition

之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡。 W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...

阅读全文
CSS3学习笔记 193 次阅读 抢沙发

CSS3实现多行文本溢出显示省略号(…)

大家应该都知道用 text-overflow:ellipsis 属性,来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 实现方法: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 效果如图(或点击这里查看demo): 但是这个属性只支持单行文本的溢出显示省略号,如 ...

阅读全文
CSS3学习笔记 170 次阅读 抢沙发

CSS3 新版弹性盒子模型(Flex Box)

传统布局方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局是什么?】

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器内包含了一个或多个弹性子元素。

阅读全文
CSS3学习笔记 227 次阅读 抢沙发

CSS3 Transform 转换(制作旋转、位移、缩放等效果详解)

CSS3 transform 是什么? transform 字面上是:变换;改变,使…变形;转换的意思。 在CSS3中 transform 的属性包括:旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。 语法: transform : none | <transform-function> ...

阅读全文
CSS3学习笔记 1,377 次阅读 抢沙发

jQuery图片延迟加载(懒加载)插件 – jquery.lazyload.js

LazyLoad是一个用JavaScript编写的jQuery插件,它可以延迟加载长页面中的图片,从而提高网页下载速度和减轻服务器负载。 如何使用 LazyLoad依赖于jQuery,请将以下代码加入HTML的结尾,也就是前: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jq ...

阅读全文
前端技术 658 次阅读 抢沙发

CSS3边框 —— 用border-radius 属性制作圆角矩形

在CSS2中添加圆角矩形,我们必须在每个圆角使用不同的图片作为背景。而CSS3中border-radius的出现,让我们创建圆角变的非常容易。其优点:一、减少网站维护的工作量(图片制作,代码替换等);二、提高网站的性能,少了图片的http请求;三、增加视觉美观性。 既然border-radius有这么多好处,我们就从它的语法、属性和属 ...

阅读全文
CSS3学习笔记 901 次阅读 抢沙发

CSS3选择器

CSS 元素选择符 属性 版本 简介 * CSS2 CSS2 通配选择符(*),所有元素对象。 E CSS1 CSS1 类型选择符(E),以文档语言对象类型作为选择符。 E#myid) CSS1 CSS1 ID选择符(E#id),以唯一标识符id属性等于myid的E对象作为选择符。 E.myclass CSS2 CSS1 类选择符(E.class),以class属性包含myclass的E对象作为选 ...

阅读全文
CSS3学习笔记 683 次阅读 抢沙发

HTML中换行造成空格间距的问题详解

我们在根据UI提供的原稿做网站的时候,在UI要求还原度很高的情况下,可能经常会遇到,在两个input标签,或者input与span标签之间,会产生多余3个象素空格的问题。如下图: 代码如下: <style> *{ margin:0; padding:0;} input{width: 120px; height: 30px;} </style> <input type="text&quo ...

阅读全文
前端技术 514 次阅读 抢沙发