- 博客(26)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 WebStorm使用less
参考：使用less http://less.bootcss.com/#using-less1. 安装node.js (下载地址：https://nodejs.org/ )记下安装路径，如 D:\Program Files\nodejs2. 打开命令行工具cmd，进入nodejs安装目录，输入命令： d: 回车，再输入命令： cd D:\Pro
2015-08-31 13:02:30
15289
2
原创 css3媒体查询Medai Queries小例
当（浏览器）窗口可见宽度小于400px时，三个列每列占满全部宽度，边框是蓝色；当（浏览器）窗口可见宽度在400px到1000px之间时，排三列，中间列宽度自适应，边框是红色；当（浏览器）窗口可见宽度大于1000px时，三个列并列显示，每个宽度固定，边框是绿色代码： 媒体查询小例 --> @media all
2015-08-30 21:37:04
692
转载 CSS3媒体查询 Media Queries 简介
原文链接: Introduction to CSS3 Media Queries http://www.developer.com/lang/css/introduction-to-css3-media-queries.html原文日期: 2014年2月21日 翻译日期: 2014年2月26日 翻译人员: 铁锚简介随着移动设备的日益普及,web开发人员需要确保他们的网
2015-08-30 20:54:45
822
原创 css3弹性盒布局
1. box-flex属性 可让宽度自适应一个例子，三列布局，中间一列的宽度是自适应的，左列的宽度总是300px,右列的宽度总是200px三个列的父元素使用属性display:box，中间列使用属性box-flex:1代码： 弹性盒布局 body{ margin:0; padding:0
2015-08-30 20:25:55
1320
原创 css3盒布局取代float布局
下面来写一个布局，上面分三列,底部还有两个一列。1. 用float浮动来写注意，上面三个div都固定了宽度且向左浮动，红色div使用clear:both属性问题来了：就是上面三个浮动的div，高度都没定义，所以它们的高度明显不一致。。代码： Float属性布局 body{ color:#fff;
2015-08-30 18:40:38
4237
原创 css3的动画animation
css3的animation动画可设定元素属性变化的中间多个关键帧，以此设定复杂的动画效果，而transition只能设定开始状态和结束状态两帧。例子： div从左上角运动到右上角再运动到右下角再运动到左上角同时变色 div { width:100px; height:100px
2015-08-28 13:17:06
854
原创 css3的过渡transition
css3中使用过渡功能可以使元素的css属性值在一定时间区间内平滑过渡，可在元素被点击，hover，做焦点，或对元素做任何改变时触发。例如hover时，可从一种颜色平滑过渡到另一种颜色。一.写法例如,下面的div原来的宽度是100px, 在hover的时候将其宽度width，在1s内，匀速变为200px，等待2s再变化 div{width:100px;height:10
2015-08-28 11:50:54
989
原创 css3的新增属性transform
css3中可运用transform属性来实现让文字或图像显示出：旋转rotate,缩放scale,倾斜skew,移动translate 这些效果。1. 旋转rotate -ms-transform: rotate(30deg) ; -moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-trans
2015-08-27 21:55:48
943
原创 css3用图片作边框
css3用图片作边框使用 border-image属性，兼容写法： -webkit-border-image:url(img/border.png) 30px 30px 30px 30px round或stretch ; -moz-border-image:url(img/border.png) 30px 30px 30px 30px ro
2015-08-27 19:07:45
2250
原创 css3新增背景属性background-clip/background-origin/background-size
1. background-clip属性 指定背景从元素何处开始显示 值有：border-box(默认) 背景显示到border padding-box 背景显示到padding content-box 背景仅显示到内容，padding和border部分都不显示背景 兼容写法（先写老写法再写新写
2015-08-27 18:30:12
1398
转载 CSS3手机浏览器兼容情况
对手机浏览器进行css3支持程度测试的网址： http://css3test.com对手机浏览器进行html5支持程度测试的网址： http://html5test.com CSS3手机浏览器兼容情况见下图：√：完全支持 √：部分支持 ×：不支持 (-webkit)：添加-webkit前缀才支持 (-ms)：添加 -ms前缀才支持=====
2015-08-27 14:48:12
2791
原创 文字超出时省略 显示...
样式：div{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
2015-08-26 21:05:45
668
原创 在浏览器上使用服务器字体文件的字体
1.在浏览器上使用服务器字体文件的特殊字体用法 @font-face{ font-famliy : webfont; /*这里必须写作 webfont，表示服务器字体*/ src : url('font/字体文件1.otf') format("open type") }@font-face{ font-famliy : webfon
2015-08-26 20:00:14
3283
原创 css3的文字阴影和换行
1.文字阴影 text-shadow:阴影比文字右移的px,阴影比文字下移的px,阴影的模糊半径px,阴影的颜色 用法： h1{ text-shadow:10px 10px 5px red }2. word-break 段落换行方式 值：word-break:normal 默认，使用浏览器默认换行方式 word-break:keep-all
2015-08-26 19:47:07
710
原创 css3的选择器
一.css3新增属性选择器 1. [att*=val] 某元素的attr属性的值包含val指定的字符串 2. [att^=val] 某元素的attr属性的值的开头字符串为val指定的字符串 3. [att$=val] 某元素的attr属性的值的结尾字符串为val指定的字符串二.css3的结构性伪类选择器 1. a:link 未被访问的链接
2015-08-26 19:35:28
500
原创 Html5拖放小例
HTML5拖放把img拖放到其上的div中 /*div容器*/ #cun{ width: 540px; height: 320px; border:2px solid #d2d2d2; box-shadow: 1px 4px 8px #646464;
2015-08-25 17:57:48
540
原创 Html5画布canvas小例
小例中用到了画布canvas的画矩形，画圆或弧，画线，画文字。下例的全部颜色 字体 图形都是通过js在canvas上绘制形成。1.效果图：2.代码： canvas画线 function draw(id){ var canvas=document.getElementById(id); var cont
2015-08-25 17:15:54
933
原创 Html5的两个本地存储对象sessionStorage和localStorage
1. sessionStorage存储数据的生命周期到该网页（强调是网页）关闭，关闭该网页后数据消失 （刷新该网页数据还在，但是一旦关闭该网页，sessionStorage存储的数据立刻消失）2. localStorage存储数据的生命周期无限长，甚至好几月好几年，只要不清除浏览器缓存就一直存在都有的属性：sessionStorage.length 指示该本地存储对象中有多少
2015-08-24 20:17:30
1031
原创 Html5的多媒体元素：audio video
工具：想让一个视频能被更多的浏览器支持播放，可使用 “ HTML5视屏转换工具 ”, 如 “ Easy HTML5 Video 2.8 ”工具，该工具可将视频文件转换为多种格式，供不同浏览器播放。1. 音频播放元素 audioIE的IE9及以上版本和其它主流版本浏览器都支持audio元素属性preload指定是否自动缓冲该音频： proload: none(不
2015-08-24 19:47:54
1173
原创 Html5的列表元素：ol dl
1.有序列表ol主流浏览器均支持ol标签。在 HTML 4.01 中不赞成使用 "start" 和 "type" 属性，但在 HTML5 中支持。"reversed" 属性是 HTML5 中的新属性。type可选值：1 a A i I 示例： 标题 标题 标题 红色 绿色 蓝色 网
2015-08-24 19:13:48
1022
原创 Html5新增小元素：figure与figurecaption address progress meter mark details与summary
HMTL5和CSS3在各浏览器上的具体支持情况查询网址：http://caniuse.com/测试一个浏览器的HTML5的支持程度网址：http://html5test.com/1.figure与figurecaption 流内容含义： 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。请
2015-08-24 18:56:34
1394
原创 Html5新增语义结构元素：article section aside nav header hgroup footer time
1.一个使用如上新增元素的简单html页例子： Html5新增语义结构元素：article section aside nav header hgroup footer time :root{ min-width: 1000px; } ul{ margin-left:
2015-08-24 17:36:14
2454
原创 js汉字转拼音的方法
//调用 ConvertPinyin("你好啊") 返回拼音function ConvertPinyin(l1) { var l2 = l1.length; var I1 = ""; var reg = new RegExp('[a-zA-Z0-9\- ]'); for (var i = 0; i var val = l1.subst
2015-08-24 16:26:09
4234
原创 js从url中获取参数
//从URL中获取get参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return u
2015-08-24 16:19:42
571
原创 js上一页/下一页真分页的页码生成
//传入“当前页码 每页容量 数据总条数”//返回按钮上的文本内容，如：pageBtns(2,10,75) 返回："上一页,1,2,3,4,...,8,下一页" 以逗号分隔的字符串 function pageBtns(currentPageIndex,currentPageSize,dataCount){ var cpIndex=parseInt(
2015-08-24 16:17:06
3666
原创 js去掉字符串中所有的html标记
//去掉字符串中所有的html标记function delHtmlTag(str){ return str.replace(/]+>/g,"");}
2015-08-24 16:05:56
637
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人