|
摘要：
一、颜色相关的样式 1.1 对rgb增添了alpha通道:R(红色)，G(绿色)，B(蓝色)，A(透明值0.0-1.0).box{ width:100px; height:400px; background-color:rgb(222,230,120); /*background-color:rgba(222,230,120,0.5);*/} 1.2 使用hsla颜色:H(色调),S(饱和度),L(亮度),A(透明度) 色调：0/360红色，120绿色，240蓝色，当取值大于360时，取除以360的余数 饱和度和亮度：0%-100%表示 透明度：0... 阅读全文
posted @ 2013-05-20 14:37 Amy-lover 阅读(296) 评论(0) 推荐(0) 编辑
摘要：
1.MediaQueries模块允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式，即在不改变内容的情况下在样式中选择一种页面的布局以精确的适应不同的设备，从而改善用户体验2.@media 设备类型 and (设备特性) {样式代码}设备类型：设备类型的值对应的设备类型all所有设备screen电脑显示器print打印用纸或打印预览handhelp便携设备tv电视机类型的设备speech语音和音频合成器braille盲人用点字法触觉回馈设备embossed盲文打印机projection各种投影设备tty使用固定密度字母栅格的媒介，例如电传打字机和终端设备特性：特性可 阅读全文
posted @ 2013-05-20 11:31 Amy-lover 阅读(208) 评论(0) 推荐(0) 编辑
摘要：
一、使用多栏布局方式column-count 1.1 可以将一个元素中的内容分为多栏显示，并且确保各栏中内容的底部对齐，各栏的宽度都是相等的，栏与栏之间的宽度也是相等的，但是不能指定每栏分别显示什么，比较适合显示文章内容，但不适合安排网页中的各元素div#d01{ -moz-column-count:2; width:200px;/*这个宽度是该div内部多个栏的总宽度*/ background:#FCF; }<div id="d01"> <p>ds dsa da dad a dds</p> </div> 1.2 栏之间的间隔 阅读全文
posted @ 2013-05-20 08:34 Amy-lover 阅读(241) 评论(0) 推荐(0) 编辑
摘要：
一、背景 1.1 指定背景的显示范围 1.1.1 问题 在css2中，背景包括padding+内容，不包括border和margin；在css2.1中，背景包括border+padding+内容 1.1.2解决background-clip:border/padding 如果background-clip:border，那么背景包括border+padding+内容 如果baockground-clip:padding，那么背景只有padding+内容，没有border 1.2 指定背景图像绘制的起点 1.2.1 问题 默认从pad... 阅读全文
posted @ 2013-05-19 18:14 Amy-lover 阅读(302) 评论(0) 推荐(0) 编辑
摘要：
一、盒的基本类型值描述特点none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。1.总是在新行上开始；2.高度，行高以及外边距和内边距都可控制；3.宽度缺省是它的容器的100%，除非设定一个宽度。4.它可以容纳内联元素和其他块元素inline默认。此元素会被显示为内联元素，元素前后没有换行符。1.和其他元素都在一行上；2.高，行高及外边距和内边距不可改变；3.宽度就是它的文字或图片的宽度，不可改变4.内联元素只能容纳文本或者其他内联元素5.margin-top/margin-bottom对内联元素没有多大实际效果，对行高也没有影响，6. margin-left/m 阅读全文
posted @ 2013-05-19 10:39 Amy-lover 阅读(266) 评论(0) 推荐(0) 编辑
摘要：
一、给文字添加阴影 1.1 text-shadow：横方向的length(也可以为负值) 纵方向的length(也可以为负值) 模糊半径length 颜色 如果参数颜色缺省，火狐和opera使用color属性的颜色，safari和chrome不支持该参数的缺省，因此不对阴影进行绘制div{ text-shadow:3px 6px 9px blue;} 1.2 指定多重阴影div{ text-shadow:10px 10px 9px blue, 20px 20px 9px red, 30px 30px 9px gree... 阅读全文
posted @ 2013-05-18 20:26 Amy-lover 阅读(277) 评论(0) 推荐(0) 编辑
摘要：
一、html5中，window.navigation对象新增了geolocation属性该属性有三个方法getCurrentPosition获取用户当前的地理位置信息；watchPosition方法定期自动获取用户当前的地理位置信息；clearWatch方法停止对当前用户的地理位置信息的监视 getCurrentPosition(onSuccess,onError,options)参数onSuccess当获取当前地理信息成功时所执行的回调函数，onError当获取当前地理信息失败时所执行的回调函数，options为一些可选属性的列表navigator.geolocation.getCurren 阅读全文
posted @ 2013-05-18 16:40 Amy-lover 阅读(371) 评论(0) 推荐(0) 编辑
摘要：
一、问题的引出当用户没有与Internet连接，用户就不能利用web应用程序二、解决方案为了让web应用程序在离线状态也能正常工作，引入了本地缓存机制三、原理为了让web应用程序在离线状态也能正常工作，必须将web应用程序锁需要的资源文件放在本地缓存中，当用户离线的时候，利用本地缓存中的资源来使web应用程序正常工作四、本地缓存与网页缓存的区别本地缓存网页缓存服务对象不同针对整个web应用程序针对单个网页缓存内容不同只缓存指定的资源任何网页都有页面缓存安全性可靠的，因为可以控制缓存的内容不可靠的，不知道到底缓存了哪些资源五、浏览器与服务器的交互过程 假设网址为http://amylover网. 阅读全文
posted @ 2013-05-18 14:50 Amy-lover 阅读(221) 评论(0) 推荐(0) 编辑
摘要：
<canvas id="canvas" width="1000" height="1000"></canvas>一、取得canvas元素var canvas=document.getElementById("canvas");二、获取上下文var canvas_context=canvas.getContext('2d');三设置填充样式canvas_context.fillStyle="#ee22ff";四、设置绘制样式canvas_context.st 阅读全文
posted @ 2013-05-16 10:27 Amy-lover 阅读(277) 评论(0) 推荐(0) 编辑
摘要：
一、draggable属性的设置 将想要拖放的元素的draggable属性设置为true，img元素和有href属性的a元素默认是允许拖放的二、与拖放有关的事件事件产生事件的元素描述dragstart被拖放的元素source开始拖放操作drag被拖放的元素source拖放过程中dragenter拖放过程中鼠标经过的元素被拖放元素开始进入本元素范围dragover拖放过程中鼠标经过的元素被拖放元素在本元素范围内移动dragleave拖放过程中鼠标经过的元素被拖放元素离开本元素的范围drop拖放的目的地dest有元素被拖放到本元素中dragend拖放的对象元素拖放操作结束三、DataTransf. 阅读全文
posted @ 2013-05-14 16:28 Amy-lover 阅读(247) 评论(0) 推荐(0) 编辑 |
||
