Last active
December 14, 2015 07:59
-
-
Save dioxide/5054695 to your computer and use it in GitHub Desktop.
CSS3 learn Tips
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 勒布朗(LeBlance)法则: 稍后等于永不(Later equals never) | |
| 生的计划，死的随机 | |
| CSS3 新属性及用法笔记 | |
| <- background -> | |
| 0. background: | |
| 用法: CSS3的background属性允许同时使用两张背景图 | |
| 兼容性写法: | |
| background:url(back1.png) left top no-repeat, url(back2.png) left top no-repeat; | |
| 1. background-size: | |
| 用法: 用于设置背景图像的大小,Chrome、Safari、Opera浏览器都支持. | |
| 兼容性写法: background-size: 10px 5px; | |
| -webkit-background-size: 10px 5px; | |
| 2. background-clip: | |
| 用法: 用于确定背景的裁剪区域,border-box是从border区域向外裁剪背景;padding-box是从padding区域裁剪背景;content-box是从内容区域向外裁剪背景 | |
| 兼容性写法: background-clip: border-box | padding-box | content-box | no-clip | |
| 3. background-origin | |
| 用法: 指background-position属性的参考坐标的位置,border值指从边框的左上角开始,content值指从内容区域的左上角坐标开始;padding值是指从padding区域的左上角开始. | |
| 4. 关于渐变: | |
| webkit的写法: | |
| -webkit-gradient(<type>,<port>[,<radius>]?<point> [,<radius>]? [, <stop>]*) | |
| type类型是指采用的渐变类型,如线性渐变linear或径向渐变radial. | |
| <- border-radius -> | |
| 用法: 不允许负值, | |
| 兼容性写法: | |
| border-radius: 10px 5px; | |
| -moz-border-radius: 10px 5px; | |
| -webkit-border-radius: 10px 5px; | |
| <- Media Queries 移动设备样式(媒体查询) -> | |
| 用法: HTML5时代全新的的样式技术. 通过Media Queries样式模块.可以实现根据移动设备的屏幕大小,定制网站页面的不同布局效果. 开发者只需实现一套页面,,就能在所有平台的浏览器下展现网站的不同效果. | |
| 写法: 要实现Media Queries 样式模块,需要在head标签内导入一个CSS样式文件,例如: | |
| 1.当前屏幕可视区域的宽度为600px以下时,应用该样式. | |
| 外链写法: <link rel="stylesheet" media="screen and(max-width:600px)" href="small" /> | |
| 内联写法: | |
| @media screen and (max-width:600px){ | |
| .demo{ | |
| background-color:#ccc; | |
| } | |
| } | |
| 2.当前屏幕可视区域的宽度: | |
| 外链写法: <link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="middle.css" /> | |
| 内联写法: | |
| @media screen and(min-width:600px) and(max-width:900px){ | |
| .demo{ | |
| background-color:#ccc; | |
| } | |
| } | |
| 3.当前最大屏幕可视区域是480px时,应用该样式文件. | |
| 外链写法: <link rel="stylesheet" media="screen and(max-device-width:480px)" href="small.css" /> | |
| 内联写法: | |
| @media screen and(max-device-width:480px){ | |
| .demo{ | |
| background-color:#ccc; | |
| } | |
| } | |
| 4. 判断屏幕方向 | |
| 用法:同样可以用于判断当移动设备(如iPad)的方向发生变化时应用该样式. 以下代码表示当设备处于纵向(portrait)模式下时,应用portrait样式文件;反之,则应用landscape样式文件 | |
| 写法: | |
| <link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css" /> | |
| <link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css" /> | |
| Media Queries语法总结 | |
| 语法: @media [media_query] media_type and media_feature | |
| media_query表示查询关键字,在这里可以使用not关键字和only关键字. | |
| .transparent_class { | |
| filter:alpha(opacity=50); | |
| -moz-opacity:0.5; | |
| -khtml-opacity: 0.5; | |
| opacity: 0.5; | |
| } | |
| 百度详细地址转坐标 api | |
| http://api.map.baidu.com/geocoder?address=%E9%93%AD%E5%8A%9F%E8%B7%AF&output=json&key=7a972b619162c0b81843fba0d7bbf8ad&city=%E9%83%91%E5%B7%9E |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment