html5-css3
关注
分享
扫一扫
lzhw1985
这个作者很懒，什么都没留下…
展开
-
学习css3+html5常用网址
http://www.css3-html5.com css3-html5;http://www.css88.com web前端原创 2011-12-14 14:15:56 · 124 阅读 · 0 评论 -
关于HTML5中input框type=number取值的问题
在HTML5中，新增了type=number的类型，这个类型有一些隐藏的问题。 在W3C规范中，如果输入了一些非数字的字符，就会返回空字符串。 http://www.w3.org/TR/html5/forms.html#number-state-(type=number) 这个事情非常坑，会导致验证的时候如果输入非数字的时候，直接.value( 或者$('.selecto...原创 2014-08-08 11:15:22 · 1232 阅读 · 0 评论 -
jQuery中鲜为人知的的几个方法
jQuery近些年来仍旧是web开发中最受欢迎的类库，虽然大家褒贬不一，但是仍旧不失为一款最流行的Javascript，在今天这篇文章中，我们将介绍几个jQuery的相关方法，无论你是入门级极客或者骨灰级极客，可能都会忽略这些方法的使用。希望大家会觉得有帮助！在事件中return false可能大家在编写事件相关代码的时候，有时候会使用return false语句，代码如下：$("a")...原创 2014-08-08 11:15:58 · 133 阅读 · 0 评论 -
9 个用来加速 HTML5 应用的方法
Web 开发者经常在找一些新的方法来不断的提升页面的速度和性能，而 HTML5 的很多新特性可以实现，让用户有着更好的体验，在这里我们整理了 9 种简单易于实现的 HTML5 技巧，或许可以对你有所帮助。1. 使用 HTML5 表单和输入框HTML5 引入很多全新的表单属性和输入框类型，虽然并不是所有的浏览器都支持，但它们的确都很有用：autofocus 使得页面加载完毕后自动为某个输...原创 2014-08-08 11:16:37 · 134 阅读 · 0 评论 -
实时监听输入框值变化的完美方案：oninput & onpropertychange
在 Web 开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。 ...原创 2014-08-08 11:17:50 · 190 阅读 · 0 评论 -
Webkit内核浏览器下搜索框大小及文字下沉问题
问题如下图所示（Safari或者Chrome等基于Webkit核心的浏览器）：由于很少使用基于Webkit内核的浏览器，比如Safari和Chrome什么的，以至于自己一直没有很好的重视这个问题，今天Prouz提出了这个问题，于是我便开始研究，但是随着研究的深入，发现问题也越来越多。首先是在Webkit内核浏览器下搜索框特有的样式，通过Google的开发人员工具结合网上搜索发现这么一...原创 2014-08-08 11:20:29 · 439 阅读 · 0 评论 -
不同浏览器中Cookies的长度
一、浏览器允许每个域名所包含的 cookie 数：Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie（《Update to Internet Explorer’s Cookie Jar》）。Firefox 每个域名 cookie 限制为 50 个。Opera 每个域名...原创 2014-08-15 10:43:30 · 341 阅读 · 0 评论 -
jquery cookie的用法
jQuery cookie是个很好的cookie插件，大概的使用方法如下example $.cookie(’name’, ‘value’);设置cookie的值，把name变量的值设为valueexample $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});新建一个coo...原创 2014-08-15 10:45:11 · 119 阅读 · 0 评论 -
html——黑体、斜体、下划线及删除线
1.黑体，斜体，下划线，删除线 在HTML中<B>标识符使文字以黑体显示，要让文字以斜体显示，应把文字置于<I>之间。你也可通过<U>来给文字加下划线。最后如果你需要删除线（有一道横线穿过的文本），应该使用<STRIKE>或<S>标识符。下面是一些例子代码<HTML><HEAD>&原创 2014-08-15 14:23:55 · 684 阅读 · 0 评论 -
javascript中0级DOM和2级DOM事件模型浅析
javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用：<input type="button" onclick="alert('Button Click')" />当上面的button被点击后，会弹出一个框显示“Button Click”.在javascript中添加事件监听函数有多种方法，比如：...原创 2014-08-27 16:12:24 · 167 阅读 · 0 评论 -
图解 CSS (2): border - 边框
样式表可以是外部的、内联的、嵌入的、链接的, 譬如下面的内联样式将作用于所有 ID=Test 的标签:<style> #Test {...} </style> borderborder-widthborder-styleborder-colorborder-topborder-top-widthborder-top-style...原创 2014-08-29 21:59:12 · 145 阅读 · 0 评论 -
CSS设置DIV背景色渐变显示
[css] view plaincopyprint? <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradien...原创 2014-08-29 22:00:29 · 222 阅读 · 0 评论 -
文本域(textarea)的高度自适应实现两法
随着HTML5的即将退出，相信大家对页面更加人性化有了一定的期待，这里我介绍两种方法，让你的textarea能够实现根据内容自动调整高度，让你的页面也炫起来！方法一，使用JS自动调整<textarea name="mytextarea" cols="80" style="overflow-y:hidden;height:80px;" onpropertychange...原创 2014-08-29 22:02:38 · 416 阅读 · 0 评论 -
css box-shadow 產生陰影效果或光暈效果的特性
說明：元素 ( elements ) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。運用這個 css level 3 ( css 3) 的特性 ( css property ) ，讓我們可以很輕鬆就能呈現迷人的視覺效果，而不需要煩瑣地一張一張製作圖片。更具意義的是，產生的陰影不會對版面編排造成影響。適合：有 html ...原创 2014-08-29 22:04:21 · 824 阅读 · 0 评论 -
border-radius+border直角无法消去
今天在手机开发，需要做个带边框的圆角效果如下在chrome的做效果设置css.alertEnter{ width: 80%; background-color: #fffbe4; border: 2px solid #5a493f; -webkit-box-shadow: 0px 0px 10px #5a493f; margin: auto; margin-...2014-09-03 11:47:42 · 1568 阅读 · 0 评论 -
CSS垂直水平完全居中手册
} 块级元素（block level）居中? 你可以通过设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果），如。 .center-me { margin: 0 auto;} 如果有很多块级元素呢？ 如果你有很匀块级元素需要水平居中成一行，你最好使用一个不同...原创 2014-09-09 17:44:48 · 117 阅读 · 0 评论 -
js 获取本周的日期
function formOnload(){//按周日为一周的最后一天计算 var date = new Date(); var this_day = date.getDay(); //今天是这周的第几天 var step_s = -this_day+1; //上周日距离今天的天数（负数表示）if (this_day == 0) { step_s = -7; // 如...原创 2014-10-13 14:22:50 · 207 阅读 · 0 评论 -
jquery cookie用法(获取cookie值,删除cookie)
[导读] cookie在jquery中有指定的cookie操作类，下面我先来介绍我们在使用cookie操作类时的一些问题，然后介绍正确的使用方法。 使用JQuery操作cookie时 发生取的值不正确的问题：结果发现cookie有四个不同的属性: 名cookie在jquery中有指定的cookie操作类，下面我先来介绍我们在使用cookie操作类时的一些问题，然后介绍正确的使用方法。使用...原创 2014-05-16 14:27:51 · 599 阅读 · 0 评论 -
使用 viewport meta 标签在手机浏览器上控制布局
什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小...原创 2014-05-16 14:25:58 · 127 阅读 · 0 评论 -
用css3写遨游的logo
实现方法：先画一个外框 width: 240px; height: 240px;border-radius: 120px;填充背景色background:#b1e4ff;描边border:2px solid #789cb6;加阴影box-shadow: 5px 5px 7px #999;给该死的firefox3私有属性-moz-border-radius: 120px; ...原创 2011-12-15 09:35:35 · 84 阅读 · 0 评论 -
HTML5 canvas 新手入门教程
HTML5 canvas 新手入门教程简述HTML5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并...原创 2011-12-15 09:38:08 · 263 阅读 · 0 评论 -
常用的CSS3介紹
1. Border-radiusBorder-radius 應該是css3最常用的功能了。以前要做round corner真的有點費力，而且你還得用各個browser去test下有沒問題，費時失事。有了border-radius就不用再煩了。雖然舊版browser也不可能顯示round corner了，可是正因為你知道，所以也就省了看的時間了！可以肯定新的browser看起來都大同小異...原创 2011-12-15 17:41:42 · 110 阅读 · 0 评论 -
CSS3选择符语法
CSS3选择符语法概览：! N+ Z8 C3 H% ^: ` K0 k7 |选择符类型表达式描述子串匹配的属性选择符E[att^="val"]匹配具有att属性、且值以val开头的E元素子串匹配的属性选择符E[att$="val"]匹配具有att属性、且值以val结尾的E元素子串匹配的属性选择符E[att*="val"]匹配具有...原创 2011-12-16 10:33:48 · 104 阅读 · 0 评论 -
设置DIV背景颜色透明度
本节向大家爱描述一下如何设置DIV背景颜色透明度，opacityOpacity设置或检索透明渐变的开始透明度，Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。设置DIV背景颜色透明度通常我们通过DIV的style样式属性filter来设置DIV背景透明样式。可根据alpha提供的如下参数进行组合控制：...原创 2011-12-28 16:18:33 · 1192 阅读 · 0 评论 -
JavaScript解析Json(转)
JSON（JavaScriptObject Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用...原创 2012-01-13 10:55:21 · 101 阅读 · 0 评论 -
CSS3 Transition详解
Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。基础知识Transition对应的CSS属性列表：transition-property*...原创 2012-01-19 17:24:23 · 167 阅读 · 0 评论 -
页面元素的定位：getBoundingClientRect()和document.documentElement.scrollTop
1.document.documentElement.getBoundingClientRectMSDN对此的解释是： SyntaxoRect = object.getBoundingClientRect()Return ValueReturns a TextRectangle object. Each rectangle has four integer...原创 2012-02-13 16:46:00 · 198 阅读 · 0 评论 -
html5学习-video audio标签
html5学习-video audio标签时间:2012-01-11 08:17来源:博客园 作者:walker石 点击:196次在以前，网页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。html5 video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。 v...原创 2012-03-29 09:41:20 · 223 阅读 · 0 评论 -
video audio标签
在以前，网页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。html5 video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。 vedio和audio的使用技巧基本相同，本文仅以vedio作示例。先引用一段别人 在以前，网页...原创 2012-03-29 10:38:01 · 430 阅读 · 0 评论 -
学习资源：如何开启WebGL
最近发现很多朋友无法运行HTML5的一些应用或游戏，经询问得知，大部分因为浏览器的WebGL没有开启所导致，那么我们如何开启WebGL呢？ 1、哪些浏览器支持WebGL要运行WebGL，你必须有一个支持它的浏览器，比如：Google Chrome 9+Mozilla Firefox 4+Safari 5.1+（仅限于Mac OS X操作系统，不包括Windows操作系统；那么这种...原创 2012-04-11 15:39:03 · 393 阅读 · 0 评论 -
getElementsByClassName的原生实现
DOM 提供了一个名为 getElementById() 的方法，这个方法将返回一个对象，这个对象就是参数 id 所对应的元素节点。另外，getElementByTagName() 方法会返回一个对象的数组，每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题，能不能通过标签的类名class name来获取该对象呢？下面是这个猜想的程序...原创 2012-08-16 14:29:12 · 145 阅读 · 0 评论 -
HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总<audio> 标签属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条Html代码 <audio id="media" src="http://ww...原创 2012-09-06 11:11:07 · 112 阅读 · 0 评论 -
A标签执行JS脚本
前言A标签是html中常用的标签，它与button按钮是实现页面跳转的两种最常用的方式，经常在开发中我们更喜欢使用A标签，它们两者可以相互替换，但他们在执行js脚本时有着细微的区别。使用A标签执行JS脚本的几种方式1、href="javascript:js_method();"这是我们最常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为...原创 2013-06-20 17:22:34 · 119 阅读 · 0 评论 -
启动tomcat报StandardServer.await: create[8005]
启动tomcat报StandardServer.await: create[8005]今天发现朋友在启动tomcat时出现以下错误2012-5-9 8:58:26 org.apache.coyote.http11.Http11AprProtocol startINFO: Starting Coyote HTTP/1.1 on http-80802012-5-9 8:58:26 o...原创 2013-06-21 09:38:57 · 135 阅读 · 0 评论 -
用meta实现的页面跳转代码
用meta实现的页面跳转代码,建议与js一起使用，防止页面假死或不支持js的情况，都可以实现效果。使用跳转代码，把主页指向pop_ad 你看看我的404页面 http://www.jb51.net/404 只需要在页面加入一行代码 <meta http-equiv="Refresh" content="5; url=http://www.jb51.net" /> content=5...原创 2012-12-29 14:43:47 · 156 阅读 · 0 评论 -
HTML5超酷秒表动画 可暂停和重置秒表
关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。在线演示下面来分析一下实现的源代码，主要由HTML和CSS代码组成，CSS相对比较复杂，因为涉及到动画。HTML代码：<input...原创 2014-10-13 14:24:58 · 525 阅读 · 0 评论