web標準布局執行個體教程，用定位輕鬆解決CSS複雜布局_CSS/HTML
來源：互聯網
上載者：User
我相信來經典論壇學習標準的朋友，99%都不是為了進W3C，不是為了成為專業的研究人員，那麼大家來的目的是什麼呢？很簡單，其實都是想通過標準的學習讓自己多增加一項技能而已，讓自己在找工作的時候不會在被“需要熟練掌握web標準”而難倒，在下面的執行個體中xhtml並沒有什麼語意，文章的目的只是讓然大家能更好的掌握CSS中相對、絕對位置的用法(新手問此問題的確實很多)，及如何有效結合背景，實現比較複雜的布局。不足之處還望前輩們能指點一二,感謝！
--------------------------------------------------第一步-------------------------------------------
先來隨便設計一個布局複雜點的(布局不規整)demo:
document.body.clientWidth-300) {this.height=(document.body.clientWidth-300)*this.height/this.width;this.width=document.body.clientWidth-300}" border=0>
--------------------------------------------------第二步-------------------------------------------
我們來進行代碼的編寫
model
------------------------------------------------------------------------------>這個菜單是怎麼工作的呢？
一張圖是怎麼能實現背景切換呢？
呵呵，其實也很簡單?大家知道背景圖象中有：映像橫縱座標位置設定,此例子也正是運用這個特性，將擁有不同ID的連結A的背景進行位移，以達到背景切換的目的。
-----------------------------------------------實際頁面效果：---------------------------------------
<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(http://www.okrmt.com/demo7.8/images/allbg.jpg); text-align:center; } #main{ margin:0 auto; position:relative; width:780px; height:659px; background:url(http://www.okrmt.com/demo7.8/images/model.jpg) no-repeat; } #main #menu{ position:absolute; right:12px; width:354px; height:115px; background:url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; } #main #menu a,#main #menu a#page{ 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(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; } #main #menu a#page:hover{ background-position: 0px -115px; } #main #menu a#about:hover{ background-position: -112px -115px; } #main #menu a#services:hover{ background-position: -192px -115px; } #main #menu a#contacts:hover{ background-position: -262px -115px; } #main h1{ position:absolute; top:0;left:1px; width:151px; height:56px; background:url(http://www.okrmt.com/demo7.8/images/logo.jpg) no-repeat; } #main h2{ position:absolute; top:133px; right:7px; width:404px; height:190px; background:url(http://www.okrmt.com/demo7.8/images/about.gif) no-repeat; } #main h6{ position:absolute; bottom:75px; right:10px; width:265px; height:44px; background:url(http://www.okrmt.com/demo7.8/images/cars-logo.gif) no-repeat; } </style> </hEAD> <BODY> <h1></h1> <h2></h2> <h6></h6> </bODY> </hTML>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
好了，這次的執行個體教程就結束了，希望對大家以後進行xhtml網頁的設計，布局能有所協助！再見.
