html中div定位练习

html中div定位练习，实现简单的计划列表：

记录div定位时主要的属性：float、position等，以及对应的relative和absolute等，同时使用到angular js中的数据绑定，$http请求等等，记录备忘：

login.css中代码：

/*
主页面数据列表
 */
.planWrite{
	background-color: #868383;
	margin: 9px;
	font-size: 16px;
	width: 93%;
	height:330px;
}
.plDiv{
	width: 32%;
	position: absolute;
    margin:0px;
    border: 1px solid #060606;
}
.plDiv1{
	width: 30%;
	position: absolute;
    margin:0px;
}
#div1_2{
	left:1%;
	top:60px;
	height: 350px;
	background-color: #868383;
}
#div2_2{
	left:35%;
	top:60px;
	height: 350px;
	background-color: #868383;
}
#div3_2{
	left:69%;
	top:60px;
	height: 350px;
	background-color: #868383;
}
#plDiv{
	left: 2%;
	width: 95%;
	height:420px;
	margin: 10px;
	position: relative;
}
#div1{
	height:370px;
	left:0px;
	top:50px;
	background-color: #A4A6A5;
}
#div1_1{
	height:50px;
	left:0px;
    background-color: #060606;
    color:#FAF8F8;
    font-size: 30px;
    font-family: 微软雅黑;
}
#div2{
	height:370px;
	left:34%;
	top:50px;
	background-color: #A4A6A5;
}
#div2_1{
	height:50px;
	left:34%;
    background-color: #060606;
    color:#FAF8F8;
    font-size: 30px;
    font-family: 微软雅黑;
}
#div3{
	height:370px;
	left:68%;
	top:50px;
	background-color:#A4A6A5 ;
}
#div3_1{
	height:50px;
	left:68%;
    background-color: #060606;
    color:#FAF8F8;
    font-size: 30px;
    font-family: 微软雅黑;
}
/*

planList.html中的代码：

<div id="plDiv">
   <center>
   <div class="plDiv" id="div1_1">
   	今日计划
   </div>
   </center>
   <div class="plDiv" id="div1">

   </div>
   <div class="plDiv1" id="div1_2">
   	   <ul>
   	   	 <li ng-repeat="plan in plans">{{plan.msgContent}}</li>
   	   </ul>
   </div>
   <center>
   <div class="plDiv" id="div2_1">
   	今日总结
   </div>
   </center>
   <div class="plDiv" id="div2">

   </div>
   <div class="plDiv1" id="div2_2">
   	   <!--summary总结-->
   	   <textarea class="planWrite" ng-model="todaySummary"></textarea>
   </div>
   <center>
   <div class="plDiv" id="div3_1">
   	明日计划
   </div>
   </center>
   <div class="plDiv" id="div3">

   </div>
   <div class="plDiv1" id="div3_2">
   	   <textarea  class="planWrite" ng-model="tomorrowPlan"></textarea>
   </div>
</div>

planCtr.js中的代码：

angular.module('contactsApp')
.controller('planCtr',function($scope,$http){
   $scope.todaySummary="有总结才知得失";
   $scope.tomorrowPlan="有计划才不慌乱";
   $http.get("./json/plan.json").success(function(plans){
   	    console.log(plans);
        $scope.plans=plans;
   });
});

plan.json中的代码：

[
{
"msgContent":"明天会更好"
},
{
"msgContent":"每天进步一点点"
},
{
"msgContent":"总有一个适合你"
}
]

效果图：