jQuery回调函数
摘要:$("p").html(function(index,oldText){ return oldText+"new text"; }); 这里的index为索引值,因为使用回调函数的那个对象,可能是一个对象列表中的一个,比如$("li"),这里就可能得到多个li,index代表当前这个li的索引值;
阅读全文
HTML5音频
摘要:audio和video基本一致,都可以包含source标签;只是audio本身没有width和height值;如果设置了controls属性。则可以设置控件的width,而控件的height无法设置,如果设置了height值,只会改变控件位置,而不会改变其高度;
阅读全文
HTML5视频
摘要:video元素可以实现视频播放; src / autoplay / controls / height / width / poster / loop / muted / preload; src: //值为资源url地址; //如果有不同格式的视频,可以在video中嵌套source标签来设置多个
阅读全文
CSS3用户界面
摘要:CSS3中关于用户界面的几个属性可以帮助我们实现更方便的人机交互和控制; resize / box-sizing / outline-offset; resize: //本属性使用户可以直接通过鼠标拖拽来改变元素尺寸,需要配合overflow一起使用; none / both / horizonta
阅读全文
CSS3多列column
摘要:CSS3提供的多列帮我们很轻松的实现了文本内容分栏的功能;目前主流浏览器支持性比较好的有一下几个属性: column-count: //列数; column-gap: //列间距; column-rule: //列之间的分割符号,其值类似于边框设置; column-rule-width / colu
阅读全文
CSS3 动画 @keyframes
摘要:CSS3提供了强大的动画功能能,利用@keyframes可以很方便的制作关键帧动画; 简单来说,@keyframes就是通过from和to或者百分比值来在一段时间上打下关键帧(关键时间点),然后针对这些关键帧设定此时要实现的样式,然后计算机自动计算并完成其他非关键帧的插补; 动画的整体实现是通过an
阅读全文
CSS3 过渡
摘要:过渡是最简单的动画,因为只能控制开始和结束时间(延时delay和时长duration),所以只能展示一套组合拳; transition //property和duration一般为必填项,后两个默认为ease和0; transition-property / transition-duration
阅读全文
CSS3 3D转换
摘要:相对于2D转换,3D增加了一个纬度,也让很多东西理解起来要费劲一点儿。 transform / transform-origin / transform-style / perspective / perspective-origin / backface-visibility transform:
阅读全文
CSS3 2D转换
摘要:CSS3提供了2D和3D转换的方法,为元素实现多种变化,2D方法如下: transform-origin: //该属性用来改变变换的参考点位置,默认参考点为元素左上角; transform: translate() / scale() / rotate() / skew(); translate(n
阅读全文
@font-face
摘要:CSS3中的@font-face功能可以让我们拜托用户终端对字体的限制,因为我们可以用该属性来我们存放于服务器中的相关字体下载到用户终端; 通常,我们需要设置两个值,一个是font-family,即给字体命名;另一个是URL,即字体存放的位置; 目前,主流浏览器支持两种字体格式,ttf和otf; 实
阅读全文
CSS3 文本样式
摘要:text-overflow: clip / ellipsis / string; clip: 超出部分切除; ellipsis: 超出部分用省略号代替; string: 超出部分用指定的字符串代替;只在火狐浏览器中有效,其他浏览器无效; text-shadow h-shadow v-shadow b
阅读全文
CSS3 边框
摘要:border-image: border-image-source / border=image-slice / border=image-width / border-image-outside / border-image-repeat; 如果没有设置border-width,则该属性无效; b
阅读全文
CSS 媒介@media
摘要:CSS中@media用于指定在不同类型的设备上,元素显示的不同样式; all // 用于所有设备 aural // 语音和音频合成器 braille // 盲人用用点字法触觉反馈设备 embossed // 分页的盲人用点字法打印机 handheld // 手持设备 print // 打印机 pro
阅读全文
CSS before和after的用法
摘要:1.添加内容 2.清除浮动 3.添加小三角 这个比较有趣,利用边框的绘制原理可以用CSS绘制出一个三角形,具体如下: 首先,创建一个block对象,让其宽和高都为0; 然后添加一个border,颜色填transparent(透明); 然后添加任意一边的边框,比如border-left,并赋予颜色;
阅读全文
CSS选择器
摘要:元素、类、id、属性、后代、子元素、相邻兄弟、伪类、伪元素; 元素选择器: 即使用元素名称,如p,h1,div等等; 类选择器: . .aaa可以选取class=“aaa”的所有元素; id选择器: # #a可以选择id=“a”的元素; 属性选择器: [] [attr]可以选择含有属性attr的所有
阅读全文
轮廓样式
摘要:轮廓outline位于border外围,祈祷突出元素的作用; outline-color 同border outline-style 同border outline-width 同border
阅读全文
列表样式
摘要:list-style-image: url / none; list-style-position: inside / outside; list-style-type: none disc 实心圆(默认值); circle 空心圆 square 实心方块 decimal 数字 decimal-le
阅读全文
a样式
摘要:基本的文本样式这里不做讨论 锚伪类: a:link 链接访问之前 a:visited 连接访问之后 a:hover 鼠标悬停 a:active 鼠标点击时
阅读全文
font样式
摘要:fong-family 制定字体; 通用字体:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"; font-size xx-small / x-small / small / medium / large / x-large / xx-larg
阅读全文
框架
摘要:frameset //框架标签; rows="30%,70%" //上下分布的框架,默认上下比例为3比7; cols="40%,60%" //左右分布的框架,默认左右比例为4比6; noresize="noresize" //用户不可手动调整框架比例; frameset可以嵌套,实现复杂的框架模式;
阅读全文