搜索
查看: 25868|回复: 21

[web] HTML - DIV,CSS 布局基础

  [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2013-7-2 18:30:53 | 显示全部楼层 |阅读模式
一、HTML基本语法

HTML类似XML,页面上的每个节点用一对标签表示,例如

  1. <P>这是段落</P>
复制代码
标签的开始标记与结束标记都是放在一对尖括号中,不同的是结束标记多一个正斜杠(/) -
不要与反斜杠(\)弄混淆,实际上除了windows的路径分隔符、转义字符串里的转义符 - 其他地方基本都是使用正斜杠(例如:网址、网页中的路径分隔符、或者表示除法、分隔命令行参数,以及HTML标签结束标记等等)。
HTML的一些常用标签请查看手册:
http://bbs.aardio.com/doc/html/dhtml/objects.html

表示表示图片的 <img> 表示换行的 <br> 则没有结束标记 - 这种叫空标签,在XML里空标签必须要补一个斜杠,但HTML里没有这规定,所以HTML比较随意没有XML那样严格的规范,也正因为如此,有了接近XML的XHTML1.0 规范,这个XHTML当年曾经很火甚至有人断言HTML5不会出生,但是后来越搞越复杂到不向下兼容的XHTML2.0终于被HTML5击败(HTML5向下兼容HTML4.0, XHTML1.0).

HTML标签的开始标记内部还可以使用一个或多个键值对表示节点的属性,例如:
  1. <img src="图片路径" width="100" height="100">
复制代码
HTML 属性名可以使用除空白字符,双引号,单引号,'/','>','\0'以外的所有可打印字符,HTML 的属性值可选包含在一对双引号、或单引号内,注意不要使用有歧义的表示即可,例如值包含单引号就应当放在一对双引号内。所以类似下面这样的写法虽不常见但仍然是合法的:

  1. <div ${test}=123>测试</div>
复制代码
HTML中标签名、属性名、属性值都是忽略大小写的,但因为浏览器众多实现上有细节的差异,为保持良好的兼容性,应当都使用小写。

二、HTML标准规范、DOCTYPE

说到HTML标准,实际上目前兼容性最好的还是HTML4.0以及XHTML1.0,
编写一个网页使用什么样的标准 一般 在HTML的第一行使用 <!doctypel> 声明,这个语句比较复杂,例如HTML4.0兼容标准的声明为

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
复制代码
注意开始的尖括号后面有一个感叹号 - 表示这是一个声明语句而不是普通节点,
而紧接在DOCTYPE后的HTML表示文档的根节点是HTML, 后面是指明使用什么规范。

如果不想搞太复杂,可以写一个最简单的DOCTYPE声明( 完全不写会导致IE以IE5的怪异模式显示网页 ):

  1. <!doctype html>
复制代码
现在很多编辑器(例如notepad++)支持 zencoding或emmet,可以比较快的生成一个简单的包含DOCTYPE的HTML代码,几个常用的缩写如下:
html:4s 严格的HTML4.0
html:4t 兼容性的HTML4.0(就是要求不那么严格)
html:xt 使用XHMTL1.0标准


emmet.gif

三、HTML文档

一个完整的的HTML页面源码如下:
144401knqn4w74n9cgrodd.jpg

一个标准的HTML页面包含几个必要的标记
<html> </html> 为其他节点的根节点,而 html一般 包含两个子节点, body节点里面放显示内容,而head节点里放页面的其他参数(例如窗口标题,页面编码等等)


而head节点与body节点又可以包含其他的子节点,子节点又可以包含子节点,就象一棵树:
180733aslsoonpdqplslt7.png

html是树干是根节点,而head节点包含的内容总是默默无闻的不可见部分,
body则包含所有显示在页面上的内容。

四、盒子模型

所有的节点都可以用CSS来定义外观,CSS可以写到节点的style属性里,也可以写到CSS文件里。
所有可显示的节点的显示模式都可以用盒子模型来表示,如下图:
150806to23u3u2fuihl5w8.jpg

每一个盒子有内容区,有边框(CSS的border属性)
边框里面是内边距( 或者叫内补白、即CSS的padding属性)
边框外面则是外边距(或者叫外边界,即CSS的margin属性)
当然还有节点的宽度、高度等等,有有的浏览器中宽度高度整的是包含border的节点大小,而在有的浏览器中指的是内容区大小,关于盒子模型请参考文章:了解CSS 盒子模型

五、CSS选择器

如果你还不知道什么是CSS选择器,请参考教程 CSS选择器语法详解  以及 HTMLayout快速入门

六、块节点、内联节点

HTML是以流的模式来显示节点的,所有节点分为两类。

块节点:可以指定高度、宽度(当然也支持上面所说的盒子模型的所有属性,例如内边距、外边距等等),多个块节点总是在页面上自上向下的垂直流动(块节点总是独占一行,默认的两个块节点不会显示在同一行内,无法在同一行内联接)

内联节点:内联节点总是在页面上自左向右的水平流动,一行放不下来才会流动到下一行,内联元素显示在行内,其高度受限于行距的高度,一个典型的例子就是文本,内联节点不能指定垂直方向的外边距(但是可以指定水平方向的外边距)、虽然也可以指定边框以及内边距(但在垂直方向上受行距高度的限制,边框以及内边距在垂直方向上设置的再大也不能改变行距高度,多余的内边距会被忽略,而多余的边框会溢出到上一行或下一行重叠显示),内联节点也不能指定高度(受行距高度的限制),也不能指定宽度(即内联节点在水平方向上只有外边距是正常起作用的,垂直方向上内外边距、边框等都显示不正常受制于行距高度)

块节点通常用来布局、建立网页的框架、调整网页的结构,最重要的块节点就是div节点。
内联节点通常用来显示内容(文本和图像)、最常见的内联节点是span,注意显示图像的img也是内联节点。

在严格的HTML4规范中,body下面只能包含块节点,所有内联节点都应当放到块节点中。
所以div如此重要,甚至HTML布局可以简称 div+css 布局。


评分

参与人数 4银币 +190 收起 理由
aaucn + 60 很给力!
5e365 + 50 谢谢!经典,用最少的时间,学到了最多的内.
aaa + 30 神马都是浮云
bob + 50 谢谢你的无私贡献!

查看全部评分

再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 18:31:47 | 显示全部楼层

块节点中的兄弟节点默认是自上向下流动的,我们来看一个例子:[code]import win.ui; /*DSG{{*/ var winform = ..wi

块节点中的兄弟节点默认是自上向下流动的,我们来看一个例子:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流动的块节点" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <html>
  10. <head>
  11.         <title>Document</title>
  12.         <style type="text/css">
  13.                 div#header {
  14.                         border:red 1px solid;
  15.                         background:#cccccc;
  16.                         margin-bottom:20px;
  17.                 }
  18.                 div#main-box{
  19.                         border:blue 1px solid;
  20.                         margin-top:20px;
  21.                         padding:10px;
  22.                 }
  23.                
  24.                 div#main-box div{
  25.                         border:green 1px solid;
  26.                         width:100%;
  27.                         height:100px;
  28.                         overflow:hidden;//IE6下要加上这句
  29.                 }
  30.                
  31.                 div#main-box div#a{
  32.                         width:200px;
  33.                         height:150px;
  34.                 }
  35.         </style>
  36. </head>
  37. <body>
  38.         <div id="header"> 这是标题 </div>
  39.         <div id="main-box">
  40.                 <div id="a" >a </div>
  41.                 <div id="b" >b </div>
  42.                 <div id="c" >c </div>
  43.                 <div id="d" >d</div>
  44.         </div>
  45. </body>
  46. </html>         
  47. **/

  48. winform.show();   
  49. win.loopMessage();
