Tutorial contoh reka letak standard web, gunakan kedudukan untuk menyelesaikan susun atur CSS_CSS/HTML yang kompleks dengan mudah-tutorial css-php.cn

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

WBOY

Lepaskan： 2016-05-16 12:12:30

asal

1534 orang telah melayarinya

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>

model
🎜>

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