05 2016 档案

css3 -- 过渡与动画
摘要：1、注意使用前缀 2、属性： transition-property：none/all/属性 3、持续时间： transition-duration：默认值是0，即使是负值，按照0进行处理 4、transition-timing-function：ease(默认值) / linear / ease- 阅读全文
posted @ 2016-05-29 14:27 ^^-^^- 阅读(188) 评论(0) 推荐(0)
css3 -- 2D变换
摘要：1、transform 2、旋转 原始的，转换前的元素会保持它在文档流中的位置，所以后续的所有元素都会受到它的影响，经过变换的元素并不影响页面的布局，但它会位于页面剩余部分之上的一个新层次上，这就意味着这个新的元素可以覆盖后续的元素 3、变换原点 4、平移 经过变换的元素会保留它本身的位置 5、倾斜 阅读全文
posted @ 2016-05-29 14:09 ^^-^^- 阅读(211) 评论(0) 推荐(0)
css3 -- 渐变
摘要：1、Firefox中的线性渐变 2、Webkit中的线性变化 3、Firefox中的放射渐变 其中shape使用一个关键字常量值，可以是circle或ellipse（默认值） 渐变开始点以及结束点，半径距离： inner-center与outer-center inner-radius与outer- 阅读全文
posted @ 2016-05-29 13:56 ^^-^^- 阅读(126) 评论(0) 推荐(0)
css3 -- 颜色与不透明度
摘要：1、opacity： opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点 Firefox Webkit Opera支持，注意IE 2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能 阅读全文
posted @ 2016-05-29 11:39 ^^-^^- 阅读(269) 评论(0) 推荐(0)
css3 -- 背景图处理
摘要：1、多背景图片： 2、背景尺寸 contain -- 图片尽可能的放大，不超过包含元素的高度和宽度 cover -- 图片放大到包含元素的宽度或高度 3、背景剪裁和原点 设置背景开始计算的点 4、图片精灵（背景图剪裁） 5、图片遮罩 阅读全文
posted @ 2016-05-27 00:05 ^^-^^- 阅读(705) 评论(0) 推荐(0)
css3 -- 多列
摘要：1、指定分列： Firefox与webkit实现 2、动态分列 列的宽度其实不仅仅100，会根据950px进行一些调整 3、列间隔与分界线 4、处理跨越不只一列的元素 阅读全文
posted @ 2016-05-26 23:11 ^^-^^- 阅读(129) 评论(0) 推荐(0)
css3 -- 文本
摘要：1、坐标轴: 上左为负数 下右为正数 2、text-shadow 还可以负数实现 blur-radius 阴影范围 3、text-outline ：目前浏览器不支持 text-stroke属性与text-outline 一致，webkit浏览器支持。 4、文本限制溢出 text-overflow t 阅读全文
posted @ 2016-05-26 22:19 ^^-^^- 阅读(129) 评论(0) 推荐(0)
css3 -- 网页字体
摘要：1、@font-face规则 local--使用字体的真正名称 url--指向要使用的字体文件 format--指定字体类型 2、local不支持IE9以下 3、font-size-adjust：number Firefox number值是指小写字母X占总高度的比例 阅读全文
posted @ 2016-05-26 17:33 ^^-^^- 阅读(193) 评论(0) 推荐(0)
css3 -- 伪类与伪元素
摘要：伪类： 1、结构伪类 A：E ： first-child{} E ： nth-*（n）{} E ： first-*（even）{} E ： first-*（odd）{} B：nth-child 是根据其父元素中国子元素的总数进行计算 nth-of-type 是根据特定类型的子元素进行计数 nth-l 阅读全文
posted @ 2016-05-25 22:52 ^^-^^- 阅读(197) 评论(0) 推荐(0)
css3 -- 属性选择器
摘要：属性选择器： 1、CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2、CSS3的新属性选择器 任意属性选择器E[attr*="value"]{} 开始子串属性选择器E[attr^="value"]{} 结束子串属性选择器E[attr 阅读全文
posted @ 2016-05-25 22:20 ^^-^^- 阅读(149) 评论(0) 推荐(0)
css3 -- 媒体查询
摘要：媒体查询： 1、媒体查询优点：基于设备的属性检测设备，这样一来就不需要使用浏览器探测脚本，之后允许直接安装设备的功能去设定目标样式表，也就是说检测用户使用小屏幕的设备，css规则就会调整以适应该屏幕的尺寸，从屏幕上去除无关元素，提供更小的图片，让文本变得更加清晰 2、语法 @link元素调用,多种媒 阅读全文
posted @ 2016-05-24 18:32 ^^-^^- 阅读(272) 评论(0) 推荐(0)
css3 -- 浏览器支持
摘要：浏览器支持的前缀： 1、浏览器兼容前缀 2、支持所有IE浏览器 3、支持除IE外的所有浏览器 4、仅仅支持IE10 5、支持IE9 以下版本 阅读全文
posted @ 2016-05-24 17:57 ^^-^^- 阅读(297) 评论(0) 推荐(0)
创建响应式布局-图片、自适应与响应式
摘要：响应式布局： 1、保有足够的留白，但也几乎不浪费屏幕面积 2、该考虑的内容：@百分比的布局以及em布局，随屏幕宽度变化的间距 @文本换行 @图片需被替换或允许缩放 @忍受一个不再完美的设计 自适应布局： 1、可在每个突变点上，为内容区域设置一个最大宽度，然后将外间距扩张直至匹配到下一个突变点 搜索框 阅读全文
posted @ 2016-05-24 17:34 ^^-^^- 阅读(435) 评论(0) 推荐(0)
创建响应式布局--显示表格数据，使用测量单位，使用媒体查询
摘要：创建响应式布局--显示表格数据： 1、使用表格时，适应不同的屏幕，则可以通过以下几个方法： A：使用CSS改变外观 B：创建多个表格 不推荐 创建响应式布局 使用测量单位： 1、测量单位： A：使用px B：使用百分比 C：em以及rem(root em 基于HTML) D：viewport测量（注 阅读全文
posted @ 2016-05-16 14:25 ^^-^^- 阅读(294) 评论(0) 推荐(0)
创建响应式布局----使用栅格
摘要：1、Pure Grids ： 创建你所需栅格系统的环境，CSS框架 2、BootStrap 3、Foundation：发布了一些优秀的模态、灯箱和内容滑块的解决方案；用于创建一个流式12列栅格 4、Gridpak：根据你的输入生成栅格系统 5、Golden Grid System：一个易于使用的18 阅读全文
posted @ 2016-05-16 13:40 ^^-^^- 阅读(487) 评论(0) 推荐(0)
创建响应式布局--移动优先
摘要：1、屏幕分组： A：0-479px 小 B：480-959px 中 C：960-1399px 大 D：1400px+ 特大 2、一般情况下，显示器尺寸和分辨率值得关系为： 14寸显像管(CRT)显示器 800×600 17寸液晶或CRT显示器 1024×768 19寸液晶显示器(普屏) 1280×1 阅读全文
posted @ 2016-05-16 09:32 ^^-^^- 阅读(300) 评论(0) 推荐(0)
创建响应式布局--内容事项注意点
摘要：1、HTTP请求以及发送给用户的资源文件数不要太多 2、加载堵塞，通过“懒加载”、“延迟加载”、“异步交互”，允许网站一部分的脚本在运行前先加载 3、提高网站性能以加快页面加载速度和资源文件传输速度： A：只提供给用户此刻需要的内容，其余的使用异步传输方法 B：谨慎决定需要展示的内容，如果不需要内容 阅读全文
posted @ 2016-05-16 08:56 ^^-^^- 阅读(137) 评论(0) 推荐(0)