复制代码
运行上面的代码,你会看到这样的显示效果:

block.jpg

红色边框的 #header 节点在上面,
蓝色边框的 #main-box 节点在下面,
他们自上向下流动,注意上下两个块节点之间的上下外边距会自动合并,#header 节点的下边距是20像素,#main-box的上边距是10像素,那他们之间的边距不是总和的30像素,而是重叠后的最大边距20像素。

#a,#b,#c,#d 四个绿色边框的兄弟节点也是自上向下流动的,不论他们是多大的宽度,始终占据独立的一行。
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 18:31:54 | 显示全部楼层

块节点如果在CSS的float属性中指定浮动属性, 那么他会脱离默认的垂直向下的显示流,向左或向右横向浮动(这样就可以水平布局块节点了) 我们把a节点向

块节点如果在CSS的float属性中指定浮动属性,
那么他会脱离默认的垂直向下的显示流,向左或向右横向浮动(这样就可以水平布局块节点了)

我们把a节点向右浮动看看效果,也就是在CSS代码中加上:

  1. div#a{  float:right; }
复制代码
完整源码如下:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流动的块节点" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <html>
  10. <head>
  11.         <title>Document</title>
  12.         <style type="text/css">
  13.                 div#header {
  14.                         border:red 1px solid;
  15.                         background:#cccccc;
  16.                         margin-bottom:20px;
  17.                 }
  18.                 div#main-box{
  19.                         border:blue 1px solid;
  20.                         margin-top:20px;
  21.                         padding:10px;
  22.                 }
  23.                
  24.                 div#main-box div{
  25.                         border:green 1px solid;
  26.                         width:100%;
  27.                         height:100px;
  28.                         overflow:hidden;//IE6下要加上这句
  29.                 }
  30.                
  31.                 div#main-box div#a{
  32.                         width:200px;
  33.                         height:150px;
  34.                         float:right;
  35.                 }
  36.         </style>
  37. </head>
  38. <body>
  39.         <div id="header"> 这是标题 </div>
  40.         <div id="main-box">
  41.                 <div id="a" >a </div>
  42.                 <div id="b" >b </div>
  43.                 <div id="c" >c </div>
  44.                 <div id="d" >d</div>
  45.         </div>
  46. </body>
  47. </html>         
  48. **/

  49. winform.show();   
  50. win.loopMessage();
