DIV CSS 佈局教程網

        我相信來經典論壇學習標准的朋友，99%都不是為了進W3C，不是為了成為專業的研究人員，那麼大家來的目的是什麼呢？很簡單，其實都是想通過標准的學習讓自己多增加一項技能而已，讓自己在找工作的時候不會在被“需要熟練掌握web標准”而難倒，在下面的實例中xhtml並沒有什麼語意，文章的目的只是讓然大家能更好的掌握CSS中相對、絕對定位的用法(新手問此問題的確實很多)，及如何有效的結合背景，實現比較復雜的布局。不足之處還望前輩們能指點一二,感謝！

第一步:

先來隨便設計一個布局復雜點的(布局不規整)demo:

第二步:

我們來進行代碼的編寫

＜HTML>

＜HEAD>

＜TITLE>model＜/TITLE>

＜META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

＜style>

html,body{

margin:0;

padding:0;

background:#A1A9B6 url(images/allbg.jpg);

text-align:center;

}

#main{

margin:0 auto;

position:relative; /*我是相對定位*/

width:780px;

height:659px;

background:url(images/model.jpg) no-repeat;

}

#main #menu{

position:absolute;

right:12px;

width:354px;

height:115px;

background:url(images/menu.gif) no-repeat;

}

#main #menu a#page,#main #menu a#about,#main #menu a#services,#main #menu a#contacts{

float:left;

width:112px;

height:30px;

}

#main #menu a#about{

width:80px;

height:55px;

}

#main #menu a#services{

width:70px;

height:80px;

}

#main #menu a#contacts{

width:80px;

height:115px;

}

#main #menu a:hover{

background: url(images/menu.gif) no-repeat;

}

#main #menu a#page:hover{

background-

1234下一頁