零点起飞学HTML+CSS之网站布局.pptxVIP

第11章 网站布局如果想要制作出即漂亮，使用起来又方便的网站，那么首先把网站的布局做好是非常有必要的。网站布局，就是把网页中的文字、图像、表格、表单等诸多构成要素合理的安排起来，使网站看起来更协调。一个网站布局的好坏直接影响网站的质量和网站的视觉效果。11.1 div标签网页的布局主要采用三种方式：表格、框架和div标签。div标签只是一个空标签，仅使用DIV是不能用来设计布局的，需要DIV+CSS来共同完成布局的设计。11.1.1 div标签在内容中的应用在网页内容中使用div标签可以用来定义网页内容中的区域。这里将为div标签加上style属性，来做为示例解说。style属性是用来设置网页内容的内部样式的。div标签是双标签。其语法结构如下所示。div style= 网页内容/div11.1.2 div嵌套div标签也可以进行嵌套。使用嵌套可以更好的进行布局。其语法结构如下所示。div div 被嵌套的内容 /div /div 11.1.3 定义浮动框架浮动框架是指利用样式使div标签定义出来的框架浮动在页面上。可以通过style样式中的float属性来进行设置。它有三个属性值：left、right和none。其语法结构如下所示。div style=float:left/none/right; /div11.1.4 定义左右结构的框架定义左右结构的框架，也就是在一个大的div标签中嵌套两个小的div标签。然后再通过float属性把这两个小的div标签浮动在左右两边。其语法结构如下所示。div div style=float:left;/div div style=float:right;/div /div 11.1.5 定义横向结构的框架横向结构的框架是指在页面上几个嵌套的小框架依次横向排列在大框架中。它和左右结构的框架有些相似，都是利用同样的原理来做出来的。只是它的几个框架都是左或右浮动，依次横向排列在大框架中。11.1.6 定义纵向结构的框架纵向结构的框架和横向结构的框架有些相似。知识纵向结构的框架是在垂直线上分割出来的框架。它是在横向结构框架的基础上多加了一个clear属性，使框架纵向排列。其语法结构如下所示。divdiv style= float:left;clear:both;/div div style=clear:both;/div /div11.2 本章小结本章主要学习了设计布局的另一种方法DIV+CSS。主要讲解了div标签的各种使用方法。并且学习了CSS布局中的style属性。div标签需要与CSS配合才能更好的实现网站的布局。通过本章的学习，读者可以了解到使用DIV +CSS是比较好的设计布局的方法。在以后的网站设计中，会大量用到这种布局方法。