复制代码
运行后的效果如下:
float-right.jpg

注意上图中的 #a 节点漂移到了页面的右侧,他脱离了原来的文档流,
而他后面的其他节点就完全当他不存在,继续自管自的从下向下流动,在一些浏览器中 #b #c 会显示在#a的后面,也就是 #a不但是浮动到了右侧也浮动到了他们的上面( 这时候可以通过指定左侧块节点的右边距 - 也就是 margin-right 避免重叠 )

注意 #a虽然是浮动的节点,但是他不会影响他前面的节点、以及他的父亲节点(这就象孙悟空逃不出如来佛的手掌心 ),
而对于他后面的节点,他无视他们的存在,

如果你希望 #c节点在 #a节点的下面,那么就要在 #c的CSS属性中加上 clear:right 清除右浮动,也就是不允许任何节点浮动到他的右侧,在上面的代码里加下下面的CSS代码:

  1. div#c{
  2.         clear:right;/*不允许其他节点浮动到他右边*/
  3. }
复制代码
修改以后运行网页,显示效果如下:
clear-right.jpg

其他清除浮动的方法:

也可以在浮动节点的父节点CSS中应用 diaplay:inline-block; 或设置 overflow(值为visible以外的值,IE6必须触发haslayout才能生效),position:absolute,float 等使父节点产生独立的包裹性以清除子节点的浮动影响。
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 18:31:57 | 显示全部楼层

内联节点默认是自左向右水平流动的,看一个示例代码:[code]import win.ui; /*DSG{{*/ var winform = ..win.fo

内联节点默认是自左向右水平流动的,看一个示例代码:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="自左向右流动的内联节点" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <!doctype html>
  10. <html>
  11. <head>
  12.         <title>Document</title>
  13.         <style type="text/css">
  14.                 div#header {
  15.                         border:red 1px solid;
  16.                         background:#cccccc;
  17.                         margin-bottom:20px;
  18.                 }
  19.                 div#main-box{
  20.                         border:blue 1px solid;
  21.                         margin-top:20px;
  22.                         padding:10px;
  23.                 }
  24.                
  25.                 div#main-box span{
  26.                         border:green 1px solid;
  27.                         width:50px;
  28.                         height:50px;
  29.                 }
  30.                
  31.                 span#a{
  32.                         width:50px;
  33.                         height:150px;   
  34.                 }  
  35.         </style>
  36. </head>
  37. <body>
  38.         <div id="header"> 这是标题 </div>
  39.         <div id="main-box">
  40.                 <span id="a" >a </span>
  41.                 <span id="b" >b </span>
  42.                 <span id="c" >c </span>
  43.                 <span id="d" >d</span>
  44.         </div>
  45. </body>
  46. </html>         
  47. **/

  48. winform.show();   
  49. win.loopMessage();
复制代码
显示效果如下:
inline.jpg

可以看到,内联节点 #a,#b #c #d 都是span,自左向右流动。
内联节点默认的是不能指定高度的(在IE6怪异模式下可以指定宽度),这称为内联块节点( display: inline-block )

