通过代码实例跟我学CSS样式单技术的应用实例（第6部分）——CSS+Div在项目中的综合应用示例二.doc

CSS+Div在项目中的综合应用示例二 1、一个典型的版面分栏结构的实现示例（拐角型网页布局） 2、页面结构分析 （1）分析最终的结构 上面我们定义了三个大的区域——三行，其中顶部区域分为Logo图片和导航图片两部分；中间为内容区域，同样也分为导航列表菜单项目小和信息内容区域两部分；最下面为版权信息区域。 按照我们想要的结果是让这三个大的区域等宽，并从上到下整齐地排列，然后在整个页面中居中对齐，为了方便控制，同样我们再把这三个大区域装进一个更大的区域中，这个更大的区域就是Wrapper——然后再将Wrapper区域放到body区域中。 （2）画出表示该结构的草图 Logo图像 包含图片的导航工具条 树形菜单项目 信息内容的显示区 版权信息显示区 3、利用Div标签实现页面排版的基本原理 （1）将页面用Div标签分块 （2）然后分别对这些Div标签定位 4、对应的HTML页面标签 （1）整个页面的一级划分 body div id=Wrapper div id=Header /div div id=leftListItem /div div id=Footer /div /div /body （2）实现顶部的导航工具条 body div id=Wrapper div id=Header div class=Logo a href=# img src=./images/logobg.gif/a /div div class=topNAV ul class=topNavList li a href=#img src=./images/topnavbg04.gifp开源大全/p/a /li li a href=#img src=./images/topnavbg01.gifp开源新闻/p/a /li li a href=#img src=./images/topnavbg02.gif p开源文档/p/a /li li a href=#img src=./images/topnavbg03.gif p游戏/p/a /li li a href=#img src=./images/topnavbg05.gif p项目索引/p/a /li li a href=#img src=./images/downloadCourse.gif p课件下载/p/a /li li a href=#img src=./images/bookInfo.gif p图书资料/p/a /li /ul /div /div div id=leftListItem /div div id=Footer /div /div /body 测试现在的状态 （3）实现中间的内容区 body div id=Wrapper div id=Header div class=Logo a href=# img src=./images/logobg.gif/a /div div class=topNAV ul class=topNavList li a href=#img src=./images/topnavbg04.gifp开源大全/p/a /li li a href=#img src=./images/topnavbg01.gifp开源新闻/p/a /li li a href=#img src=./images/topnavbg02.gif p开源文档/p/a /li li a href=#img src=./images/topnavbg03.gif p游戏/p/a /li li a href=#img src=./images/topnavbg05.gif p项目索引/p/a /li li a href=#img src=./images/downloadCourse.gif p课