摘要: 一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段 阅读全文
posted @ 2015-09-14 17:37 风雨后见彩虹 阅读(295919) 评论(1) 推荐(28) 编辑
摘要: 它的语法如下: display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | t 阅读全文
posted @ 2015-09-14 16:02 风雨后见彩虹 阅读(1601) 评论(1) 推荐(1) 编辑
摘要: 在博客园中看到这样一篇文章,关于disabled和readonly的区别,以前还真的没有注意它们的区别,还是有必要知道它们的区别的,所以转载了。 这两个属性有类似之处,但是区别也是巨大的,之所以说类似,是因为这两个属性好像都貌似能够将指定的元素设置为"不可用"状态,下面就简单介绍一下它们两个的区别, 阅读全文
posted @ 2015-09-13 20:32 风雨后见彩虹 阅读(3973) 评论(0) 推荐(2) 编辑
摘要: 本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normaliz 阅读全文
posted @ 2015-09-13 09:09 风雨后见彩虹 阅读(2998) 评论(0) 推荐(1) 编辑
摘要: 在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 阅读全文
posted @ 2015-09-13 08:47 风雨后见彩虹 阅读(2979) 评论(0) 推荐(0) 编辑
摘要: 对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下: HTML 代码: <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p> </div> CSS 代码: .box{ 阅读全文
posted @ 2015-09-12 22:38 风雨后见彩虹 阅读(2277) 评论(1) 推荐(0) 编辑
摘要: 没有区别。 你需要明白 IIFE 的原理,我简单说一下: IIFE 并非必须,传统一点可以这么写: 那么为什么要 IIFE? 于是,开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢? 当然是不能,但是为什么呢?因为 function foo(...){} 这个部分只是一个声明,对于解 阅读全文
posted @ 2015-09-10 17:14 风雨后见彩虹 阅读(1014) 评论(1) 推荐(0) 编辑
摘要: 简介 Javascript 中一个最重要的特性就是闭包的使用。因为闭包的使用,当前作用域总可以访问外部的作用域。因为Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的。 各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取 阅读全文
posted @ 2015-09-10 17:06 风雨后见彩虹 阅读(2463) 评论(0) 推荐(0) 编辑
摘要: Scoping & Hoisting 例: 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 嗯,看起来无懈可击的推理啊,但让人惊讶的是:答案竟然是 2!为什么? 别着急,我会解释给你听。首先我要告诉你这不是什么错误,而是 J 阅读全文
posted @ 2015-09-10 16:03 风雨后见彩虹 阅读(1717) 评论(0) 推荐(0) 编辑
摘要: 例如: .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F5FA; } IE7,8无效,无法识别。 换一种方法: 给需要变色的tr加上class .table 阅读全文
posted @ 2015-09-06 16:55 风雨后见彩虹 阅读(3916) 评论(1) 推荐(0) 编辑
摘要: 一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容。举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me 阅读全文
posted @ 2015-09-05 20:48 风雨后见彩虹 阅读(1580) 评论(2) 推荐(1) 编辑
摘要: 一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行 阅读全文
posted @ 2015-09-05 19:48 风雨后见彩虹 阅读(5296) 评论(0) 推荐(2) 编辑
摘要: 因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的。如图所示: 下面就讲解这几个属性怎么使用,代表什么意思。 一:webkit下面的CSS设置滚动条 主要有下面7个 阅读全文
posted @ 2015-09-05 17:22 风雨后见彩虹 阅读(60586) 评论(1) 推荐(4) 编辑
摘要: 一:css3属性选择器 img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{ border:2px dashed #000; 阅读全文
posted @ 2015-09-05 17:06 风雨后见彩虹 阅读(20263) 评论(0) 推荐(3) 编辑
摘要: 今天搭建wordpress发现现在主题的时候预览图片都没有了,于是搜索了一下,发现下面的这个方法确实管用,于是转载收藏。有在WordPress后台安装主题、插件的小伙伴可能会遇到主题、插件图片不显示的问题,这给我们照成了不便。说到底还不是墙的问题,所以咱可以通过修改本地的hosts文件来决解。决解方... 阅读全文
posted @ 2015-09-04 22:18 风雨后见彩虹 阅读(3273) 评论(0) 推荐(0) 编辑
摘要: postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值: position: static position: inherit position: relative position: absolute position: fixed position: stic 阅读全文
posted @ 2015-09-04 15:51 风雨后见彩虹 阅读(1485) 评论(0) 推荐(0) 编辑
摘要: 今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求。如图所示:点击北美洲下面出现请求的一些数据 html代码结构: css样式: json格式: js代码: *需要demo猛点该文字,百度云盘下载* 阅读全文
posted @ 2015-09-02 16:29 风雨后见彩虹 阅读(5210) 评论(0) 推荐(1) 编辑
摘要: 在网页中经常会用到视频播放的功能,下面介绍一下swfobject.js的视频播放应用(flash实现):html代码结构: css样式结构: js代码: 结果实现如图: 需要demo猛点该文字,百度云盘下载 提取码:bymc 阅读全文
posted @ 2015-09-02 09:09 风雨后见彩虹 阅读(3019) 评论(0) 推荐(0) 编辑
摘要: 今天看到这篇文章。写的非常有意思,于是转载了。看看我们都处于什么的阶段。 【背景】 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧;如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧;如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧; 阅读全文
posted @ 2015-09-01 19:05 风雨后见彩虹 阅读(1820) 评论(1) 推荐(8) 编辑
摘要: 实现整屏上下翻效果:需加载的js css样式如下: jquery代码如下: 同时也是实时响应的。需要demo猛点该文字,百度云盘下载 阅读全文
posted @ 2015-08-30 16:45 风雨后见彩虹 阅读(1697) 评论(2) 推荐(0) 编辑
摘要: 在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: 其次html结构代码: jquery调用代码如下: 需要demo猛点该文字,百度云盘下载 阅读全文
posted @ 2015-08-29 20:08 风雨后见彩虹 阅读(2074) 评论(0) 推荐(0) 编辑
摘要: DOM相关 判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.createElement('input'); } html代码用JS动态加载进页面 <script type= 阅读全文
posted @ 2015-08-28 12:03 风雨后见彩虹 阅读(5586) 评论(1) 推荐(5) 编辑
摘要: 缓存、安全 浏览器最大并发量限制是多少个?及如何去突破这个限制? 浏览器最大并发量限制 浏览器的并发连接数是有限的,一般是4到6个,在10个以内。 如果你的网站打开加载的资源过多,一般可以用按需加载,分步延时加载等机制,但如果需要同时加载,我们可以把资源分布到不同的域名下。缺点是需要DNS解析更多的 阅读全文
posted @ 2015-08-27 21:32 风雨后见彩虹 阅读(3215) 评论(2) 推荐(2) 编辑
摘要: Google Map API (一):显示一个最基本的地图 1 实现一个地图:<head>中引用: Html里面合适的位置定义: javascript文件: 说明:zoom参数是地图的范围,参数越小,地图的范围就越大center是地图的中心点,通过经纬度定义mapTypeId:是地图的类型。有四种m 阅读全文
posted @ 2015-08-26 11:30 风雨后见彩虹 阅读(5932) 评论(0) 推荐(0) 编辑
摘要: 在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单。 第一步:先打开ckplayer.js里找到下面三行删除掉 第二步: ckplayer.xml里找到下面三行删除掉 第三步:style.swf(改成style. 阅读全文
posted @ 2015-08-25 09:27 风雨后见彩虹 阅读(1013) 评论(0) 推荐(0) 编辑
摘要: 网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放。 可调用flash也可以调用html5播放器 CKobject.embed(...)里面的参数依次分别为: flash播放器文件路径; 容器ID; 播放器的ID; 宽度:可以是百分比; 高度 阅读全文
posted @ 2015-08-24 17:41 风雨后见彩虹 阅读(9085) 评论(0) 推荐(0) 编辑
摘要: 1.jQuery,JS实现tab切换 原生JS实现 HTML代码如下: CSS代码: JS代码: 上面用到了chidren,可以用childNodes来实现该方法,但是要去除里面空白节点。代码如下: 2.jQuery实现点击radio,当选中‘其它’时,显示后面输入框;否则隐藏 有时候会遇到这么一个 阅读全文
posted @ 2015-08-24 14:55 风雨后见彩虹 阅读(4981) 评论(0) 推荐(0) 编辑
摘要: jQuery 的选择器可谓之强大无比,常用的元素查找方法: 层叠选择器 $("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点,经 阅读全文
posted @ 2015-08-24 12:54 风雨后见彩虹 阅读(1956) 评论(2) 推荐(1) 编辑
摘要: 在开发一个页面的时候常常会有这么一个小功能,就是分享该页面中的信息。 常见的分享代码有百度分享, JiaThis分享插件(现在貌似不能用了),bshare分享插件等,我主要分享一下自定义分享代码,如下: htm代码: 阅读全文
posted @ 2015-08-24 11:48 风雨后见彩虹 阅读(6257) 评论(0) 推荐(0) 编辑
摘要: 一:网页中插入flash代码如下: 当然里面的很多属性可以去掉,根据具体的需求而定。 我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签。鉴于火狐及IE等不同浏览器厂商的不兼容性。播放flash也不相同。 OBJECT标签:用于windows平台的IE 阅读全文
posted @ 2015-08-24 11:12 风雨后见彩虹 阅读(3851) 评论(0) 推荐(0) 编辑