js - 随笔分类 - charling

摘要：块间独立，变量与方法共享每个script块之间不会相互影响，某个script块出错，不会影响其它块的运行块之间定义的非局部变量和方法可以共享，（其实只是共享了全局变量和方法）1 6 阅读全文

posted @ 2014-04-17 09:52 charling 阅读(322) 评论(0) 推荐(0) 编辑

posted @ 2014-04-16 09:18 charling 阅读(1225) 评论(0) 推荐(0) 编辑

摘要：标签自带的上传按钮是无法改变样式，如果不需要显示上传按钮的路径，可以做如下处理：1、设置input的font-size大小为想要的大小；2、设置input的透明度为0；3、为其父元素定义样式；4、DEMO：另外一种方法是：1、单独样式和上传文件的input（将input隐藏到页面之外，或者... 阅读全文

posted @ 2014-04-15 19:15 charling 阅读(3440) 评论(0) 推荐(0) 编辑

css3彩色进度条

摘要：progress 0 阅读全文

posted @ 2014-04-14 08:57 charling 阅读(473) 评论(0) 推荐(0) 编辑

便签效果

摘要：note A: recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend! A: recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend! A: recommend! recommend! recommend! recommend... 阅读全文

posted @ 2014-04-11 09:17 charling 阅读(269) 评论(0) 推荐(0) 编辑

使用before、after伪类制作三角形

摘要：使用before、after伪类实现三角形的制作，不需要再为三角形增加不必要的DOM元素，影响阅读。阅读全文

posted @ 2014-04-10 09:08 charling 阅读(4855) 评论(0) 推荐(0) 编辑

css3实现进度条的模拟

摘要：两种进度条动画的实现： 1、css3，但IE9-不支持。 2、js动画，兼容性好，但没有css3实现的顺畅Demo： progress 阅读全文

posted @ 2014-04-04 09:14 charling 阅读(1296) 评论(1) 推荐(0) 编辑

css3整理--filter

摘要：只在chrome的少数版本的浏览器中有实现，兼容性差，不适宜应用。filter语法： elm { filter: none | [ ]* } 取值说明： filter-function：有以下值可选 grayscale灰度 sepia褐色（求专业指点翻译） saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur模糊drop-shadow阴影阅读全文

posted @ 2014-04-02 08:35 charling 阅读(831) 评论(0) 推荐(0) 编辑

css3整理--clip

摘要：clip语法： .selector { clip: rect | auto | inherit } 注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用取值： rect：通过设置四个点来进行裁切，语法下面介绍 auto：默认，和不进行裁切的效果一致 inherit：继承父元素的裁切属性 clip: rect(, , , ); 通过设置距离上下左右的边缘的大小来进行裁切。但是需要注意的是：top和bottom都是从上边缘开始计算，right和left都是从左边缘开始计算（同pad... 阅读全文

posted @ 2014-04-01 09:43 charling 阅读(1163) 评论(0) 推荐(0) 编辑

css3整理--::selection

