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

效果图:

html中div定位练习的更多相关文章

  1. 网页制作过程中div定位的三个问题

    这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...

  2. jQuery ZeroClipboard中Flash定位不准确的解决方案

    转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...

  3. (转载)html中div使用自动高度

    为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签:     static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...

  4. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  5. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  6. 【基础】selenium中元素定位的常用方法(三)

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

  7. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  8. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

  9. div定位relative和absolute测试2

    之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...

随机推荐

  1. 110. Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  2. 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  3. JAG Practice Contest for ACM-ICPC Asia Regional 2016

    2016弱校联盟十一专场10.3 传送门 B. Help the Princess! 计算皇后和士兵谁先到达出口即可. C. We don't wanna work! 两个优先队列维护工作中积极性最小 ...

  4. hive权限管理之实践

    一.实践心得 主要参考这个连接,里面说得也挺详细的.http://www.aboutyun.com/thread-12549-1-1.html 总结如下: 1.若赋予用户某个表的权限,查用户在该表所属 ...

  5. URAL 1076 Trash Trash(最大权匹配)

    Trash Time limit: 1.0 secondMemory limit: 64 MB You were just hired as CEO of the local junkyard.One ...

  6. HDU-5532 Almost Sorted Array (LIS)

    题目大意:给一个n个数的序列,问这个序列删掉一个数后是否有序. 题目分析:找最长上升子序列和最长下降子序列,只要有一个的长度不小于n-1即可. 代码如下: # include<iostream& ...

  7. 越狱Season 1-Episode 15: By the Skin and the Teeth

    Season 1, Episode 15: By the Skin and the Teeth -Pope: doctor...you can leave. 医生你得离开 -Burrows: It's ...

  8. ps颜色相加

    一. 红+绿=黄 红+蓝=品红 绿+蓝=青 白色:红+绿+蓝=白色.(黄.品红.青,两种以上颜色相加是白色) 互补色:红->青.绿->品红.蓝->黄 二. 品红+黄=红 青+黄=绿 ...

  9. ps调整图层

    自然饱和度:自然饱和度命令和色相饱和度命令里的饱和度相比最大的区别是自然饱和度只增加未达到饱和的颜色的饱和度,而饱和度命令则增加整个图像的饱和度,可能会导致图像颜色过于饱和,而自然饱和度不会出现这种问 ...

  10. checking

    https://en.wikipedia.org/wiki/Java_performance https://en.wikipedia.org/wiki/Java_virtual_machine ht ...