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: 微软雅黑;
}
/*

<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>

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;
});
});

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

效果图：