09 2012 档案
摘要：一、Ext JS简介 Ext JS是一款非常优秀的JS框架库。 百度百科以及龚辟愚写的《Ext JS实用开发指南》一书中对Ext JS的描述如下：ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把Ext JS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing 等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 Ext J...
阅读全文
摘要：一、需求与遇到的问题 在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。 我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。 我现在遇到的问题是：如何在页面的一个iframe子页面（mainPage.htm）中获取并且操作其它iframe子页面（比如topPage.htm）中的HTML元素？二、通过JS获取并操作iframe中的元素来解决问题 这里主要就是通过J...
阅读全文
摘要：一、CSS浮动简介 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动主要在div+css布局时使用。 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失；如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮...
阅读全文
摘要：一、元素定位机制 1.普通文档流 普通文档流将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。 2.定位思想和浮动 CSS元素定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。此外，CSS中的浮动允许元素向左或者向右移动。通常情况下，我们使用div+css布局页面，而css布局中最重要的就是float属性。 3.一切皆为框 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为...
阅读全文
摘要：按照之前介绍的“元素内容（element）—>内边矩（padding）—>边框（border）—>外边距（margin）”的学习顺序，这一篇文章该学习元素的外边距了。外边距（margin）就是围绕在元素边框以外的空白区域，设置外边距会在元素外创建额外的“空白”。CSS中元素的margin属性用于置外边距，margin属性接受任何长度单位、百分数值甚至负值。一、margin简写属性 1.为元素的各个边设置同样的固定大小的margin值： 下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：/*设置一级标题的外边距为0.25英寸*/h1 {margin : 0.25i
阅读全文
摘要：在传统的HTML文档 中，我们使用表格（table）来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素的边框（border）就是围绕元素内容和内边据的一条或多条线，元素外边距（margin）内就是元素的的边框 (border)。每个边框有 3 个方面：宽度（border-width)、样式(border-style)，以及颜色(border-color)。下图中标注的蓝色部分为元素的边框：一、边框与背景 CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当...
阅读全文
摘要：上一篇文章学习了CSS的Box Model（盒子模型），在接下来的文章中，我会由内而外学习元素Box Model的中的padding、border和margin属性。 这一篇文章，先来学习元素内边矩（padding）：CSS padding 属性定义元素边框（border）与元素内容（element content）之间的空白区域。css padding属性的取值可以是auto（由浏览器计算内边矩的值）、以具体的单位计算的长度值（默认是0px）或百分比（基于父元素的宽度的百分比计算的内边距）。下图表示的是上一篇文章中的Box Model模型，其中的黄色区域（用红色箭头标注）就是元素的内边...
阅读全文
摘要：CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示： Box-Model 1 说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding...
阅读全文