内联节点也可以指定边框边距这些 - 如果是纯粹的inline(内联)节点垂直方向上高度有关的外观属性会受制于行距高度,而inline-block(内联块) 可以不受行距高度限制,而且内联节点也可以向左或向右浮动,常见的如文本环绕图片的效果就是使用浮动属性实现,示例如下:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="向各浮动的内联节点" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <!doctype html>
  10. <html>
  11. <head>
  12.         <title>Document</title>
  13.         <style type="text/css">
  14.                 div#header{
  15.                         /*rgb函数用于表示颜色,参数可以是百分比或0到255之间的数值*/
  16.                         background:rgb(255,122,122);
  17.                 }
  18.                 div#main-box{
  19.                         /*蓝色可以用 #0000FF表示,也可以用 rgb(0,0,255)表示,或简写为blue*/
  20.                         border:blue 1px solid;
  21.                         margin-top:20px;
  22.                         padding:10px;
  23.                         width:300px;
  24.                 }
  25.                
  26.                 div#main-box img{
  27.                         float:right;
  28.                 }
  29.         </style>
  30. </head>
  31. <body>
  32.         <div id="header"> 这是标题 </div>
  33.         <div id="main-box">
  34.                 <img src="http://bbs.aardio.com/static/image/common/logo.png" >
  35.                  aardio虽然小,但是支持的接口很丰富,可支持标准DLL的 stdcall,cdecl,thiscall,fastcall,regparm(n)  等调用约定,可以支持C++导出的类对象,可以支持com静态动态双接口,象VBS一样原生支持com对象。aardio是绿色软件,下载包不到7MB,不需要安装解压缩即可直接使用,双击打开下载的压缩包
  36.         </div>
  37. </body>
  38. </html>         
  39. **/

  40. winform.show();   
  41. win.loopMessage();
复制代码
显示效果如下:
float-img.jpg

可以看到 img 节点通过在CSS里指定 float:right; 向右浮动,然后本该水平流动的文本环绕在他周围。
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 20:42:45 | 显示全部楼层

CSS属性里批定 position:static,将按默认的文档流定位节点, 也就是前面几节讲的块节点自上向下流,而内联节点自左向右流动。 所以这是节点的默

CSS属性里批定 position:static,将按默认的文档流定位节点,
也就是前面几节讲的块节点自上向下流,而内联节点自左向右流动。
所以这是节点的默认position属性( 不指点position属性他的值默认就是 static )

看一个简单的源码。

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="按默认文档流定位( position:static )" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <html>
  10. <head>  
  11.         <style type="text/css">
  12.                 div#main-box{
  13.                         border:blue 1px solid;
  14.                         margin-top:20px;
  15.                         padding:10px;
  16.                         width:300px;
  17.                 }
  18.                
  19.                 div#main-box div{
  20.                         border:green 1px solid;
  21.                         width:100%;
  22.                         height:100px;
  23.                 }
  24.                  
  25.         </style>
  26. </head>
  27. <body>  
  28.         <div id="main-box">
  29.                 <div id="a" >a </div>
  30.                 <div id="b" >b </div>
  31.                 <div id="c" >c </div>
  32.                 <div id="d" >d</div>
  33.         </div>
  34. </body>
  35. </html>         
  36. **/

  37. winform.show();   
  38. win.loopMessage();
复制代码
块节点自左上角开始,自上向下流动,显示效果如下:

static.png
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 20:52:53 | 显示全部楼层

如果在节点的CSS属性中指定 position:absolute; 则节点会脱离默认的文档流并使用绝对坐标定位。 绝对坐标指的是:left指定左坐标,top指

如果在节点的CSS属性中指定 position:absolute; 则节点会脱离默认的文档流并使用绝对坐标定位。
绝对坐标指的是:left指定左坐标,top指定顶坐标,right指定右坐标,bottom指定底坐标,如果仅指定right,top属性则是相对于最近的一个position为relative或absolute的父元素进行定位(默认为 body 节点,也就是相对于页面左上角定位)。

使用前面一节的示例代码,我们为 div#main-box 节点加上下面的CSS:

  1. div#main-box {
  2.   position:absolute;/*使用绝对定位*/
  3.   right:120px;/*右坐标为120像素*/
  4.   top:50px;/*顶坐标为50像素*/
  5. }
