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":"总有一个适合你" } ]
效果图: