管理资源吧首页>>>教程>>>编程>>>CSS/HTML教程>>>

布局遇到的问题非常不错的见解

　　前言

　　还未等到下一代WEB开发技术RIA技术成熟之前,当然还得与HTML作斗争。前段时间《网站重构》炒得挺热，

　　这些都是进步，的确给我们新的思想。在这里总结一些开发中的点滴经验。

　　布局

　　1、上下左右布局

　　刚开始学制作页面，用的是MM的DW软件，可视化，让更多人学会网页制作。

　　还记得当初做页面用的还是DW,一个朋友问过我这一样一句话:"做网页表格多还是用层多，有什么区别?"。

　　我告诉他其实DW中用布局-布局表格，很快画出整个页面的框架, 然后一步步细化。做页面是挺快的事情,建议用表格，用层不好控制位置。

　　现在想起来真是有点误导的成份。哈，不过也许，进步需要一个过程。

　　《网站重构》春风吹来，用层进行页面布局的确给予我们开发带来了新的思想。

　　优点:

　　页面更清晰，代码量减少;

　　CSS的应用更广泛。

　　上下排,分层清晰,代码demo:

　　</div>

　　</div>

　　</div>

　　左右排，可以用绝对定位

　　#head{

　　position:absolute

　　top;10px;

　　left:200px;

　　}

　　</div>

　　2、DIV中的尽量少嵌套DIV，可用<p><span>

　　3、用padding控制层之间的分隔

　　<div>

　　</div>

　　</div>

　　4、用border制作结构之间的分隔线

　　</div>

　　5、可以用CSS的少用图片

　　页面布局demo（可查看源码，比以往TABLE布局的清晰多了）：

　　http://davidblog.blogdriver.com/davidblog/inc/demo_div.jpg

　　form

　　1、form的margin以及padding

　　以往在页面中插入一个表单时,总是觉得margin,padding默认不为0，有时会影响页面的布局.

　　可以用CSS将其设加0

　　form{

　　margin:0 0 0 0px;

　　padding:0 0 0 0px;

　　}

　　同样p标记或其它标记你也可以定义.

　　2、select

　　optgroup的应用

　　3、为checkbox或radio加上label

　　4、button

　　前一个项目用的是图片的button。逐渐发觉应用中的缺陷。

　　建议还是用CSS美化。

　　其实CSS可以实现更美观的button

　　table

　　该用table还是得用table的。table 始终有他优胜的一面。

　　例如一些数据显示的GRID或结构比较统一的,分行分列的布局.

　　table 相关技巧

　　CSS Expressions的应用

　　用CSS应用可减少代码的编写

　　1、table 鼠标事件

　　<style>

　　tr{

　　background-color:expression((this.rowIndex%2==0)?"#e5e5e5":"#e5e5e5");

　　ryo:expression(

　　onmouseover=function()

　　{this.style.backgroundColor='#ffffff'},

　　onmouseout=function()

　　{this.style.backgroundColor='#e5e5e5'}

　　)

　　}

　　</style>

　　2、

　　width:expression{document.body.clientWidth<800 ? "760" : "1003"}

　　值得留意的标记

　　<menu>

　　</menu>

　　<ul>

　　<li>

　　<dd>

　　<tt>

　　<u>

　　<legend>Health information:</legend>

　　Height <input type="text" size="3" />

　　Weight <input type="text" size="3" />

　　</fieldset>

　　<sup>superscript</sup>

教程首页更多教程

布局遇到的问题 非常不错的见解

布局遇到的问题非常不错的见解