CSS+DIV布局教程.pptVIP

CSS+DIV布局 本节课的内容: 什么是布局 一列式布局 两列式布局 多列式布局 不规则布局 本节课目标： 掌握CSS+DIV布局 重点难点: 掌握CSS+DIV布局 什么是布局 所谓布局，英文名称叫做layouts，是指网页上不同功能分区的数量以及它们之间排列的位置和顺序。 一列式布局 整个网页一列到底部，不分左右两栏。如 两列式布局 网页主要部分分为左、右两个区域，分别放置不同的内容。多用于一般商业网站、博客等 多列式布局 网页主要部分分为左、中、右3个甚至更多的区域，分别放置不同的内容。多用于商业网站。 不规则布局 网页主要部分的各个区域不规则排列，多用于艺术、设计等类别网站 示例：使用CSS+DIV布局一个网站 （1）结构化你的HTML “结构，这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 （2）布局 你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。 每一个内容块都可以放在页面上任何地方 画出详细的布局图 结构如下 : 页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS 实训一 两列式布局 制作示例的网页 目标: 掌握使用CSS+DIV进行两列式布局 训练要点: 学会分析HTML的结构 CSS+DIV布局 实训2 三列式布局 制作如下网页 目标: 学会使用模型 学会三列式布局 训练要点: 使用训练1的模型 三列式布局 总结 本节课主要学习了CSS+DIV布局.学习了本节课,你应该能够使用CSS+DIV技术对你将要制作的网页进行布局 * *