前往顾页
以后地位: 主页 > 收集编程 > Asp实例教程 >

DIV布局入门

时候:2018-12-28 13:42来源:知行网www.zhixing123.cn 编辑:麦田守望者

利用DIV布局已成为一种习惯,愈来愈感受到轻车熟路了。总结一下全部学习过程,把这个思路写出来,希望能对初学者有所开导。

传统的表格布局的特性

1.表格布局的底子是布局层和表示层稠浊在了一路,当我们只点窜一些简朴页面时,或感受没有甚么影响。但如果在哪一天,我们需求反复点窜成百上千的页面,问题就接踵而来了。假定因为某些启事我们需求把背景替代成玄色,边框变成1px黄色,笔墨变成白色,所有笔墨居中。利用表格布局的网页,可能就要一页一页的去点窜。

2.我们在利用表格布局的时候凡是会一个表格加一个表格嵌套的写下去,如许的代码烦复烦琐,保护费事,反复代码较多,增加了带宽的耗损和本钱。

3.表格布局因为表示情势的请求,常常会呈现表格的多重嵌套,而浏览器对表格的剖析是将一个表格全数全部下载剖析后才会闪现出来,过量的嵌套严峻影响网页翻开的速率。

利用WEB标准布局的上风

1.数据的多样显现。制作的网站可以调用不合的款式表适应不合的装备,做到内容与装备无关。

2.保持全部站点的视觉分歧性变得非常简朴,在网站改版点窜款式表便可以轻松改版。

3.因为布局清楚,网站数据的集成、更新和页面措置更加便利矫捷。

4.代码简练,对页面翻开速率有很年夜的改良。

5.关于二者的更多特性请看DIV布局和table布局的辨别 。

DIV布局入门知识

刚开端的时候了解布局和表示的不合的地方可能很坚苦,特别是初学的时候不习惯于思虑文档的语义布局时。当布局和表示分离后,用CSS文档来节制表示就是很容易的一件事了。实际上讲,我们应当用一个HTML文档来保存内容与布局,用一个CSS文档来节制全部文档的表示。笼统点说,内容可以了解成最根本层,然后是附加上去布局层和表示层,最后再给他们加上“行动”,如许一个根基的网站页面就布局完成了。下面别离说下内容、布局、表示和行动的观点。

1.内容:内容就是页面实际要传达的真正信息,可以包含数据、文档或图片等。重视这里夸大的“真正”,是指纯粹的数据信息本身。比如一个不包含任何帮助的信息,比如导航菜单、装潢性图片、完整没有颠末排版的古诗等。举个例子:我的博客的导航菜单“首页,SEO专题,WEB标准专题,关于我”些就是属于真正要传达的信息,这就是所谓的“内容”。

2.布局(Structure):我们可以看到下面的文本菜单是不颠末排版的随便安排的,让人难以浏览和了解,我们必须给它格局化一下。比如我们看到很多古诗凡是有题目、作者、章、节、段落和列表等外容,所有这些就是页面的布局。布局使页面内容更加具有逻辑性和易用性。

3.表示(Presentation):我们固然定义了布局,但是内容还是本来的款式没有改变,比方导航的字体没有变年夜,导航也没有被页粳没有任何润色。所有这些用来改变内容表面的东西,我们称之为“表示”。下面的图片就是对下面的内容文本用表示措置过后的结果:
关于“表现”的范例图片

4.行动(Behavior):行动就是对内容的交互及操纵结果。比方,我们最熟谙不过的JavaScript。利用JavaScript我们可使内容动起来,可以判定一些表单提交,可以呼应读者的一些操纵等。我们在上彀经常常碰到的留言版像这类行动都会用到行动。

小提示:网页标准其实不是完整不利用表格

在我刚打仗网页标定时,我进入了一个误区,那就是在布局网站时完整不再利用table标签。后来在碰到一些数据表时,比如公司员工联系表,产品与型号对应表等,发明在这个时候表格非常好用。园子想提示年夜家,对表格型数据,还是应当利用table。在HTML和XHTML里,表格不但仅是行(row)和单位格(cell),另有很多其他元素,应用好这些元素,你便可以更好的设想出有亲合力的表格布局。

------分开线----------------------------
标签(Tag):DIV布局
------分开线----------------------------
保举内容
猜你感兴趣