随笔分类 - html5
摘要：响应式 Web 设计 - 媒体查询 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面 媒体类型 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等。 speech 应用于屏幕阅读器等发声设备 媒体功能 min-w
阅读全文
摘要：less的简单使用 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 下面是一个简单的LESS示例 新建一个HTML文件，引入外部css,css是没有的需要less动态生成 创建一个与CSS非常相似的文件 style.le
阅读全文
摘要：flex 弹性盒子布局 当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，弹性容器内包
阅读全文
摘要：transform 转换 对元素进行移动、缩放、转动、拉长或拉伸,让某个元素改变形状，大小和位置 ,下面是transform的属性和方法： origin 属性 可以更改旋转得圆心坐标可以是方位和坐标 rotate() 旋转 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 默认旋
阅读全文
摘要：响应式 Web 设计 - 网格视图 响应式网格视图通常是 12 列(按列来布局)，宽度为100%，在浏览器窗口大小调整时会自动伸缩 创建响应式网格视图 首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。 12 列的网格系统可以更好的控制响应式网页 首先我们
阅读全文
摘要：Viewport 是用户网页的可视区域，手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 width：控
阅读全文
摘要：CSS3过渡 添加某种效果可以从一种样式转变到另一个的样式。transition: width 2s, height 2s; 指定要添加效果的CSS属性 指定效果的持续时间 过渡属性 transition 简写属性，用于在一个属性中设置四个过渡属性 transition-property 规定应用过
阅读全文
摘要：CSS3背景 background-image属性 添加背景图片 可加多张，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。 background-image: url(img_flwr.gif), url(paper.gif); 可以给不同的图片设置多个不同的属性 backgr
阅读全文
摘要：CSS3渐变 可以让你在两个或多个指定的颜色之间显示平稳的过渡 线性渐变（linear-gradient）- 向下/向上/向左/向右/对角方向 默认从上向下 background-image: linear-gradient(#e66465, #9198e5) 可多颜色 从左向右 backgroun
阅读全文
摘要：css3颜色 十六进制颜色 #ffffff 十六进制0-f 两位一色，分别为红、绿、蓝 RGB颜色 rgb(红，绿，蓝) 0-255 RGBA颜色 rgba(红，绿，蓝, alpha) alpha为透明度，取值0-1 hls颜色 hsl(h,s,l) 色相饱和度设置颜色 h:色调(0-360)0表示
阅读全文
摘要：属性选择器 [attribute] 选择所有带有attribute属性元素 [div]{} [attribute=value] 选择所有使用attribute="value"的元素 [div="box"]{} [attribute^=value] 选择每一个attribute属性的值以"value"
阅读全文
摘要：使用正确的文档类型 文档类型声明位于HTML文档的第一行（一般为大写DOCTYPE） 使用小写元素(标签)名 HTML5 元素名可以使用大写和小写字母。推荐使用小写字母：混合了大小写的风格是非常糟糕的。 关闭所有 HTML 元素 在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，
阅读全文
摘要：localStorage 长久保存网站数据，需手动删除 sessionStorage 暂时存储，关闭自动删除 保存数据：localStorage.setItem(key,value); 读取数据：localStorage.getItem(key); 删除单个数据：localStorage.remov
阅读全文
摘要：用于图形的绘制，通过脚本 (通常是JavaScript)来完成。 <canvas> 创建一个画布 默认情况下 <canvas> 元素没有边框和内容 创建 context 对象 var c=document.getElementById("myCanvas"); var ctx=c.getContex
阅读全文
摘要：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 draggable 为了使元素可拖动，把 draggable 属性设置为 true。 ondragover 事件规定在何处放置被拖动的数据。 ondrop 当放置被拖数据时，会发生 drop 事件。 ondragstart 属性调用了一个函数它规
阅读全文
摘要：HTML5初识 HTML5是继htnl\html4.01后下一代，设计目的是为了在移动设备上支持多媒体，简单易学。 优点 提高可用性和改进用户的友好体验。 有几个新的标签，这将有助于开发人员定义重要的内容。 可以给站点带来更多的多媒体元素(视频和音频)。 可以很好的替代FLASH和Silverlig
阅读全文