DIV排版精髓WEB标准排版总结

本文提供了一系列网页布局的设计建议,包括成块布局、元素居中、图片处理、浮动使用、清除浮动等技巧,帮助开发者掌握更高效的网页布局方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1)成块布局,尽量不要拆散一块一块的内容,用DIV保持整体,DIV外层非色彩延伸的,使用固定宽度1003,否则使用100%后,里面再包含1003固定宽度,布局的时候能成一直线的保持一直(垂直和水平尽量保持直线型)
2)要居中,使用最外层DIV左右边界自动;
3)界面图片用背景表示,按钮、标志用图片,每个图片加上ALT说明;
4)左右使用浮动,三栏使用两个左浮动,或右浮动加一个右或左浮动。
5)DIV垂直无法自动张开,使用清除浮动后,无法解决就使用办法一:1%高度,溢出使用自动或inherit,没有办法的时候使用隐藏 ;办法2:在撑开表格的最底层插入一个DIV,行高字大小都为0px,清除两者,显示为块。
6)!important;使用之来解决IE与FF兼容
7) 图片与DIV裂开的解决思路:1.把DIV和IMG的标签放成一行 2.删除无用的CSS样式 3.改变布局策略
8)图片在DIV中混排的时候,如果图片使用浮动之类的后,就没有办法自动撑开DIV的,这个时候可以把DIV高度调整为和图片一样的高。注意,调DIV高度的时候要合适,太小了在IE中可能显示很好,但是在FF中有可能显示只显示一半的。
9)定义全局样式和局部样式的方法。ID样式不允许重复使用,要在同一个页面中重复使用一个样式请使用CLASS定义
10)多个形状相似、列表式的内容使用LI  
11)UL 、Form、P等标签默认有边界和填充之类的,如果不要的话要定义为0即可。
12)新闻日期的排版请在LI中使用span标签,把日期放到其中,定义SPAN右浮动,然后再把SPAN代码提到新闻前面。注意li之中不允许有<div>标签。
13)li前面的小图标请使用背景不重复来定位,因为背景有定位功能。
14)绝对定位的时候把要定位的DIV提到BODY后面,所有正文代码前面,然后再调整置入来定位,要注意有其他的办法的时候尽量不要采用绝对定位,绝对定位并不是完美的布局方法。页面内容是靠左边或者是右边的话使用绝对定位倒可以,如果是居中的话采用绝对定位就会出现分辨率大的时候的移位
15)无法定位的时候请尝试清除浮动。
16)产品排列的时候样式尽量采用CLASS,这样有利于复制。简单的图片列表可以使用LI,复杂的、内容很多很难排版的就使用DIV,我们的原则是:用最少的DIV来达到最好的效果。每个产品是一个单独的LI或者DIV封装,这样利于复制,每行又用一个大的DIV封装。
17)如果LI中有图标,又有下虚线的时候,不能使用LI定义两个背景,单独定义一个LI的背景也不显示,这样的解决的办法是在文字前后加<SPAN>标签,定义图标到<SPAN>中,虚线定义到LI中。这个时候如果也有日期的话,那么他们的浮动要注意了,文字带图标就左浮动,日期右浮动,按照常规排列代码。只有其中一个的时候就要反常规放置,在右边的,放到左边最前面。如果出现LI列表裂开,请尝试清除浮动和把显示设置为块。
18)页内的描点的使用:先插入描点,命名好。然后在需要链接的地址用#号加上命名的名字。例如:我命名的描点:header,那么在需要点击返回头部的地方做链接地址:#hearder

19)内页的布局主要是注意CSS的应用不能影响到首页,我们可以采用双CSS的方法,但是要注意不要每个页面都新建一个CSS样式啊,那样就很多样式表了,除非你的内页没有一点类同的地方。一般内页有类同的地方,就和其他内页那样共用一个样式,内页如果相同的话可以使用模板的。建议内页的样式加一个前缀,例如首页是main,简介就可以ab_main这样就不会覆盖了。做的时候先备份CSS样式表。放到垃圾桶中先。做到新闻的时候就可以考虑采用模板了。

20)页面中使用边界的时候,IE和FF解释的结果有可能不一样,有可能IE中边界很远,FF中边界很小,这个时候可以把边界改为同值填充就可以解决。
XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: Header 1) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very. very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very 2) Navigation here. long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler 3) More stuff here. very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very Here it goes the footer
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值