勒布朗(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