DHTML & CSS
文章平均质量分 71
jsrookie
这个作者很懒,什么都没留下…
展开
-
移动平台的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?1、Meta 之 viewport说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?viewport即可视区域,对于桌面浏览器...原创 2016-02-18 10:51:26 · 79 阅读 · 0 评论 -
gulp教程之gulp中文API
http://www.ydcss.com/ 简介:本文主要翻译gulp官方API,加上自己一点点拙解。gulp API docs1、gulp.src(globs[, options])1.1、说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用...原创 2016-05-07 13:44:33 · 130 阅读 · 0 评论 -
HTML5 Boilerplate - 让页面有个好的开始
一:HTML5 Boilerplate是什么?解决了什么问题?对于第一次听说这个人,肯定都有这个疑问把!在网上看了看,发现很多人都认为这个是和Bootstrap一样的东西,这真是大错特错了。实际上,HTML5 Boilerplate只是一个单纯的HTML模版。什么?HTML模版?干嘛用?这里不得不提所有前端开发都会遇到的问题,每次要重新弄一个页面的时候,你们都是怎么做的呢?那个d...原创 2016-04-20 19:08:50 · 129 阅读 · 0 评论 -
来,让我们谈一谈 Normalize.css
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已...原创 2016-04-20 19:07:12 · 109 阅读 · 0 评论 -
Modernizr.js入门指南
Modernizr.js入门指南 HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果。但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 不够现代的浏览器 诞生之时,HTML5和CSS3尚未被正式推出。于是,我们的问题来了:针对那些不支持新特性的浏览器而言,我们是直接放弃这些用户群呢,...原创 2015-05-26 17:52:57 · 335 阅读 · 0 评论 -
inline-block 前世今生
原文地址:http://ued.taobao.com/blog/2012/08/inline-block/ 曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已。那么...原创 2014-04-12 12:12:40 · 109 阅读 · 0 评论 -
CSS旋转与翻转
css 2.0还是没有翻转的,3.0里面有rotate属性,这个可以把元素进行任意角度旋转,灰常强大。除了这个rotate,还有一个scale,一般用法格式是 -moz-transform:scale(1,1); 括弧里面(1,1)前者表示X轴,后者表示Y轴,当数字大于1时放大,大于0并小于1时缩小,很好理解,那么负数是怎样的效果?答案是 翻转 。-moz-transf...原创 2014-03-10 02:41:47 · 144 阅读 · 0 评论 -
JetBrain WebStorm 注册码
webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA INauvJkeVJBuE5bqLEznccE4tet6tr RiyoMxDK8oDY93tx!ipPyGmqYYeWxS ===== LICENSE END ===== UserName:Micro...原创 2015-01-20 12:11:09 · 255 阅读 · 0 评论 -
HTML5 CSS3 专题 :诱人的实例 3D展示商品信息
http://blog.csdn.net/lmj623565791/article/details/32974051强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~效果图:说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的...原创 2015-01-18 00:14:51 · 135 阅读 · 0 评论 -
解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
1、谷歌浏览器不支持设置CSS较小字体问题分析 网页常常为了排版美观,会使用忽大或小的文字,通常font-size文字为12px(像素)文字。设置大于12px文字字体,各浏览器都能显示出CSS所设置文字大小效果。但是CSS设置小于12px文字时候谷歌浏览器google Chrome就不能显示出CSS所设置小于12px的文字字体效果。2、谷歌浏览器支持设置font-size小于...原创 2013-01-12 10:16:54 · 306 阅读 · 0 评论 -
给Webstorm的HTML自动压缩插件
前端代码的压缩前端的js、css、html的压缩不仅会让网页加载更快一些,在移动互联网的今天省流量也成为了一大好处。google的Closure就是一个JS压缩工具(google暂时好像没有css压缩工具),还有雅虎的 YUI Compressor 它是JS/CSS压缩工具。它们都是用java写的工具,用起来就是一行命令,类似于:java -jar yui.jar --type cs...原创 2016-05-07 14:20:14 · 779 阅读 · 0 评论 -
前端神器avalonJS入门
本章将介绍如何使用avalon来实现前端路由功能。我们需要用到两个avalon路由配套模块—— mmHistory.js 和 mmRouter.js 。其中mmHistory是用于历史管理,它会劫持页面上所有点击链接的行为,当这些链接是以 #/ 、 #!/ 开头,就尝试匹配路由规则,阻止页面刷新 (通过hash方式或HTML5的replaceState方式) 。mmRouter是给我们定义...原创 2016-05-19 19:32:17 · 313 阅读 · 0 评论 -
如何一步步把网站Retina优化
随着高清屏幕、高分辨率屏幕越来越流行,例如MacBook Retina机型、iPad Air系列,这些新生机器有着很高的PPI,对网页的清晰度要求很高,所以越来越多的站长都不得不面临一个问题,那就是把自己的网站做到高分辨率适配 (Retina-Ready)。因为低清的网页在高分辨率屏幕上看起来很糟糕,对用户体验是一个很大的损害。相反,高分辨率适配的网站看起来则更加美观清晰,对用户体验有很大的提高...原创 2015-12-21 11:21:49 · 199 阅读 · 0 评论 -
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y) 图示如下: 任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)...原创 2016-11-23 12:11:37 · 1092 阅读 · 0 评论 -
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667)。2)...原创 2016-11-17 08:35:52 · 162 阅读 · 0 评论 -
CSS实现背景透明,文字不透明(各浏览器兼容)
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ text-align:l...原创 2014-10-29 17:01:29 · 73 阅读 · 0 评论 -
使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中...原创 2016-11-03 23:52:57 · 294 阅读 · 0 评论 -
CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了...原创 2016-11-03 21:51:38 · 134 阅读 · 0 评论 -
CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。最近在学习em的相关知识的时候,无意之间让我拾得一宝,就...原创 2016-11-03 21:50:53 · 107 阅读 · 0 评论 -
gulp使用小结
这篇文章不会介绍 gulp 的起源、发展;不会去一个个讲解 gulp API;也不想出现大段大段的 gulpfile.js 代码;更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用理解和总结。如何通过 gulp 让偶们的前端项目高大上的跑起来?gulp 能做什么,还能做什么?gulp套路能不能来几套?... 希望通过这篇文章你会找到答案写作风格的原因,劳资写的...原创 2016-05-22 19:02:33 · 179 阅读 · 0 评论 -
用gulp做一个略完整的前端打包工作
我们的官网要改版,会从以前的单一产品变成系列产品的官网,也就是现在的官网会是之后官网的一个子模块。趁着这个机会,正好重新梳理了一下结构。加上罪恶之主管的一些要求,具体的需求如下:分模块,每个模块都有独立的页面和静态文件,并将所有静态文件打在一个文件夹下,一些常用变量可以进行替换,并可进行简单的页面动态生成,生产环境打包与线上环境打包分开进行,静态文件进行压...原创 2016-05-22 18:59:42 · 569 阅读 · 0 评论 -
关于DOM元素定位属性的深入学习
以前写JS程序的时候,经常碰到了定位的问题。但每次都看到一半,找到需要的属性就了事了。今天下了狠心,要花点时间,彻底地弄明白他。以下内容看着有点眼熟也不用奇怪,因为是参考了多篇前辈的文章汇总而成,嘿嘿。 宽度、高度jQuery(’#elem’).width() // 获取CSS定义的宽度jQuery(’#elem’).height() // 获取CSS定义的高度...原创 2013-06-13 16:43:51 · 79 阅读 · 0 评论 -
从头开始构建一个web即时通讯系统(五) - 服务器端 - policyserver
简介policy-file是flash socket安全机制的重要部分,而本文详细介绍提供policy-file的policyserver的实现过程。事实上,policyserver本身也是一个socket服务器端的简单原型。了解本文也将为教程中后续的sessionserver的讨论有所铺垫。 什么是policy-filepolicy-file是一个flash的安全控制机...原创 2012-12-21 00:04:14 · 173 阅读 · 0 评论 -
从头开始构建一个web即时通讯系统(三) - 客户端 - flash socket
摘要在上一篇"基础-web即时通讯系统的四种实现"中,我们讨论了socket/tcp相对于其他基于http的通讯方式的优越。本文则详细描述如何使用flash/actionscript,来实现socket/tcp,并使用开源的haxe来编译它。 flash中的socket socket的构造实例化一个socket对象,只需要一行代码:static var sock...原创 2012-12-20 23:24:41 · 144 阅读 · 0 评论 -
DHTML之-----document.selection 的 createRange
一、document.selection 介绍document.selection 表示当前网页中的选中内容。方法有:clear 清除选中的内容 empty 取消选中 createRange 返回 TextRange 或 ControlRange 对象 createRangeCollection 不支持 属性有: type 选中内容的类型 ty...原创 2010-12-07 22:56:34 · 262 阅读 · 0 评论 -
A标签的四个属性 link ,visited , hover ,active 和有顺序
1,以前没注意,原来css定义超链接A四个状态也是有顺序的a:link{text-decoration:none ; color:#c00 ;}a:visited {text-decoration:none ; color:#c30 ;}a:hover {text-decoration:underline ; color:#f60 ;}a:active {text-decoration:n...原创 2011-06-29 13:06:15 · 600 阅读 · 0 评论 -
表格中分隔线的隐藏方法
一、表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的横向分隔线(rules=cols)第第第一二三列列列这个表格去掉了单元格之间的纵向分隔线(rules=rows)横 线竖 线都没...原创 2011-04-15 13:30:05 · 455 阅读 · 0 评论 -
Page-Enter、Page-Exit用法
说明:这个是页面被载入和调出时的一些特效。 用法:<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"> <Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)"> 注意:blendTrans是动态滤镜的一种,产2010-05-03 02:28:48 · 180 阅读 · 0 评论 -
HTML DOM的nodeType值
将HTML DOM中几个容易常用的属性做下记录:nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:nodeN...原创 2009-02-06 14:08:40 · 79 阅读 · 0 评论 -
css样式兼容不同浏览器问题
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px;IE7 专用 *+height: 100px;IE7、FF 共用 heigh...原创 2009-02-05 16:50:23 · 920 阅读 · 0 评论 -
用Javascript切换页面CSS样式
越来越多的网站制作者期望为自己的网站设计多种风格,以便访问者能够选择自己喜欢的样式进行浏览,本文介绍的就是一个切换页面样式的解决方案。Javascript: // 说明:Javascript 切换页面 CSS 样式 // 整理:http://www.CodeBit.cn function setActiveStyleSheet(title) { var ...原创 2009-02-05 15:24:02 · 728 阅读 · 0 评论 -
DIV CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.一、CSS HACK 以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)...原创 2009-01-20 11:30:42 · 89 阅读 · 0 评论 -
XHTML和HTML之间的区别
XHTML 1.0 提供了三种DTD声明可供选择: 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...原创 2009-01-03 16:37:10 · 100 阅读 · 0 评论 -
Unicode spaces
http://www.cs.tut.fi/~jkorpela/chars/spaces.html Space characters in UnicodeCode Name of the character SampleWidth of the characterU+0020SPACE 空格foo barDep...原创 2010-12-08 15:08:05 · 192 阅读 · 0 评论 -
IE6、IE7、IE8、FireFox css line-height兼容问题
针对firefox ie6 ie7 ie8的css样式中的line-height属性,以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对!important可以正确解释,会导致页面没按要求显示!这些细节却往往影响了整个页面样式的美观性。搜索了一下,找到了一个针对IE7、IE8不错的hack方式,IE7使用*+html或*line-hei...原创 2012-05-14 10:42:54 · 123 阅读 · 0 评论 -
从头开始构建一个web即时通讯系统(二) - 基础 - web即时通讯系统的四种实现
页面刷新页面刷新即通过刷新页面来更新聊天记录,通过页面提交来发送消息。毫无疑问,这种实现是最简单的,也是效率最差的。它意味着每一次收发消息都对应了一次httprequest,而http作为应用层协议,连接代价是相当大的。ajaxajax可以理解为xmlhttprequest,本质与页面刷新相同,但是页面上会有很多资源文件,比如图片、css、js、flash,这些文件会随着页面刷...原创 2012-12-20 21:07:15 · 145 阅读 · 0 评论 -
-webkit-scrollbar
-webkit-scrollbar在IE中可以自定义滚动条的样式 ,基于webkit的浏览器现在也可以自定义其样式:<style>::-webkit-scrollbar { /* 1 */ }::-webkit-scrollbar-button { /* 2 */ }::-webkit-scrollbar-track { /* 3 */ }::-webkit-...原创 2013-05-16 13:23:40 · 163 阅读 · 0 评论 -
jQuery.event自定义事件机制-jQuery.event.special范例
什么时候要用到自定义函数?有些浏览器并不兼容某类型的事件,如IE6~8不支持hashchange事件,你无法通过jQuery(window).bind('hashchange', callback)来绑定这个事件,这个时候你就可以通过jQuery自定义事件接口来模拟这个事件,做到跨浏览器兼容。原理jQuery(elem).bind(type, callbakc)实际上是映射到 jQuery.ev...原创 2013-04-28 10:36:45 · 103 阅读 · 0 评论 -
JQuery 提供了两种方式来阻止事件冒泡
方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); });方式二:return false; $("#div1").mousedown(function(event){ ...原创 2013-04-26 17:10:35 · 174 阅读 · 0 评论 -
自己整理的DIV+CSS网页布局实用技巧笔记
1、最小高度min-height:100px; /*高度最小值设置为:100px*/height:auto !important; /*兼容FF,IE7也支持 !important标签*/height:100px; /*兼容ie6*/ 2、<meta http-equiv="X-UA-Compatible" content="IE=7" />的意思:将...原创 2012-04-11 12:59:15 · 80 阅读 · 0 评论