-
blogbus模板系列教程5---table与div(2) - [博客大巴代码教程]
2008年04月26日
DIV
div表示层的意思,它可以被简单地理解为“一个盒子”,在这个盒子里,你可以自由地放入各种标签,并且还能统一控制盒子里各种标签的显示样式。上节教程中的代码的最后一句是:<div style="border:1px black solid;width:auto">我是层</div> 我们看到<div></div>是成对出现的,如果不加入 style="" 这一句的话,大家可以试着看看其显示效果。也就是说,style="" 中的内容是控制div的显示样式的。
再来仔细分析一下 style="" 里的内容:width:auto;border:1px black solid; 其中的width 和 border 分别表示的是div的宽度和边框属性,而宽度的属性值为 auto(自动),border的属性值为1px black solid(1个像素 颜色为黑色的实线)。为了使大家加深对于div属性的印象,我建议大家将这两个值分别设定为200px 和10px red solid,然后保存文件,看一下具体的显示效果。
下面再简单介绍一点div的其他属性:float,margin
float表示浮动的意思,其值可有right left,所谓的浮动,可以理解为div是靠左还是靠右。下面,我们试着改变一下上面提到的代码:
<div style="width:200px;border:10px red solid;float:right; ">这是一个层</div>
保存一下文件,看看显示效果。
margin表示的是div与其他对象的间距,具体的显示效果在这里就不多说了……
随机文章:
blogbus模板系列教程6---布局之div布局之路(1) 2008年04月26日blogbus模板系列教程6---布局之实战表格布局 2008年04月26日blogbus模板系列教程4---熟悉bus的模板(2) 2008年04月26日blogbus模板系列教程3---熟悉bus的模板(1) 2008年04月26日blogbus模板系列教程2---模板风格与布局 2008年04月26日
收藏到:Del.icio.us











评论
<div style="width:200px;border:10px red solid;float:center; ">
我也是刚来到BLOGBUS但不知道怎么设计,
搜遍了整个网络也没找到这么详细的解说、
真是谢谢你`
你的辛苦不会白费的。
我们支持你
谢谢