Tutorial contoh reka letak standard web, gunakan kedudukan untuk menyelesaikan susun atur CSS_CSS/HTML yang kompleks dengan mudah

Saya percaya bahawa 99% daripada rakan yang datang ke forum klasik untuk mempelajari standard tidak akan menyertai W3C atau menjadi penyelidik profesional Jadi apakah tujuan semua orang datang? Ia sangat mudah. ​​Sebenarnya, saya hanya ingin menambah satu lagi kemahiran kepada diri saya melalui pembelajaran standard, supaya apabila saya mencari pekerjaan, saya tidak akan terpengaruh dengan "anda perlu mahir dalam standard web". contoh berikut, xhtml tidak Apakah semantik Tujuan artikel ini hanyalah untuk membolehkan semua orang lebih memahami penggunaan kedudukan relatif dan mutlak dalam CSS (memang terdapat ramai pemula yang bertanya soalan ini), dan bagaimana untuk menggabungkan latar belakang dengan berkesan untuk mencapai susun atur yang lebih kompleks.Saya harap senior-senior dapat memberi sedikit petunjuk kepada saya tentang kekurangan tersebut, terima kasih!

-------------------------------------------- ------ ------langkah pertama------------------------------------- ----- --

Pertama, mari kita reka bentuk demo dengan susun atur yang rumit (susun atur tidak teratur):


------ ---- ----------------------------------------Langkah 2---- -- ------------------------------------
Jom tulis kod
< HTML>


🎜>

------------------------------------------------------------------------------>这个菜单是怎么工作的呢？
一张图是怎么能实现背景切换呢？
呵呵，其实也很简单?大家知道背景图象中有：图像横纵坐标位置设置,此例子也正是运用这个特性，将拥有不同ID的链接A的背景进行偏移，以达到背景切换的目的。

------------------------------ --------------------Kesan halaman sebenar:--------------------------------------- ------ ----------

<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> <div id="main"> <div id="menu"> <a href="#" id="page" title="page"></a> <a href="#" id="about" title="about"></a> <a href="#" id="services" title="services"></a> <a href="#" id="contacts" title="contacts"></a> </div> <h1></h1> <h2></h2> <h6></h6> </div>