复制代码
修改后的完整源码如下:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="绝对定位( position:absolute )" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <html>
  10. <head>  
  11.         <style type="text/css">
  12.                 div#main-box{
  13.                         border:blue 1px solid;
  14.                         margin-top:20px;
  15.                         padding:10px;
  16.                         width:300px;
  17.                        
  18.                         position:absolute;/*使用绝对定位*/
  19.                         right:120px;/*右坐标为120像素*/
  20.                         top:50px;/*顶坐标为50像素*/
  21.                 }
  22.                
  23.                 div#main-box div{
  24.                         border:green 1px solid;
  25.                         width:100%;
  26.                         height:100px;
  27.                 }
  28.                  
  29.         </style>
  30. </head>
  31. <body>  
  32.         <div id="main-box">
  33.                 <div id="a" >a </div>
  34.                 <div id="b" >b </div>
  35.                 <div id="c" >c </div>
  36.                 <div id="d" >d</div>
  37.         </div>
  38. </body>
  39. </html>         
  40. **/

  41. winform.show();   
  42. win.loopMessage();
复制代码
显示效果如下:
abs.png

注意absolute并不一定是相对body的左上角定位,他会向上查找最近的一个position为relative或absolute的父元素作为坐标参考点( HTMLayout、IE怪异模式下overflow样式属性的值为 hidden |  auto | scroll 的父元素也会作为参考点 - 并且会隐藏溢出的绝对定位元素 )。请运行下面的示例代码:

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form(text="position定位测试";right=599;bottom=399;)
  4. /*}}*/

  5. import web.layout;
  6. wbLayout = web.layout(winform);

  7. wbLayout.html =/***
  8. <div id="a" style = "position:relative;margin:50px;border:1px red solid;width:300px;height:300px;" >
  9.         <div id="b" style = "position:absolute;left:40px;top:80px;border:1px blue solid;width:100px;height:100px;" >绝对定位</div>
  10. </div>
  11. ***/

  12. winform.show()
  13. win.loopMessage();

复制代码
运行后的效果如下:
abs.jpg
注意看  蓝色边框的#b 节点是相对红色边框 #a节点定位( #a节点的样式中定义了 position:relative ),并非是相对body节点。如果去掉 #a节点样式中的 position:relative 结果就不一样了。代码如下:

  1. <div id="a" style = "margin:50px;border:1px red solid;width:300px;height:300px;" >
  2.         <div id="b" style = "position:absolute;left:40px;top:80px;border:1px blue solid;width:100px;height:100px;" >绝对定位</div>
  3. </div>
复制代码
这时候#b节点就是相对body定位,运行后的效果如下:
abs2.jpg

position:absolute 还带来一个好处,使用 absolute定位的节点在样式中也可以使用 z-index 调整节点在Z轴上的顺序( 也就是节点的前后重叠顺序、或者叫Z序 ), 而 psition:static 的节点不支持 z-index。
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 21:00:21 | 显示全部楼层

节点的CSS属性里指定 position:relative 则使用相对定位, 相对定位与绝对坐标类似,可以使用 left,top,bottom,right 等

节点的CSS属性里指定 position:relative 则使用相对定位,
相对定位与绝对坐标类似,可以使用 left,top,bottom,right 等指定坐标,不同的是节点并不会脱离原来的文档流,坐标只是相对他原来应当显示的位置。

注意,所谓相对坐标 - 不是指相对于他父节点的坐标值。
一个节点在标准的文档流中,他默认应当显示在哪个位置 - 这就是相对坐标的参考值。

请看下面的示例:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=555;scroll=1;right=511;text="相对定位( position:relative )" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.form;
  7. var wb = web.form( winform  );

  8. wb.html = /**
  9. <html>
  10. <head>  
  11.         <style type="text/css">
  12.                 div#main-box{
  13.                         border:blue 1px solid;
  14.                         margin-top:20px;
  15.                         padding:10px;
  16.                         width:300px;
  17.                 }
  18.                
  19.                 div#main-box div{
  20.                         border:green 1px solid;
  21.                         width:100%;
  22.                         height:100px;
  23.                        
  24.                         position:relative ;/*使用相对定位*/
  25.                         right:20px;/*相对于自己原来的位置偏移20像素*/
  26.                         top:50px;/*相对于自己原来的位置偏移50像素*/
  27.                 }
  28.                  
  29.         </style>
  30. </head>
  31. <body>  
  32.         <div id="main-box">
  33.                 <div id="a" >a </div>
  34.                 <div id="b" >b </div>
  35.                 <div id="c" >c </div>
  36.                 <div id="d" >d</div>
  37.         </div>
  38. </body>
  39. </html>         
  40. **/

  41. winform.show();   
  42. win.loopMessage();
复制代码
运行代码后网页显示效果如下:

relative.png

节点首先按标准的文档流移动到他本应该显示的位置,然后再相对移动指定的坐标值。
相对坐标并不是相对父节点的坐标,而是相对他自己原来位置的坐标 - 这是容易混淆的一个地方。

