2.4.4 CSS+DIV：模块化、结构化设计 HTML

模块化设计要求相对封闭独立性、可重复性、可修改性、统一性等 

结构化设计的意思是你需要分析网站的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 

仔细分析和规划你的页面结构，你可能得到类似这样的几块：

 标志和站点名称 

主页面内容 

站点导航(主菜单) 

子菜单 

搜索框

功能区(例如购物车、收银台) 

页脚(版权和有关法律声明) 

……

我们通常采用DIV元素来将这些结构定义出来，例如：

 　　＜div id=“header”＞＜/div＞

 　　＜div id=“content”＞＜/div＞

 　　＜div id=“globalnav”＞＜/div＞

 　　＜div id=“subnav”＞＜/div＞

 　　＜div id=“search”＞＜/div＞

 　　＜div id=“shop”＞＜/div＞

 　　＜div id=“footer”＞＜/div＞ 

起类似作用的还有span,通常与类选择符、ID选择符一起使用

例：新浪

新浪DIV示例

<DIV id=page><!--XAD_STARTX--><!--_SINA_ADS_BEGIN_-->

      <DIV class=logonav><!-- logo begin -->

      <DIV class=topads><!-- 轮播通栏 begin -->

      <DIV class=Part id=PartA><!-- left begin -->

                <DIV class=left><!-- 多层文字链 begin -->

                <DIV class=rightbox><!-- 搜索 begin -->

      <DIV class=Part id=PartB><!-- left begin -->

      <DIV class=Part id=PartC><!-- left begin -->

      <DIV class=Part id=PartD><!-- left begin -->

      <DIV class=Part id=PartE><!-- left begin -->

      <DIV class=Part id=PartF><!-- left begin -->

      <DIV class=Part id=PartG><!-- left begin -->

      <DIV class=Part id=PartH><!-- left begin -->

      <DIV class=Part id=PartI><!-- left begin -->

      <DIV class=cityUnion>

      <DIV id=footer align=center>

新浪样式表部分规则:导航栏(主莱单)

.logonav {

BORDER-RIGHT: #e0e0e0 1px solid; BORDER-TOP: #e0e0e0 1px; BACKGROUND: url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) #f9f9f9 repeat-x 0px -400px; MARGIN-BOTTOM: 8px; OVERFLOW: hidden; BORDER-LEFT: #e0e0e0 1px solid; BORDER-BOTTOM: #e0e0e0 1px solid; POSITION: relative; HEIGHT: 85px

}

.logo {

LEFT: 10px; WIDTH: 145px; POSITION: absolute; TOP: 0px; HEIGHT: 52px

}

.logo H1 {

LEFT: 13px; OVERFLOW: hidden; WIDTH: 117px; POSITION: absolute; TOP: 10px; HEIGHT: 42px

}

.weather {

Z-INDEX: 98; LEFT: 6px; OVERFLOW: hidden; POSITION: absolute; TOP: 57px; HEIGHT: 20px

.nav {

RIGHT: 0px; OVERFLOW: hidden; WIDTH: 790px; POSITION: absolute; TOP: 0px; HEIGHT: 85px}

.nav_2 {

FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 13px; _display: inline-block}

.nav_3 {

FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 13px; _display: inline-block}

.nav_2 {

DISPLAY: inline; BACKGROUND: url(http://i0.sinaimg.cn/dy/deco/2008/0416/sinahome_0803_ws_002_new.gif) no-repeat 106px -287px; MARGIN-LEFT: 3px; WIDTH: 107px}

.nav_3 {

WIDTH: 125px}

.nav UL {

CLEAR: both; HEIGHT: 23px}

.nav LI {

PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: url(http://i0.sinaimg.cn/dy/deco/2008/0416/sinahome_0803_ws_002_new.gif) no-repeat 0px -250px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: -1px; LINE-HEIGHT: 14px; PADDING-TOP: 0px; TEXT-ALIGN: center}

.nav A {

COLOR: #000; TEXT-DECORATION: none}

.nav A:visited {

COLOR: #000; TEXT-DECORATION: none}

.nav A:hover {

COLOR: #c00; TEXT-DECORATION: none}

.nav A:active {

COLOR: #c00; TEXT-DECORATION: none}

新浪导航莱单DIV

<DIV class=logonav><!-- logo begin -->

     <DIV class=logo>

<H1>

<SPAN class=logoBlk><IMG height=42 alt=新浪网 

src="新浪首页_files/sinahome_Logo.gif" width=117>

</SPAN>

</H1> 

   </DIV>

<!-- logo end -->

<!-- weather begin -->

  <DIV class=weather>

<SPAN class=weatherBlk><IFRAME marginWidth=0 marginHeight=0 

src="新浪首页_files/420101.htm" frameBorder=0 width=150 scrolling=no 

height=20></IFRAME>

</SPAN>

  </DIV>

<!-- weather end -->

<!--NAV_BEGIN-->

<DIV class=nav>

     <DIV class=nav_2>

     </DIV>

     <DIV class=nav_2>

     </DIV>

    <DIV class=nav_2>

     </DIV>

    <DIV class=nav_2>

    </DIV>

    <DIV class=nav_2>

    </DIV>

    <DIV class=nav_2>

    </DIV>

    <DIV class=nav_3>

    </DIV>

 </DIV>

 </DIV>