Web前端开发实例教程——HTML5 CSS3 JavaScript 第9章 Div+CSS布局页面.pptVIP

第9章 Div+CSS布局页面 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 9.1 Div+CSS布局理念 9.1.1 认识Div+CSS布局 采用Div+CSS布局方式的优点如下： ? Div用于搭建网站结构，CSS用于创建网站表现，将表现与内容分离。 ? 缩短了网站的改版时间。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 使提高搜索引擎对网页的索引效率。 ? 用户可以将许多网页的风格格式同时更新。 9.1 Div+CSS布局理念 9.1.2 正确理解Web标准 1．表格布局的思维模式 初学者很容易认为Div+CSS布局就是将原来使用表格的地方用Div来代替，原来是表格嵌套，现在是Div嵌套，使用这种思维模式进行设计其效果并不理想，意义也不大。 2．标签的使用 HTML标签是用来定义结构的，不是用来实现“表现”的。 3．CSS与ID 在对页面进行布局时，不需要为每个元素都定义一个ID，并且不是每段内容都要用div标签进行布局，完全可以使用p标签加以代替。 9.1 Div+CSS布局理念 9.1.3 将页面用Div分块 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 【例9-1】未嵌套的Div容器，本例文件的Div布局效果如图9-1