html div图片定位,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中的代码：

今日计划

• {{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定位不准确的解决方案