jianli

2026-08-05 06:23:38 +00:00 · 2014-03-29 21:56:00 +08:00
parent 4ddf6edd1b
commit fd486aef52
10 changed files with 499 additions and 52 deletions
@@ -1,52 +1,18 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<head>
-    <title>vczero</title>
-    
-</head>
-<body>
-    <div style="width:800px; margin-left:auto; margin-right:auto;font-family:Tahoma,Verdana,Arial;font-size:12px;color:#333333;line-height:23px;">
-        <div style="margin-top:25px;">
-            <span style="font-size:30px;width:800px; font-weight:bolder; font-family:Tahoma,Cordia New">Yesterday Today Tomorrow</span> 
-            <br />
-            <div style="float:right; color:#0000FF; font-weight:bold;">by vczero</div>
-            <br />
-            <br />
-        </div>
-        <div style="width:500px; float:left; height:280px; ">
-            <span>姓名:vczero</span><br />
-            <span>性别:男</span><br />
-            <span>生日:1991-09-24</span><br />
-            <span>公司:AutoNavi</span><br />
-            <span>毕业院校:CHZU</span><br />
-            <span>专业:Geographic Information System(GIS)</span><br />
-            <span>爱好：打兵乓球</span><br />
-            <span>从业技能：Node.js及相关后端开发</span><br />
-            <span>略懂的：Node、JAVA(EE)、.NET、http、MongoDB、SQL、LBS、SNS</span><br />
-            <span>专业竞赛：ESRI杯安徽省第四届GIS软件开发大赛一等奖(web创新组)...</span><br />
-            <span>项目情况：主持国家大学生科技创新项目1项、校级科研项目2项，参与企事业研发项目2项。</span><br />
-            <span>在校表现：三好学生(3次)、一等奖学金(3次)、国家励志奖学金(3次)</span>
-        </div>
-        <div style="width:280px;float:right; height:280px;">
-            <img src="image/me.jpg"  style="width:200px;height:230px;" alt="" />
-            <br />
-        </div>
-        <br />
-        <div>
-            <div>
-                <p>&nbsp;&nbsp;&nbsp;&nbsp;Hi,my name is vczero.我出生在一个小农村，是一个偏僻的山沟里的娃。每次最害怕的是长途的汽车导来导去，连换乘也要好多次。县里没有火车，
-                是一个贫困县，唯一的省道还是坑坑洼洼。记得，08年南方大雪，年底回家的车都没有。尽管如此，我却不时怀念家乡，怀念儿时的玩伴。</p>
-                <p>&nbsp;&nbsp;&nbsp;&nbsp;上次看到一位大牛写的文章，在IT行业里没有天才，只有苦才。呵呵，我知道肯定有聪资过人的同学，而我只是一个平常人。我相信，我不怕慢，只要
-                我肯往前走。从小，父亲一个人拉扯两个人(姐姐和我)上学，现在已经快60岁，或许在同伴的眼中都是爷爷辈的啦。现在，姐姐在一所学校当老师，而我已经毕业了，我终于可以扛起家庭的担子了。
-                感谢我老父亲把握抚养成人，感谢姐姐从小照顾不被人欺负。</p>
-                <p>&nbsp;&nbsp;&nbsp;&nbsp;从小，都是好心人一路帮助我们，谢谢他们的关心照顾，谢谢初中(Mr Wang)、高中(Mr Bian)的教务主任；谢谢大学的班主任涛哥；谢谢一路帮助我走过来的叔叔阿姨；
-                谢谢Team leader和Team的帮助。谢谢你们，我才是一个不断进步的阳光男孩。</p>
-                <p>&nbsp;&nbsp;&nbsp;&nbsp;工作上呢，大一开始写代码，大二拿了奖学金买了电脑，从此喜欢上了web，同时又蒙恩师教导(Mr Liu & Mr Jiang)。跟着C++大牛和web创新的博士一路走来，既有辛苦，又有感动。每一段过程都
-                倍感艰辛，但是谢谢他们的悉心指导和栽培。让明天的我感谢今天的努力。</p>
-				<p>Quit don’t quit. Noodles don’t noodles.There is a saying,Yesterday is historyTomorrow is a mystery.But today is a gift.That is why it’s called the present (the gift)</P>
-				<p style="color:blue; float:right;">2014/1/19 at Beijing</P>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<link rel='stylesheet' href='style.css' />
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+		<div id="main">
+			<div id="mycav">
+				<div id="fun_rate">vczero</div>
+				<canvas id="canvas"  width="910" height="1500">
+					您好！您的浏览器不支持HTML5 Canvas。请更换其他浏览器。
+				</canvas>
+			</div>		
+		</div>
+	</body>
+</html>
@@ -0,0 +1,431 @@
+window.onload = function(){
+	var dc = new MyChart('canvas');
+	dc.drawArcF();
+	dc.drawArcB();
+	dc.detail();
+	dc.drawBaseInfo();
+	dc.projectInfo();
+	dc.actrcle();
+}
+
+var MyChart = function(canvas){
+	this.canvas = document.getElementById(canvas);
+	this.context = this.canvas.getContext('2d');
+};
+
+MyChart.prototype.drawArcF = function(){
+	//开环
+	this.context.fillStyle = '#898989';
+	this.context.beginPath();
+	this.context.arc(100,100,70,200*Math.PI/180,340*Math.PI/180);
+	this.context.closePath();
+	this.context.fill();
+	//掩盖
+	this.context.fillStyle = '#2B2B2B';
+	this.context.beginPath();
+	this.context.arc(100,100,50,0,200*Math.PI/180,340*Math.PI/180);
+	this.context.closePath();
+	this.context.fill();
+
+	//前指针
+	this.context.fillStyle = '#FFDF00';
+	this.context.beginPath();
+	this.context.moveTo(96,120);
+	this.context.lineTo(104,120);
+	this.context.lineTo(115,45);
+	this.context.fill();
+
+	//指针底部的圆角
+	this.context.fillStyle = '#FFDF00';
+	this.context.beginPath();
+	this.context.arc(100,120,4,0,2*Math.PI);
+	this.context.fill();
+
+	this.context.font="normal  normal normal 14px arial";
+	//标码-0
+	this.context.strokeStyle ='#FFFFFF';
+	this.context.strokeText(0,30,95);
+
+	//标码-100
+	this.context.strokeStyle ='#FFFFFF';
+	this.context.strokeText(100,155,95);
+
+	//标码-66
+	this.context.strokeStyle ='#FFFFFF';
+	this.context.strokeText(66,115,20);
+
+	//前端线
+	this.context.strokeStyle = '#383838';
+	this.context.beginPath();
+	this.context.lineWidth = 1;
+	this.context.moveTo(30,170);
+	this.context.lineTo(150,170);
+	this.context.stroke();
+
+	//标码-66
+	this.context.fillStyle ='#FFFFFF';
+	this.context.font="12px Arial";
+	this.context.fillText('前端',30,160);
+}
+
+MyChart.prototype.drawArcB = function(){
+	//开环
+	this.context.fillStyle = '#898989';
+	this.context.beginPath();
+	this.context.arc(300,100,70,200*Math.PI/180,340*Math.PI/180);
+	this.context.closePath();
+	this.context.fill();
+	//掩盖
+	this.context.fillStyle = '#2B2B2B';
+	this.context.beginPath();
+	this.context.arc(300,100,50,0,200*Math.PI/180,340*Math.PI/180);
+	this.context.closePath();
+	this.context.fill();
+
+	//后指针
+	this.context.fillStyle = 'red';
+	this.context.beginPath();
+	this.context.moveTo(296,120);
+	this.context.lineTo(304,120);
+	this.context.lineTo(340,45);
+	this.context.fill();
+
+
+	//指针底部的圆角
+	this.context.fillStyle = 'red';
+	this.context.beginPath();
+	this.context.arc(300,120,4,0,2*Math.PI);
+	this.context.fill();
+
+	this.context.font="normal  normal normal 14px arial";
+
+	//标码-0
+	this.context.strokeStyle ='#FFFFFF';
+	this.context.strokeText(0,230,95);
+
+	//标码-100
+	this.context.strokeStyle ='#FFFFFF';
+	this.context.strokeText(100,355,95);
+
+	//标码-80
+	this.context.strokeStyle ='#FFFFFF';
+	this.context.strokeText(80,348,28);
+
+	//后端线
+	this.context.strokeStyle = '#383838';
+	this.context.beginPath();
+	this.context.lineWidth = 1;
+	this.context.moveTo(230,170);
+	this.context.lineTo(350,170);
+	this.context.stroke();
+	this.context.closePath();
+
+	//标码-80
+	this.context.fillStyle ='#FFFFFF';
+	this.context.font ='12px Arial';
+	this.context.fillText('后端',330,160);
+}
+
+MyChart.prototype.detail = function(){
+	//66D038
+	this.context.fillStyle ='#66D038';
+	this.context.font = '30px Arial';
+	this.context.fillText('Detail',30,220);
+
+	this.context.beginPath();
+	this.context.lineWidth = 0.5;
+	this.context.moveTo(30,240);
+	this.context.lineTo(30,500);
+	this.context.stroke();
+	this.context.closePath();
+
+	//---------技能
+	var myFuns = [];
+	myFuns.push('1. 熟练掌握C/C++、JAVA、.NET、Node.js等服务端语言');
+	myFuns.push('2. 熟练掌握web开发：HTTP、jsp、servlet、Tomcat、web service、WCF REST、EF');
+	myFuns.push('3. 熟练掌握Oracle、MSQ等关系型数据库、MongoDB等NoSQL数据库开发');
+	myFuns.push('4. 基本掌握HTML+DIV+CSS、Javascript、Jquery、AJAX等前端知识');
+	myFuns.push('5. 具有扎实的GIS、LBS的专业基础和开发经验。');
+	myFuns.push('6. 具有较为扎实的数据结构和算法基础，具有一定的web创新意识');
+	myFuns.push('7. 熟悉基本的设计模式和B/S架构');
+
+	for(var i = 0; i < myFuns.length; i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(myFuns[i], 40, 250 + i*21);
+	}
+
+	//----------折线图
+	var myFuns_item = [];
+	myFuns_item.push('C/C++');
+	myFuns_item.push('Node');
+	myFuns_item.push('NoSQL');
+	myFuns_item.push('JAVA');
+	myFuns_item.push('WEB');
+	myFuns_item.push('DB');
+
+	for(var n = 0; n < myFuns_item.length; n++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(myFuns_item[n], 50 + n*60, 500);
+	}
+
+	this.context.beginPath();
+	this.context.strokeStyle = '#D6D6D6';
+	this.context.moveTo(70,425); //C
+	this.context.lineTo(125,432); //Node
+	this.context.lineTo(185,420); //No SQL
+	this.context.lineTo(245,422); //JAVA
+	this.context.lineTo(305,412); //WEB
+	this.context.lineTo(365,432); //DB
+	this.context.stroke();
+	this.context.closePath();
+
+	this.context.beginPath();
+	this.context.fillStyle = '#66CE39';
+	this.context.rect(70,420,10,10);
+	this.context.rect(125,427,10,10);
+	this.context.rect(185,415,10,10);
+	this.context.rect(245,417,10,10);
+	this.context.rect(305,407,10,10);
+	this.context.rect(365,427,10,10);
+	this.context.fill();
+	this.context.closePath();
+}
+
+//个人基本信息
+MyChart.prototype.drawBaseInfo = function(){
+	//绘制照片
+	var image = new Image();
+	image.src = 'pic/me.png';
+	_context = this.context;
+	image.onload = function(){
+		_context.drawImage(image,770,10,130,150);
+	}
+	//基本信息
+	var baseinfo = [];
+	baseinfo.push('代号：vczero');
+	baseinfo.push('生日：1991-09-24');
+	baseinfo.push('公司：高德地图实习');
+	baseinfo.push('毕业院校：CHZU');
+	baseinfo.push('专业：Geographic Information System');
+	baseinfo.push('爱好：打兵乓球');
+	baseinfo.push('实习安排：Node.js服务端&矢量地图');
+	baseinfo.push('E-amil：wlhmyit@126.com');
+
+	for(var i = 0; i < baseinfo.length; i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(baseinfo[i], 525, 25 + i*21);
+	}
+	//在校表现
+	var schoolShow = [];
+	this.context.fillStyle ='#66D038';
+	this.context.font = '30px Arial';
+	this.context.fillText('In School',530,220);
+	schoolShow.push('1. 2013年6月:ESRI杯安徽省第四届GIS开发大赛web创新设计组第一名');
+	schoolShow.push('2. 2010年9月~2013年9月：连续获得校级一等奖学金（3次，3%）');
+	schoolShow.push('3. 2010年9月~2013年9月：国家励志奖学金（3次，3%~5%）');
+	schoolShow.push('4. 2010年9月~2013年9月：连续获得校级“三好学生”（3次，4%）');
+	schoolShow.push('5. 2010年9月~2013年9月：苍穹企业奖学金（1次）、优秀团员（1次）');
+	schoolShow.push('6. 2013年5月~2014年5月：主持国家级大学生创新训练项目一项，主持');
+	schoolShow.push('7. 2010年9月~2013年9月：主持校级大学生科研项目2项，主持');
+	schoolShow.push('8. 2010年9月~2014年6月：担任学习委员、11级地信2班助理班主任');
+	schoolShow.push('9. 2012年6月~2013年6月：GIS首届会长、校技术创新团队MySpace组长');
+	schoolShow.push('10. 荣获2014年安徽省品学兼优毕业生');
+
+	for(var n = 0; n < schoolShow.length; n++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(schoolShow[n], 525, 245 + n*21);
+	}
+
+}
+
+//项目信息
+MyChart.prototype.projectInfo = function(){
+	var schoolShow = [];
+	this.context.fillStyle ='#66D038';
+	this.context.font = '30px Arial';
+	this.context.fillText('My Project',30,570);
+
+	this.context.strokeStyle = '#383838';
+	this.context.beginPath();
+	this.context.lineWidth = 1;
+	this.context.moveTo(30,590);
+	this.context.lineTo(400,590);
+	this.context.stroke();
+	this.context.closePath();
+
+	//------------------项目1
+	//name:'基于设计媒体的旅游时空标签服务'
+	_context = this.context;
+	var image_service = new Image();
+	image_service.src = 'pic/service.png';
+	image_service.onload = function(){
+		_context.drawImage(image_service,30,610,220,285);
+	}
+	var img_service_detail = [];
+	img_service_detail.push('名称：基于社交媒体的旅游时空标签服务');
+	img_service_detail.push('职责：组长(后端及整个框架)');
+	img_service_detail.push('成果：安徽省GIS软件开发大赛一等奖');
+	img_service_detail.push('简介：通过抽取安徽省、江苏省具有代表性');
+	img_service_detail.push('的8个景点和南京600个POI点的微博点评数');
+	img_service_detail.push('据，通过自然语言处理，提取景点的时空标');
+	img_service_detail.push('签；通过GIS对时空标签(时态GIS)和景点一');
+	img_service_detail.push('年的数据进行分析和可视化，构建服务平台');
+	img_service_detail.push('技术方案：后端OpenAPI+.NET+MongoDB ');
+	img_service_detail.push('WCF REST + SQLServer + GeoDataBase');
+	img_service_detail.push('前端：AJAX+ArcGIS API for JS + JQUERY');
+	for(var service_i = 0; service_i < img_service_detail.length; service_i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		var space = 0;
+		if(service_i >= 3){
+			space = 20;
+		}
+		if(service_i >=8){
+			space = 40;
+		}
+		this.context.fillText(img_service_detail[service_i], 270, 630 + space + service_i*21);
+
+	}
+
+	//-----------------项目2
+	//微旅行推荐系统
+	var image_travel = new Image();
+	image_travel.src = 'pic/travel.png';
+	image_travel.onload = function(){
+		_context.drawImage(image_travel,510,610,400,200);
+	}
+	var img_travel_detail = [];
+	img_travel_detail.push('名称：微旅行推荐系统(南京市)');
+	img_travel_detail.push('职责：组长(后端、部分前端及整个框架)');
+	img_travel_detail.push('简介：通过分析新浪微博用户的个性特征，与景点的标签匹配，进行推荐。');
+
+	for(var travel_i = 0; travel_i < img_travel_detail.length; travel_i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(img_travel_detail[travel_i], 510, 836 + travel_i*21);
+
+	}
+	//-----------------项目3
+	//高德地图web App
+	var image_amap = new Image();
+	image_amap.src = 'pic/amap.png';
+	image_amap.onload = function(){
+		_context.drawImage(image_amap,30,940,90,90);
+	}
+	var img_amap_detail = [];
+	img_amap_detail.push('项目：高德地图web app V2.0');
+	img_amap_detail.push('职责：Node.js服务端、部分前端开发(实习生)');
+	img_amap_detail.push('简介：移动设备访问http://mo.amap.com');
+	img_amap_detail.push('其他：高德地图服务接口代码编写及地图相关探索');
+	for(var amap_i = 0; amap_i < img_amap_detail.length; amap_i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(img_amap_detail[amap_i], 140, 960 + amap_i*21);
+	}
+
+	var schoolShow = [];
+	this.context.fillStyle ='#E89640';
+	this.context.font = '100px Arial';
+	this.context.fillText('.',20,1100);
+
+	var schoolShow = [];
+	this.context.fillStyle ='#E89640';
+	this.context.font = '100px Arial';
+	this.context.fillText('.',20,1170);
+
+	//-------------------其他项目
+	var chuz = {
+		name: "名称：县域国土一张图项目",
+		lct : "公司：滁州市旅图信息科技有限责任公司（2013.7-2013.9）",
+		renw: "职责：负责土地供应管理信息系统的后端开发"
+	};
+
+	var dilin = {
+		name: "名称：公司平台",
+		lct : "公司：北京地林伟业信息技术有限责任公司（2013.7-2013.9）",
+		renw: "职责：研发部研发实习工程师主,平台空间数据库C++的跨平台调用"
+	};
+
+	this.context.fillStyle ='#898788';
+	this.context.font = '12px Arial';
+	var chuz_space =0;
+	for(var k in chuz){
+		this.context.fillText(chuz[k], 43, 1100 + chuz_space*21);
+		chuz_space++;
+	}
+
+	var dilin_space =0;
+	for(var d in dilin){
+		this.context.fillText(dilin[d], 43, 1170 + dilin_space*21);
+		dilin_space++;
+	}
+
+	var schoolShow = [];
+	this.context.fillStyle ='#66D038';
+	this.context.font = '20px Arial';
+	this.context.fillText('...........',43,1234);
+
+	//---------科研项目
+	var schoolShow = [];
+	this.context.fillStyle ='#66D038';
+	this.context.font = '26px Arial';
+	this.context.fillText('科研立项',500,960);
+
+	this.context.strokeStyle = '#383838';
+	this.context.beginPath();
+	this.context.lineWidth = 1;
+	this.context.moveTo(500,980);
+	this.context.lineTo(900,980);
+	this.context.stroke();
+	this.context.closePath();
+
+	var keyans = [];
+	keyans.push('2013年主持国家级大学生创新训练项目，基于GIS滁州市公交线路优化分析');
+	keyans.push('2012年主持校级科研项目：基于GIS的滁州市购房评价系统，主持');
+	keyans.push('2011年主持校级科研项目：基于GIS滁州市公交线路优化分析，主持');
+	keyans.push('2010年参与数据处理，国家自然科学基金项目(江汉平原早中全新世古洪水事');
+	keyans.push('件考古地层学研究（40971115）)');
+
+	for(var keyans_i = 0; keyans_i < keyans.length; keyans_i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(keyans[keyans_i], 500, 1000 + keyans_i*21);
+	}
+
+	var blog = [];
+	blog.push('微博：vczero（地址http://weibo.com/u/2762275212）');
+	blog.push('GitHub：vczero（地址：https://github.com/vczero）');
+	blog.push('博客：Vczero（地址：http://vczero.iteye.com/）');
+	blog.push('当然可以通过google(建议)搜索引擎搜索，关键字:vczero,第一页就是');
+
+	for(var blog_i = 0; blog_i < blog.length; blog_i++){
+		this.context.fillStyle ='#66CE39';
+		this.context.font = '12px Arial';
+		this.context.fillText(blog[blog_i], 500, 1147 + blog_i*21);
+	}
+}
+
+MyChart.prototype.actrcle = function(){
+	var ats = [];
+	ats.push('        Hi,my name is vczero.我出生在一个小农村，是一个偏僻的山沟里的娃。每次最害怕的是长途的汽车导来导去，连换乘也要好多次。县里没有火车，是一个贫困县，');
+	ats.push('唯一的省道还是坑坑洼洼。记得，08年南方大雪，年底回家的车都没有。尽管如此，我却不时怀念家乡，怀念儿时的玩伴。上次看到一位大牛写的文章，在IT行业里没');
+	ats.push('有天才，只有苦才。呵呵，我知道肯定有聪资过人的同学，而我只是一个平常人。我相信，我不怕慢，只要 我肯往前走。从小，父亲一个人拉扯两个人(姐姐和我)上学，');
+	ats.push('现在已经快60岁，或许在同伴的眼中都是爷爷辈的啦。现在，姐姐在一所学校当老师，而我已经毕业了，我终于可以扛起家庭的担子了。 感谢我老父亲把握抚养成人，');
+	ats.push('感谢姐姐从小照顾不被人欺负。从小，都是好心人一路帮助我们，谢谢他们的关心照顾，谢谢初中(Mr Wang)、高中(Mr Bian)的教务主任、谢谢大学的班主任涛哥、');
+	ats.push('、谢谢一路帮助我走过来的叔叔阿姨、谢谢你们!');
+	ats.push('         编程上呢，大一开始写代码，大二拿了奖学金买了电脑，从此喜欢上了web，同时又蒙恩师教导(Mr Liu & Mr Jiang)。跟着C++大牛和web创新的博士一路走来，既有辛');
+	ats.push('苦，又有感动。每一段过程都 倍感艰辛，但是谢谢他们的悉心指导和栽培。让明天的我感谢今天的努力。');
+	ats.push('         Quit don’t quit. Noodles don’t noodles.There is a saying,Yesterday is historyTomorrow is a mystery.But today is a gift.That is why it’s called the gift');
+
+	ats.push();
+	for(var i = 0; i < ats.length; i++){
+		this.context.fillStyle ='#898788';
+		this.context.font = '12px Arial';
+		this.context.fillText(ats[i], 30, 1300 + i*21);
+	}
+}
+
@@ -0,0 +1,34 @@
+body{
+	background-color:#2B2B2B;
+	color:#9A9A9A;
+	font-size:13px;
+}
+
+#main{
+	width:100%;
+	min-height:600px;
+	margin-left:0;
+	margin-top:0;
+}
+
+#mycav{
+	min-height:600px;
+	width: 900px;
+	margin-left:auto;
+	margin-right:auto;
+}
+
+#fun_rate{
+	border-bottom:1px solid #3E3E3E;
+	width:100%;
+	height:30px;
+	line-height:30px;
+	font-weight: bold;
+}
+
+/*#right{
+	width:48%;
+	min-height:600px;
+	display:inline-block;
+	float:right;
+}*/
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta http-equiv="Access-Control-Allow-Origin" content="*">
+		<style type="text/css">
+			body{font-size:13px;margin-left: 0;margin-top: 0;margin-right: 0;margin-bottom: 0;}
+			.mainFrame{width: 960px;margin-right: auto;margin-left: auto;border:1px solid red;min-height: 900px;}
+		</style>
+	</head>
+	<body>
+		<div class="mainFrame">
+			
+		</div>
+	</body>
+</html>