11 2016 档案
iconMoon---小图标小记
摘要:IcoMoon 是一个免费的图标库。可以下载自己需要的图标 三、使用流程、操作演示 进入主页,点击下图所示区域开始: 每个图标你都是可以自己进行标记的(移上去会看到Edit, 点击之),然后—— 注:编辑框下面的Download会下载该图标svg格式的zip文件, Replace按钮则是上面新生成一 阅读全文
posted @ 2016-11-30 16:26 半夏微澜ぺ 阅读(2676) 评论(0) 推荐(0) 编辑
threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
摘要:最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider 2015-01-06 verison 2.0.5 */ /* http://github.com/v 阅读全文
posted @ 2016-11-30 11:49 半夏微澜ぺ 阅读(3092) 评论(1) 推荐(0) 编辑
@font-face 用fontsquirrel把ttf文件获取别的文件格式
摘要:@font-face是css3的一个模块,但是@font-face这个功能早在IE4就支持了,他主要是把自己定义的Web字体嵌入到你的网页中, 兼容浏览器 取值说明 1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font 阅读全文
posted @ 2016-11-28 16:23 半夏微澜ぺ 阅读(405) 评论(0) 推荐(0) 编辑
伪元素 first-letter
摘要:::after, ::before, ::backdrop, ::first-letter,::first-line, ::selection(css3)是伪元素, :active, :focus, :checked等等被称为伪类 要想::first-letter(:first-letter)伪元素 阅读全文
posted @ 2016-11-25 18:04 半夏微澜ぺ 阅读(385) 评论(0) 推荐(0) 编辑
html语义化 -------<fieldset>和<legend>
摘要:为什么HTML代码要语义化,除了代码可读性好以外,SEO有帮助外,最主要的还是对一些屏幕阅读设备或者其他辅助阅读设备友好, 可以让用户在条件受限的条件下依然可以正常使用我们的产品,比方说鼠标坏了,又或者说视力有障碍的用户等等。 fieldset,legend元素在CSS布局中的应用 效果如下(实时) 阅读全文
posted @ 2016-11-25 16:35 半夏微澜ぺ 阅读(1592) 评论(0) 推荐(0) 编辑
实现文字字数不等对其
摘要:&nbsp;:空格 占据宽度受字体的影响 &ensp;透明;占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。 &emsp;透明;占据的宽度正好是1个中文宽度,而且基本上不受字体影响。 中文字符: 中文都是等宽的,因此可以使用&ensp; 和&emsp; 实现两个 三个 四个字符的对齐(还可 阅读全文
posted @ 2016-11-25 16:13 半夏微澜ぺ 阅读(241) 评论(0) 推荐(0) 编辑
手机与浏览器
摘要:iPhone默认浏览器为Safari;Android默认浏览器webkit内核;诺基亚Symbian S60智能机默认浏览器为OSS(OpenSourceSoftware)浏览器;诺基亚window phone7手机浏览器默认是IE9浏览器。 以上所有手机都可以安装最新的手机Opera浏览器。Chr 阅读全文
posted @ 2016-11-25 10:28 半夏微澜ぺ 阅读(194) 评论(0) 推荐(0) 编辑
基于active状态类名的web交互开发
摘要:demo: 默认是这样的: 当我们点击更多按钮后,会以CSS3动画的方式展开剩余所有文字信息,如下动图: 下面我们看下关键的CSS代码,这个.active是如何自身无样式的: 可以看到,当我们点击按钮后,盒子变高,以及更多元素隐藏,全部都是通过和.active发生关系后发生的,而不是.active自 阅读全文
posted @ 2016-11-23 18:09 半夏微澜ぺ 阅读(637) 评论(0) 推荐(0) 编辑
实现文字下划线 ---模拟text-decoration
摘要:css 的text-decoration可以实现文字下方的下划线,但是距离文字比较近,不是很好看,我们可以使用border-bottom来模拟这个效果 (inline元素虽然不可以设置margin-top和margin-bottom,但是可以设置padding值和border) 设置border时, 阅读全文
posted @ 2016-11-23 17:16 半夏微澜ぺ 阅读(526) 评论(0) 推荐(0) 编辑
relative和absolute
摘要:relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能,不同之处在于:absolute属性以天空或其他外界限制计算瞬移位置;而relative属性由于是凡人肉体,偏移能力有限,只能通过自身所在位置计算瞬移位置。 且relative属性的这种瞬间移动之际实际上是一种障眼法,其真身 阅读全文
posted @ 2016-11-23 14:14 半夏微澜ぺ 阅读(633) 评论(0) 推荐(0) 编辑
absolute属性与IE6/IE7之间的误会
摘要:三、absolute属性与IE6/IE7之间的误会 absolute属性确实存在不少兼容性的问题,首先absolute属性定位相关(left/top)的些bug(例如IE6的奇偶bug)这里不予以讨论。//zxx:很多人都知道,再说就没意思了。 所以,下面所展示的些“误会”都是没有定位属性的(即无l 阅读全文
posted @ 2016-11-22 18:01 半夏微澜ぺ 阅读(477) 评论(0) 推荐(0) 编辑
实现左右等高布局
摘要:1 margin-bottom:3000px; padding-bottom:3000px; 此例关键是给每个框设置大的底部内边距,然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素,如果把外包容器的overflow属性设为hidden,列就在最高点被裁切。 效果图: 2 displa 阅读全文
posted @ 2016-11-22 17:57 半夏微澜ぺ 阅读(585) 评论(0) 推荐(0) 编辑
absolute 和float
摘要:position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元 阅读全文
posted @ 2016-11-22 16:37 半夏微澜ぺ 阅读(1868) 评论(0) 推荐(0) 编辑
margin和padidng的使用
摘要:何时应当使用margin:需要在border外侧添加空白时。空白处不需要背景(色)时。上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。 何时应当时用padding:需要在border内测添加空白时。空白处需要背景(色)时。上下相连的两个盒子 阅读全文
posted @ 2016-11-22 11:09 半夏微澜ぺ 阅读(287) 评论(0) 推荐(0) 编辑
margin---bug
摘要:常见的浏览器下margin出现的bug IE6中双边距Bug:发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。解决方法:是给浮动元素加上display:inline;CSS属性;或者 阅读全文
posted @ 2016-11-22 10:59 半夏微澜ぺ 阅读(198) 评论(0) 推荐(0) 编辑
margin-负值
摘要:总结:margin负值的影响: 当元素(块级元素)没有设置宽度时:margin负值会增加元素的宽度,当设置宽度时,margin负值只会影响元素的位置。 就是负的边距好像能减小元素在文档流中的尺寸一样,但事实上,它的尺寸大小并没变,只是文档流在计算元素位置的时候,会 认为负边距把元素的尺寸减小了,因为 阅读全文
posted @ 2016-11-22 10:36 半夏微澜ぺ 阅读(492) 评论(0) 推荐(0) 编辑
margin-----总结----解析逻辑
摘要:margin的解析逻辑 在 margin 中 top、right、bottom、left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和bottom 的参考线属于另一类。 那他们到底各以什么为参考线呢?top 以 containing block 阅读全文
posted @ 2016-11-22 09:54 半夏微澜ぺ 阅读(173) 评论(0) 推荐(0) 编辑
margin -------总结(block inline 可置换元素)
摘要:margin在块元素、内联元素中的区别 block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准 阅读全文
posted @ 2016-11-21 18:33 半夏微澜ぺ 阅读(267) 评论(0) 推荐(0) 编辑
Math对象
摘要:Math对象没有构造函数,是一个固有的对象,这是它与Date,String对象的区别 Math的相关函数全部为静态函数,应该直接调用 Math三角函数与属性 Math四舍五入类函数 Math随机数函数 Math最大最小类函数 Math.max() max函数参数 a,b,...,x,y -- 为nu 阅读全文
posted @ 2016-11-21 11:12 半夏微澜ぺ 阅读(154) 评论(0) 推荐(0) 编辑
Date对象
摘要:Date对象具有多种构造函数: milliseconds - 距离JavaScript内部定义的起始时间1970年1月1日的毫秒数 datestring - 字符串代表的日期与时间。此字符串可以使用Date.parse()转换 year - 四位数的年份,如果取值为0-99,则在其之上加上1900 阅读全文
posted @ 2016-11-21 10:52 半夏微澜ぺ 阅读(148) 评论(0) 推荐(0) 编辑
javascript break 和continue
摘要:break语句还可以跳出循环,也就是结束循环语句的执行。 continue语句的作用为结束本次循环,接着进行下一次是否执行循环的判断。 continue与break的区别是:break是彻底结束循环,而continue是结束本次循环 阅读全文
posted @ 2016-11-18 17:24 半夏微澜ぺ 阅读(149) 评论(0) 推荐(0) 编辑
javascript switch..... case
摘要:1 当"表达式"的值与某个case后面的常量相等时,就执行常量后面所执行的语句,之后跳出switch分支选择语句,当所有的case后面的常量都不符合"表达式"时,执行default后面的语句n。 2 case后面一定要是常量(就是一个不可变的量)! 3 当条件的分支很多时(通常超过六个)使用swit 阅读全文
posted @ 2016-11-18 15:41 半夏微澜ぺ 阅读(233) 评论(0) 推荐(0) 编辑
javascript ==等于与===恒等于
摘要:==判断是否等于,只判断数值 代表恒等于,不仅判断数值,而且判断类型 阅读全文
posted @ 2016-11-18 15:27 半夏微澜ぺ 阅读(341) 评论(0) 推荐(0) 编辑
javascript 布尔类型
摘要:true和false 表达式为false的情况 1 false 2 NaN 3 0 4 字符串的空 " " 5 null 6 undefined 阅读全文
posted @ 2016-11-18 15:21 半夏微澜ぺ 阅读(255) 评论(0) 推荐(0) 编辑
javaScript 基本知识点总结
摘要:1 javaScript 简介 JavaScript最初起源于LiveScript语言,当互联网开始流行时,越来越多的网站开始使用HTML表单与用户交互,然而表单交互却成了制约网络发展的重大瓶颈(用户总是痛苦的等待数据传送到服务器端检测, 并传回是否正确,仅仅的表单检测,就产生了多次客户端与服务器端 阅读全文
posted @ 2016-11-18 11:35 半夏微澜ぺ 阅读(455) 评论(0) 推荐(0) 编辑
window.scrollTo和window.scrollBy
摘要:scrollTo-- 在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置(如果没有滚动条,页面不会发生任何变化) scrollTo,中文"滚动到" 引用网址:http://www.dreamdu.com/javascript/wi 阅读全文
posted @ 2016-11-18 10:53 半夏微澜ぺ 阅读(1607) 评论(0) 推荐(0) 编辑
background-clip与background-origin
摘要:规定背景的绘制区域 浏览器支持 IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。 注释:Internet Explorer 8 以及更早的版本不支持 background-clip 属性。IE9+、Firefox、Opera、Chr 阅读全文
posted @ 2016-11-17 18:07 半夏微澜ぺ 阅读(266) 评论(0) 推荐(0) 编辑
page-break-before和page-break-after
摘要:page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。 每个打印属性都可以设定4种设定值:auto、always、left和right。 其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page b 阅读全文
posted @ 2016-11-17 17:02 半夏微澜ぺ 阅读(546) 评论(0) 推荐(0) 编辑
CSS counter计数器(content目录序号自动递增)详解
摘要:一、CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的。于是,就有了,“计数器↔伪元素↔content属性”的铁三角关系。 二、CSS计数器成员 举例班级中成员依次报名 其中有这么几个关键点:1. 班级命 阅读全文
posted @ 2016-11-17 15:58 半夏微澜ぺ 阅读(6782) 评论(1) 推荐(1) 编辑
移动端网页巧用 margin和padding 的百分比实现自适应
摘要:一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! W3C的规范: ((absolute relative)定位中 left/ 阅读全文
posted @ 2016-11-17 10:48 半夏微澜ぺ 阅读(1219) 评论(0) 推荐(0) 编辑
监听屏幕旋转事件window. onorientationchange
摘要:// 判断屏幕是否旋转 function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.heig... 阅读全文
posted @ 2016-11-16 16:48 半夏微澜ぺ 阅读(1802) 评论(0) 推荐(0) 编辑
apple-touch-startup-image 制作iphone web应用程序的启动画面
摘要:为ipad制作web应用程序的启动画面时发现个问题,只能显示竖屏图,横屏图出不来,如下: 首先页面头部里要加入(这个是APP启动画面图片,如果不设置,启动画面就是白屏,图片像素就是手机全屏的像素) 重点在下面: 两张图片必须符合宽高标准才能正常显示: startup_portrait.png 768 阅读全文
posted @ 2016-11-16 10:28 半夏微澜ぺ 阅读(2247) 评论(0) 推荐(0) 编辑
当把链接保存到手机桌面。设置图标 只在safari浏览器中有用
摘要:这个属性是当用户把连接保存到手机桌面时使用的图标,如果不设置,则会用网页的截图。有了这,就可以让你的网页像APP一样存在手机里了 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。 apple-touch-icon是IOS设备的私有标签,如果设置了相应 阅读全文
posted @ 2016-11-16 10:22 半夏微澜ぺ 阅读(3882) 评论(0) 推荐(0) 编辑
-webkit-tap-highlight-color
摘要:表单元素(input, textarea, button, a)在手机中点击时会出现边框: webkit浏览器 单击事件 高亮 颜色 该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见(-webkit-t 阅读全文
posted @ 2016-11-16 10:13 半夏微澜ぺ 阅读(297) 评论(0) 推荐(0) 编辑
iphone 在设置了initial-scale=1 之后,在设置滚动条之后,没有滑动效果的解决办法
摘要:iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了。 关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。 iphone 的safari 浏览器实际上从一 阅读全文
posted @ 2016-11-16 10:00 半夏微澜ぺ 阅读(1824) 评论(0) 推荐(0) 编辑
移动web开发-------meta
摘要:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。 其中:width – viewport的宽度height – viewport的高度initial-s 阅读全文
posted @ 2016-11-16 09:56 半夏微澜ぺ 阅读(124) 评论(0) 推荐(0) 编辑
font-family
摘要:对于网站字体设置: 移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self; pc端(含Mac)项目:font-family:Taho 阅读全文
posted @ 2016-11-15 17:17 半夏微澜ぺ 阅读(582) 评论(0) 推荐(0) 编辑
移动web开发------公用css----自己总结
摘要:@charset "utf-8"; html, body { background: #fff; color: #505050; font-size: 10px; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: non... 阅读全文
posted @ 2016-11-15 17:13 半夏微澜ぺ 阅读(218) 评论(0) 推荐(0) 编辑
-webkit-text-size-adjust 处理设置字体<12px
摘要:-webkit-text-size-adjust 1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;} 2、-webkit-text-size-adjust放在body上会导 阅读全文
posted @ 2016-11-15 17:05 半夏微澜ぺ 阅读(246) 评论(0) 推荐(0) 编辑
定义元素透明度--兼容处理
摘要:filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version*/ -khtml-opacity: 0.5; /* Sarfari old version */ opacity: 0.5; /* FireFox */ 阅读全文
posted @ 2016-11-15 17:02 半夏微澜ぺ 阅读(121) 评论(0) 推荐(0) 编辑
当你触摸并按住触摸目标时候,禁止系统默认菜单-webkit-touch-call
摘要:当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。 -webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的 阅读全文
posted @ 2016-11-15 17:00 半夏微澜ぺ 阅读(613) 评论(0) 推荐(0) 编辑
禁用选择文本功能user-select
摘要:有时候,我们为了用户体验,需要禁用选择文本功能。 这需要用到一个CSS属性:user-select,user-select的文档点这里 user-select有两个值:none:用户不能选择文本text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支 阅读全文
posted @ 2016-11-15 16:57 半夏微澜ぺ 阅读(431) 评论(0) 推荐(0) 编辑
实现列表两端完全对其text-aligh:justify 和display:inline-block
摘要:dispaly:inline-block 对于块级元素,在IE8-下是不兼容的,所以一般不要用在这些元素上,可以用在inline元素上:span text-align:justify实现子元素完全对齐父元素的两端,这样就可以根本无需计算每个列表元素间的margin间距,更不用去修改父容器的宽度。 d 阅读全文
posted @ 2016-11-11 11:42 半夏微澜ぺ 阅读(792) 评论(0) 推荐(0) 编辑
Bootstrap 网格系统的工作原理
摘要:网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的: 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。 使用行来创建列的水平组。 内容应该放置在列内,且唯有列可以是行的直接子元 阅读全文
posted @ 2016-11-09 14:46 半夏微澜ぺ 阅读(590) 评论(0) 推荐(0) 编辑
bootstrap-Glyphicons 字体图标
摘要:使用的方法: 1 引入 font-awesome.css文件 2 fonts文件夹 Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内(可以在font-awesome.css修改fonts的路径) 3 通过class 使用图标字体 例如: <span class="gly 阅读全文
posted @ 2016-11-07 14:55 半夏微澜ぺ 阅读(428) 评论(0) 推荐(0) 编辑
nodejs supvisor模块
摘要:在测试nodejs程序的时候,每次都需要在控制台编译,非常的麻烦。supervisor是一款无需重复手动编译,自动后台监听文件变化来自动编译,并且不需要在项目内require,使用非常的方便。 使用方法:express 项目名称 全局安装supervisor: cnpm install -g sup 阅读全文
posted @ 2016-11-04 14:15 半夏微澜ぺ 阅读(225) 评论(0) 推荐(0) 编辑
express
摘要:express 是web开发的必备,类似java的ssh框架 express是基于nodejs以及依附其他模块的一个比较完整的web开发框架 安装express npm install express 全局安装:npm install express -g 查看版本:express -version 阅读全文
posted @ 2016-11-04 11:10 半夏微澜ぺ 阅读(150) 评论(0) 推荐(0) 编辑