HTML5
文章平均质量分 69
蓝色水
一个在海边拾贝壳的大男孩
2002年毕业于上海市交通大学上中路校区,曾参与微软ALL-IN-ONE-CODE FRAMEWORK项目并对WPF,C++,C#,Winform的MSDN论坛支持多年,专注于net的技术体系十多年,对DDD领域设计net的部署实施有独到见解和经验,并对JAVA的架构体系的数据持久化,AOP,分布式事务,单点登录,多业态权限设计,分布式日志系统有实际项目运用案例,致力于传统行业的HR,OA,费控,业绩,移动平台化整合,ERP改造以及云部署。
展开
-
fis3初步学习体验
作为前端开发,或多或少都会接触很多前端构建工具,最近的业务使用到了百度FIS团队的fis3,想和大家分享下我所理解的fis3。使用方法简单说首先,你需要安装node和npm然后,使用 npm install -g install 命令安装fis3,安装完成是这样的表示安装成功。然后我们可以通过 fis3 release -w 来对代码进行监听。注:f转载 2016-05-09 12:25:25 · 1094 阅读 · 0 评论 -
Css中实现两个DIV左右并排摆放,且自动按比例伸缩(示例)
Div0为最大的,Div1和Div2为左右分割的DIV #Div0 { float:left; background-color:Blue; width:100%; height:180px; } #Div1 { float:left; backgro转载 2015-11-18 12:37:06 · 2836 阅读 · 0 评论 -
手机页面上面 按钮点击的时候有阴影 如何除去
尝试了很多办法,改动label标签为UL li后效果依旧,就是切换有个阴影,后来加了个全局样式解决了 *{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }原创 2015-11-02 09:58:25 · 7313 阅读 · 0 评论 -
position和float的结合运用
刚做的帮助中心还没有明白里面的奥妙,这里又碰到了,absolute让relative的可以不按照float的div约束。 #content { width:780px; margin:0 auto; position:relative; left:0;原创 2015-11-18 16:50:38 · 662 阅读 · 0 评论 -
android原生系统老系统不支持localstorage
android原生系统老系统不支持localstorage原创 2015-11-24 11:05:11 · 3057 阅读 · 0 评论 -
css的分割线
.splitline{ height:1px; width:100%; background:#d9d9da; overflow:hidden;}原创 2015-11-18 16:52:12 · 488 阅读 · 0 评论 -
用ul、li标签创建css横向导航菜单示例
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起。 现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered转载 2015-11-17 15:15:46 · 1035 阅读 · 0 评论 -
图片水平居中
增加margin:0 auto;来使图片水平居中原创 2015-11-17 15:11:16 · 542 阅读 · 0 评论 -
在aspx包含另一个aspx
//.aspxserver.execute(*.aspx) //.vb|.cs---------------用vs.net开发程式分为 .aspx和(.aspx.vb或.aspx.cs)在.aspx中 在.vb|.cs中 server.execute("*.*")原创 2015-11-17 15:51:46 · 1559 阅读 · 0 评论 -
CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。 下面讲解 padding和margin常用的用法一、padding1、语法结构(1)padding-left:10px; 左内边距(2)padding-right:10px; 右内转载 2015-10-16 09:42:59 · 375 阅读 · 0 评论 -
CSS行高——line-height
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识:顶线、中线、基线、底线DOCTYPE html>html> head>转载 2015-10-16 09:33:26 · 511 阅读 · 0 评论 -
JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 无间断滚动scrollLeft套用模板 #外层div的id值{width:px; height:px; overflow:hidden;border:0px solid #ccc;}/*外层div 宽度为显示宽度*/#内层div的id值{width:px;}/*内层转载 2015-10-30 13:14:11 · 2930 阅读 · 0 评论 -
CSS background属性之背景设置详解
CSS background属性之主要背景属性在CSS中,关于background属性,主要有5个相关的背景属性。如下所示:background-color属性:设置背景颜色。background-image属性:设置背景图片。background-repeat属性:是否重复背景图片。background-attachment属性:设置背景图片是否随页面滚动。background-转载 2015-11-18 17:49:07 · 3202 阅读 · 0 评论 -
如何去掉网页中的图片添加超链接的蓝色边框的方法
解决的方法很简单,设边框为0就可以。在中加入代码border="0"如:授人以鱼不如授人以渔,超链接样式延伸学习用CSS语法来控制超链接的形式、颜色变化。例子:链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。实现方法很简单,在源代码的和之间加上如下的CSS语法控制:转载 2015-11-26 12:33:02 · 3651 阅读 · 0 评论 -
移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a转载 2015-12-17 10:57:19 · 480 阅读 · 0 评论 -
Underscore.js常用方法总结
概述Underscore.js是一个很精干的库,压缩后只有4KB。它提供了几十种函数式编程的方法,大大方便了Javascript的编程。MVC框架backbone.js就是基于这个库。它定义了一个下划线(_)对象,函数库的所有方法都属于这个对象。这些方法大致上可以分成:集合(collection)、数组(array)、函数(function)、对象(object)和工具(utili转载 2016-04-22 15:21:50 · 592 阅读 · 0 评论 -
最牛x的滚动插件 – jquery的iscroll插件(附上下拉刷新消息demo)
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能。给它转载 2016-04-22 14:54:45 · 9434 阅读 · 1 评论 -
HTML5 data-* 自定义属性
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。读写方式dat转载 2016-05-12 09:19:38 · 373 阅读 · 0 评论 -
提升HTML5的性能体验系列之一 避免切页白屏
系列文章目录导航:- [提升HTML5的性能体验系列之一 避免切页白屏]- 提升HTML5的性能体验系列之二 列表流畅滑动- 提升HTML5的性能体验系列之三 流畅下拉刷新- 提升HTML5的性能体验系列之四 使用原生UI(nativeUI)- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析窗体切换白屏的现实问题HTML5的性能比原生转载 2016-03-28 13:44:06 · 3088 阅读 · 0 评论 -
微信自定义分享的签名版实现
如果你没有微信公众号,那文章就不需要看了。此文介绍的是微信新版本的分享功能,2015年1月,微信已经抛弃了旧版本的分享。微信的自定义分享功能,是病毒式传播的一把利剑。demodemo 请在微信中打开demo2 请在微信中打开分享接口应用,最常见的莫过于公众号文章分享。通过分享按钮,用户可以将自己喜欢的文章分享给微信好友,也可分享到微信朋友圈。可以在用户分转载 2016-04-12 10:44:02 · 1133 阅读 · 0 评论 -
移动h5自适应布局
问题一,分辨率Resolution适配:不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位。问题二,单位英寸像素数PPI适配:使用rem单位,文字会发虚。段落文字,使用px单位,用media query或js来适配。标题文字可以直接使用rem单位。问题三,设备像素比例DPR适配:1物理像素在显示效果不合需求。要根据devic转载 2016-04-05 13:08:25 · 1544 阅读 · 0 评论 -
JavaScript插件化开发教程 (二)
1),如果项目技术选型换了这些插件又是强依赖“jQuery”机制,我们以前写的插件将会不能用(假设不用jQuery的情况),如何做重构那?(2),重构插件的关键逻辑,我们将如何组织那?好了,带着问题去学习今天的文章吧。首先我不是否定“jQuery插件的方式”,其次是我们要从不同的角度分析问题,比如说“jQuery插件有如下优点”:(1),把全部代码放在闭包(一个即时转载 2016-01-11 16:36:47 · 426 阅读 · 0 评论 -
先执行javascript在执行ios原生函数
function hideAndcall() { hideDivCenter('#model'); location.href = "telprompt:4009918918"; } function hideAndcall2() { hideDivCenter('#model');原创 2015-12-21 14:09:47 · 511 阅读 · 0 评论 -
-webkit-tap-highlight-color
概述:-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度转载 2015-12-21 09:23:55 · 581 阅读 · 0 评论 -
CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性。在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小。这四个单位哪一种最适合Web? 这个问题引起了广泛的争论。找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答。 接触这些单位 1. “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示。一个em等于当转载 2015-12-18 14:50:46 · 2116 阅读 · 0 评论 -
IE如何切换成ie6或者更低版本来诊断js错误
很多时候做H5的页面还要兼容以前的浏览器版本,为了公司的这块特殊人群很多以前的js边界判断隐藏在代码中,可以使用ieTester来模拟不同版本的浏览器,包括ie5,ie6,ie7,但是其实最好的还是ie11自带的仿真,请使用f12进入开发者工具。如下: 这边选择了之后就能断到错误位置:当然也可以用IEtest来进行更多ie的浏览器兼容检查:原创 2015-12-18 11:08:04 · 2006 阅读 · 0 评论 -
深入了解css的行高Line Height属性
什么是行间距?古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距离。不过,行间距与半行间距,还是取决于CSS中的line-height。那么,如何来使用line-height呢?默认状态,浏览器使用1.0-1.2 line-height, 这转载 2015-10-15 19:41:48 · 410 阅读 · 0 评论 -
如何去设计一个自适应的网页设计或HTMl5
如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战!移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)转载 2015-10-15 14:52:55 · 717 阅读 · 0 评论 -
火狐和IE的window.event对象详解
FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的。但它主要检查FF方面的错误,对IE就无能为力了。要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不到测试了),用法也很方便。 至于JS对不同浏览器的兼容注意事项,的确很多,下面给你的也只是部分,一般建议还是采用jquery,prototype等一些已经处理好了兼容的脚本库,更重转载 2015-11-05 14:51:23 · 1183 阅读 · 0 评论 -
CSS背景靠右对齐,并且背景图片右边刘10px
margin-right:10px;float:right;或者Background-Image:url(图像路径) X坐标 Y坐标 no-repeat;或者padding-right:10px;float:right;转载 2015-10-20 14:04:53 · 16701 阅读 · 1 评论 -
div,li,span中加入span右对齐方法
我们常常在做网站的时候会div,li,span中加入span右对齐,例如:文章列表中在我们会加入时间让它右对齐,以增加网页的可读性,如下代码:html如下: span右对齐,换行显示的解决方法2010-8-26css:.news ul li span{float:right;}不过问题又来了,往往我们在一个块中加入span时就会发现在网页中预览时span换行右对齐了,转载 2015-10-20 14:25:05 · 40068 阅读 · 0 评论 -
带你深入剖析inline-block属性值的前世今生
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-转载 2015-11-04 18:07:39 · 412 阅读 · 0 评论 -
给超链接(a标签)加onclick事件
[javascript] view plaincopy"alert('1')">超链接1 "#" onclick="alert('2')">超链接2 "javascript:alert('3')">超链接3 第1个超链接中,没有设置href属性,因此,从中看起来好像只是一行文字,并且鼠标放在上面的时候,也不会显示小手转载 2015-10-20 14:19:54 · 2807 阅读 · 0 评论 -
实现DIV层内的文字垂直居中
有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。 首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affect转载 2015-10-20 14:29:14 · 1626 阅读 · 0 评论 -
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上;转载 2015-11-04 17:44:56 · 328 阅读 · 0 评论 -
HTML5中的sessionStorage使用示例
SessionStorage作为HTML5的Web Storage的两种存储方式之一。 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁。 不是一种持久化的本地存储。 会话级的存储。1、接口 sessionStorage.getItem(key) ---- 获取指定ke转载 2015-11-04 15:00:40 · 1008 阅读 · 0 评论 -
右边DIV撑满左边固定宽度
第一种,都向左浮动, width 各占相应百分比(注意div1 ,div2 有padding margin 等属性会影响宽度 )两div高度可以不一样, div1 15% + div1 85% = 100% 宽 .div1 { float: left; width: 15%; background-color: lightseagre转载 2015-10-19 18:08:52 · 1013 阅读 · 0 评论 -
HTML5本地存储Localstorage
什么是localstorage前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题:① cookie大小限制在4k左右,不适合存业务数据② cookie每次随HTTP事务一起发送,浪费带宽我们是做移动项目的,所以这里真实适合使用的技术是localstorage,localst转载 2015-11-04 10:14:28 · 332 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以转载 2015-11-04 09:03:52 · 305 阅读 · 0 评论 -
内框 border-bottom: 3px solid #ff4400;始终在下边框下解决办法
.tab .at { border-bottom: 3px solid #ff4400; box-sizing:border-box; color:#ff4400; }其实只要改变box-sizing为border-原创 2015-11-09 13:16:01 · 2237 阅读 · 0 评论