摘要：::selection作用：当使用鼠标选择文本时，改版被选中文本的背景色和前景色。（默认情况下，window中背景色是深蓝色，前景色是白色。）::selection语法： /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值； color:颜色值； } /*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值； color:颜色值； } 注意：::selection只能设置background和color两个属性，而不能改变其它属性，如... 阅读全文

posted @ 2014-04-01 09:22 charling 阅读(319) 评论(0) 推荐(0) 编辑

css3整理--calc()

摘要：calc()语法： elem{ width：calc( 50% -2px ); } 取值说明： calc是计算的缩写，上句含义是：计算elem父元素的50%再减2px，并将结果赋值给elem的width属性calc()能做什么： calc()可以通过动态的计算来得到元素的宽度或者高度。例如：width:calc(50% - 2px)。当为元素设置了2px的边框时，通过这样的计算就可以避免因超出而折行。可以使用 + - * / 等运算符来进行计算注意：表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是... 阅读全文

posted @ 2014-04-01 09:13 charling 阅读(375) 评论(0) 推荐(0) 编辑

css3整理--media

摘要：media语法：上面的media语句表示的是：当屏幕宽度小于或等于600px,调用small.css样式表来渲染Web页面。含义： screen：指的是一种媒体类型；还可以选择all、print、TV等。 and：关键词，与其相似的还有not,only。 max-width: 600px：媒体特征，指当媒体小于600px时调用该样式引入方法： 1、link引入： 2、@import引入 @import url("css/reset.css") screen; 3、@media引入： @media screen{ 选择器{ 属性：属性值； ... 阅读全文

posted @ 2014-04-01 08:47 charling 阅读(183) 评论(0) 推荐(0) 编辑

css3整理--box-sizing

摘要：box-sizing语法： box-sizing ： content-box || border-box || inherit 参数取值： content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 border-box:此值让元素维持IE传统的Box Mod... 阅读全文

posted @ 2014-03-31 08:59 charling 阅读(1644) 评论(0) 推荐(0) 编辑

css3整理--background-image

摘要：background-image语法： background-image: url1,url2,...,urlN; 通过“，”分隔N张背景图片，background的所有其它属性需要配合该属性进行设置，如下： background-repeat: repeat1,repeat2,...,repeatN; background-position: position1,position2,...,positionN; background-size: size1,size2,...,sizeN; backrgound-attachment: attachment1,attachment... 阅读全文

posted @ 2014-03-31 08:49 charling 阅读(1299) 评论(0) 推荐(0) 编辑

css3整理--background-origin

摘要：background-origin语法： background-origin: padding-box || border-box || content-box 参数取值： padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片； border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片； content-box(content):此值决定background... 阅读全文

posted @ 2014-03-28 09:18 charling 阅读(196) 评论(0) 推荐(0) 编辑

css3整理--background-clip

摘要：background-clip语法： background-clip ： border-box || padding-box || content-box 参数取值： border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉； padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉； context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；阅读全文

posted @ 2014-03-28 09:15 charling 阅读(176) 评论(0) 推荐(0) 编辑

css3整理--background-size

摘要：background-size语法： /*Ｍozilla*/ -moz-background-size: auto || || || cover || contain /*Webkit*/ -webkit-background-size: auto || || || cover || contain /*Presto*/ -o-background-size: auto || || || cover || contain /*W3c标准*/ background-size: auto || || || cover || contain 参数： auto：默认值... 阅读全文

posted @ 2014-03-28 09:08 charling 阅读(379) 评论(0) 推荐(0) 编辑

css3整理--Animation

摘要：animation语法： 1、动画的定义 @keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部写成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% ... 阅读全文

posted @ 2014-03-27 09:20 charling 阅读(192) 评论(0) 推荐(0) 编辑

css3整理--transition

摘要：transition语法： transition ： [ || || || [, [ || || || ]]* 第一个参数：transition-property，执行变换的属性（当属性发生变化时，不直接进行变化，而是以动画的形式逐渐变化）取值包括： none：没有属性变化 all：（默认值）所有属性都变化 indent：指定的属性第二个参数：transition-duration，执行变换需要的时间取值： 0... 阅读全文

posted @ 2014-03-26 09:24 charling 阅读(257) 评论(0) 推荐(0) 编辑

css3整理--transform

摘要：transform语法： transform ： none | [ ]* none为默认值，表示不进行变换 n个transform-function表示进行n种不同的变换。包括：rotate | scale | skew | translate |matrix;（每种变换中间用逗号分开） transform:rotate(30deg) // 沿中心顺时针旋转30度 transform:translate(100px,20px) // 沿X轴向右移动100px，沿Y轴向下移动20px，同transform:translateX(100px)；transform:trans... 阅读全文

posted @ 2014-03-25 08:55 charling 阅读(190) 评论(0) 推荐(0) 编辑

随笔分类 - js

公告