BUSINESS 个 第5章Div+CSS布局技术 主讲人：刘秦然 長春工堂大学 CCUT 经济管理学院 CHANGCHUN UNIVERSITY OF TECHNOLOGY
内容概览 iD布局理念 2CSS盒模型 3盒子的定位 盒子的浮动 5CSS常用布局样式 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
内 容 概 览 Div布局理念 CSS盒模型 盒子的定位 盒子的浮动 CSS常用布局样式
51DV布局理念 5.1.1Div布局页面的优点 传统的HM标签中,既有控制结构的标签(如< title>标 签和<p>标签),又有控制表现的标签(如<font>标签和<b〉 标签),还有本意用于结构后来被滥用于控制表现的标签 (如<h1>标签和< table标签)。页面的整个结构标签与表现 标签混合在一起。 相对于其他HTM继承而来的元素,Div标签的特性就是它 是一种块级元素,更容易被CSS代码控制样式, 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
5.1.1 Div布局页面的优点 传统的HTML标签中，既有控制结构的标签（如<title>标 签和<p>标签），又有控制表现的标签（如<font>标签和<b> 标签），还有本意用于结构后来被滥用于控制表现的标签 （如<h1>标签和<table>标签）。页面的整个结构标签与表现 标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是它 是一种块级元素，更容易被CSS代码控制样式。 5.1 Div布局理念
51Dv布局理念 5.1.2使用嵌套的Div实现页面排版 Diⅴ标签是可以被嵌套的,这种嵌套的Div主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。 【演练5-1】未嵌套的Div容器 【演练5-2】嵌套的Div容器。 top container mailbox sidebox footer footer 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
5.1.2 使用嵌套的Div实现页面排版 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。 【演练 5-1】未嵌套的Div容器。 【演练 5-2】嵌套的Div容器 。 5.1 Div布局理念
51Dv布局理念 演练5-1】未嵌套的Div容器。 <body> < diy id="top">此处显示id"tp"的内容</div> < diy id="main">此处显示id"nain”的内容</div> < div id=" footer">此处显示id" footer"的内容</div> </body> 演练5-2】嵌套的Div容器。 <body> <div id=container> < div id="top">此处显示id"top”的内容</div> <div id="main"> < div id=" mailbox”>此处显示id" mailbox”的内容</div> < diy id=" sidebox">此处显示id" sideroκ"的内容</div> </div> < div id=" footer">此处显示id" footer"的内容</div> </div> </body> 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
【演练 5-1】未嵌套的Div容器。 5.1 Div布局理念 【演练 5-2】嵌套的Div容器