如果需要相对父节点的进行绝对定位,那就要象上一节所讲的,首先把父节点的样式加上 position:relative; 然后把自己的样式加上 position:absolute;

评分

参与人数 1银币 +5 收起 理由
wangzexi + 5 这里的注释好像没修改,不过不影响阅读。

查看全部评分

再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-7-2 21:06:33 | 显示全部楼层

HTMLayout支持上面几节演示的标准的HTML布局方式。 另外HTMLayout还可以使用CSS属性flow自定义一个节点内部的布局方式- 即HTMLay

HTMLayout支持上面几节演示的标准的HTML布局方式。
另外HTMLayout还可以使用CSS属性flow自定义一个节点内部的布局方式- 即HTMLayout的布局更加强大和自由。

HTMLayout 垂直/水平布局
flow: vertical; /* 将容器内部变为垂直布局. (标准的布局模式) */
flow: horizontal; /* 将容器内部变为横向布局. */

110607ypcjpaycpmbc39m5.jpg

HTMLayout 垂直/水平流式布局
flow: v-flow;  /* 将容器内部变为垂直流式布局. */
flow: h-flow;  /* 将容器内部变为水平流式布局. */
110739ncyimmmnkic8m4n8.jpg

详细的请参考:HTMLayout flow布局样式

评分

参与人数 1银币 +60 收起 理由
aaucn + 60 谢谢

查看全部评分

再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

6

主题

64

帖子

393

积分

荣誉会员

Rank: 8Rank: 8

积分
393
发表于 2013-7-3 09:12:43 | 显示全部楼层

谢谢版主 辛苦了

谢谢版主
辛苦了
回复

使用道具 举报

12

主题

177

帖子

1087

积分

四级会员

Rank: 6Rank: 6

积分
1087
QQ
发表于 2013-7-3 16:50:07 | 显示全部楼层

感谢楼主分享,很好的教程。

感谢楼主分享,很好的教程。
再烦也别忘微笑,再急也要注意语调!
即使是不成熟的尝试,也胜于胎死腹中的策略。
回复

使用道具 举报

8

主题

97

帖子

650

积分

三级会员

Rank: 4

积分
650
发表于 2013-7-5 16:29:54 | 显示全部楼层

教程更详细了,多谢整理分享

教程更详细了,多谢整理分享
回复

使用道具 举报

0

主题

6

帖子

1316

积分

四级会员

Rank: 6Rank: 6

积分
1316
发表于 2013-7-17 17:27:18 | 显示全部楼层

记下先,要学习

记下先,要学习
回复

使用道具 举报

0

主题

4

帖子

18

积分

新手入门

Rank: 1

积分
18
发表于 2013-7-18 14:02:00 | 显示全部楼层

顶起,之后好好学习,希望有一天,我也能写出点东西

顶起,之后好好学习,希望有一天,我也能写出点东西
回复

使用道具 举报

0

主题

1

帖子

7

积分

新手入门

Rank: 1

积分
7
发表于 2013-7-24 15:04:21 | 显示全部楼层

详细,多谢楼主分享~~!!{:3_59:}{:3_59:}

详细,多谢楼主分享~~!!
回复

使用道具 举报

0

主题

10

帖子

81

积分

一级会员

Rank: 2

积分
81
发表于 2013-12-9 23:52:51 | 显示全部楼层

相当完整

相当完整
回复

使用道具 举报

0

主题

3

帖子

50

积分

一级会员

Rank: 2

积分
50
发表于 2013-12-20 14:12:44 | 显示全部楼层

多谢了,正在学习

多谢了,正在学习
回复

使用道具 举报

0

主题

31

帖子

336

积分

培训班

积分
336
QQ
发表于 2014-7-17 09:30:22 | 显示全部楼层

绝对好东西。收藏着。

绝对好东西。收藏着。
回复

使用道具 举报

0

主题

10

帖子

56

积分

一级会员

Rank: 2

积分
56
发表于 2015-2-5 16:18:39 | 显示全部楼层

值得学习!

值得学习!
回复

使用道具 举报

4

主题

26

帖子

218

积分

二级会员

Rank: 3Rank: 3

积分
218
QQ
发表于 2015-5-6 11:29:28 | 显示全部楼层

很详细的教程

很详细的教程
风动拂柳,发丝轻扬;叶落飒飒,飘零磅天。微微回首,
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-9-25 19:31 , Processed in 0.078125 second(s), 20 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表