DIV CSS 布局定位实例菜单导航详解_网页选项ecid-优快云博客

本文详细介绍了如何使用Div和CSS进行布局控制，特别是针对头、身子、菜单和内容的布局。文章讲解了如何通过相对和绝对定位解决窗口大小变化时的变形问题，并探讨了Div+iframe的布局，利用CSS expression和JavaScript实现高度自适应。同时，提到了结合jQuery实现菜单的隐藏与内容区域的样式切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   为什么要用Div Css可以简单的作如下解释：

   当时创造WEB的那个人也发明了用TABLE布局，当TABLE布局泛滥之后，然后他说:我创造了WEB也毁了WEB，TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的，TABLE是表格,从来都不是用来布局用的,现在我们要使TABLE重新开始显示它自己的意义:表示表格数据.所以TABLE根本不应该用在网页布局上面.
    而且CSS+DIV具有以下特点和优势：

    优势：1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

         2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

         3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

         4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和

            主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

         5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。6、表现和结构分离，

           在团队开发中更容易分工合作而减少相互关联性。

1、基本框架搭建

基本框架由“头”和“身子”组成，“头”由class为header的Div填充，“身子”由id为toolAndContent的Div组成。

<div class="header"></div>
<div id=toolAndContent></div>

这样就组成了一个上下结构的页面，“头”和“身子”肯定还有许多复杂的部分，首先描绘“头”的出基本组成：

<div class="header">
	<div class="padder">
		<div class="nav">
		<div class="navLaftBg">
		<div class="navRightBg">
		<!-- 左侧菜单时打开 -->
		<div id=headTitle>	
		<DIV style="DISPLAY: none" id=blk1 class=blk>
		<DIV class=sList id=close1>
		<UL>							
		<LI><A href="#" οnclick='switchRole("1", "Management Subsystem")'>Management Subsystem</A> </LI>