CSS布局与美化.pptVIP

第7章 CSS布局与美化 赵 锋 frashman@ Teaching Objectives 通过本章学习，应该掌握以下内容： 理解CSS定位及Div布局理念 理解CSS盒模型理论 掌握DIV+CSS常见布局设计技巧 利用CSS美化网页元素 7.1 CSS定位与DIV布局 CSS布局采用Div来定位，通过Div的margin（边界）、padding（填充）、border（边框）等属性来控制板块的间距 7.1.1 创建DIV标签 7.1.2 Float浮动属性 7.1.3 Position定位属性 DIV标签 Div（division）是一个区块容器标签，即div与/div之间相当于是一个容器，可以容纳段落、标题、图像、动画等各种HTML元素 Div标签是整个CSS布局的最基本技术 在代码中通过CSS对div块的控制，完成了一个宽400px、高200px、背景色为#CCFFFF的区块，并对文字效果进行了相应的设置，在IE中的浏览效果如图7-1所示 【7_1.html】 注意：DOCTYPE声明、名字空间声明及定义语言编码的相关代码在教材以后的代码中做了省略处理 在Dreamweaver中使用【属性】面板设置Div标签的属性 在实际应用过程中，Div在有些地方的确不如表格方便 ，主要是布局思维方式与传统表格布局不一样 如所有辅助图片一般都用背景来实现 float浮动属性