随笔分类 - html5/css3
摘要：Flexible Box Model(灵活盒子模型)在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应，更加方便。 Flexible Box Model有几个属性：1、box-orient 在父元素上设置 子元素排列 vertical (垂直) or horizontal（水平）2、box-flex 在子元素上设置 兄弟元素之间比例，仅作一个系数3、box-align 在父...
阅读全文
摘要：说明一下，在此所说的移动设备前端开发是指针对高端智能手机（如Iphone、Android），所以需要对webkit内核的浏览器有一定的了解。1、webkit内核中的一些私有的meta标签第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 其中http://web
阅读全文
摘要：Web Storage功能，顾名思义，就是在Web上针对客户端本地储存数据的功能，具体来说Web Storage分为两种；sessionStorage：将数据保存在session对象中，所谓session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage：将数据保存在客户端本地的硬件设备（通常指硬盘，当然可以是其他的硬件设备）中，即是浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时，仍然可以继续使用。sessionStorage与localStor
阅读全文
摘要：CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3渐变─Gradient。CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <meta charset="utf-8"&
阅读全文
摘要：1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="gb2312"> 5 <title>HTML5--JS API-本地存储 Web留言板</title> 6 <style type="text/css"> 7 *{margin:0; padding:0;} 8 body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft
阅读全文
摘要：Web Storage功能，顾名思义，就是在Web上针对客户端本地储存数据的功能，具体来说Web Storage分为两种；sessionStorage： 将数据保存在session对象中，所谓session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage： 将数据保存在客户端本地的硬件设备（通常指硬盘，当然可以是其他的硬件设备）中，即是浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时，仍然可以继续使用。sessionStorage与local..
阅读全文
摘要：新的选择器document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+document.querySelectorAll("selector");selector:根据CSS选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组;支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera
阅读全文
