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中的代码:
今日计划
- {{plan.msgContent}}
今日总结
明日计划
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":"总有一个适合你"
}
]
效果图:
网页制作过程中div定位的三个问题
这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...
jQuery ZeroClipboard中Flash定位不准确的解决方案