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

效果图:


涂宗勋 CSDN认证博客专家 web安全 系统安全 安全架构
【若想不迷路,记得点关注,动动小手指,点点全是福】

6年java工作经验,现居湖北武汉,有过支付、OA、CA、OAUTH2等工作经验,现从事车联网行业。
爱好分享,个人博客blog.tzxcode.cn,微信tuzongxun,qq1160569243,欢迎来撩。
©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值