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

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

WBOYasal: 2016-05-16 12:12:301481semak imbas

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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Petua CSS_CSS/HTMLArtikel seterusnya：Petua CSS_CSS/HTML

Artikel berkaitan

Lihat lagi