2.4.4 CSS+DIV：模塊化、結(jié)構(gòu)化設(shè)計(jì) HTML

模塊化設(shè)計(jì)要求相對(duì)封閉獨(dú)立性、可重復(fù)性、可修改性、統(tǒng)一性等 

結(jié)構(gòu)化設(shè)計(jì)的意思是你需要分析網(wǎng)站的內(nèi)容塊，以及每塊內(nèi)容服務(wù)的目的，然后再根據(jù)這些內(nèi)容目的建立起相應(yīng)的HTML結(jié)構(gòu)。 

仔細(xì)分析和規(guī)劃你的頁(yè)面結(jié)構(gòu)，你可能得到類似這樣的幾塊：

 標(biāo)志和站點(diǎn)名稱 

主頁(yè)面內(nèi)容 

站點(diǎn)導(dǎo)航(主菜單) 

子菜單 

搜索框

功能區(qū)(例如購(gòu)物車、收銀臺(tái)) 

頁(yè)腳(版權(quán)和有關(guān)法律聲明) 

……

我們通常采用DIV元素來將這些結(jié)構(gòu)定義出來，例如：

 　?。糳iv id=“header”＞＜/div＞

 　?。糳iv id=“content”＞＜/div＞

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

 　?。糳iv id=“subnav”＞＜/div＞

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

 　?。糳iv id=“shop”＞＜/div＞

 　?。糳iv 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>

新浪樣式表部分規(guī)則:導(dǎo)航欄(主萊單)

.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}

新浪導(dǎo)航萊單DIV

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

     <DIV class=logo>

<H1>

<SPAN class=logoBlk><IMG height=42 alt=新浪網(wǎng) 

src="新浪首頁(yè)_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="新浪首頁(yè)_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>