Tutorial Pengenalan Reka Letak Halaman Web CSS 12: Menu Navigasi Menegak_Tutorial Asas

WBOY

Lepaskan： 2016-05-16 12:07:06

asal

2354 orang telah melayarinya

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！

如图所示的效果，我们先看一下代码结构：

CSS

webUI

DOM

XHTML

Seperti yang dapat dilihat daripada di atas, kod mendatar bahagian XHTML kod kali ini kami tidak terus menggunakan tag ul dan li, sebenarnya, sistem navigasi menegak boleh direalisasikan sepenuhnya dengan terus menggunakan elemen ul, tetapi Di tempat yang indah ini, kami berharap dapat menyediakan lebih banyak cara berbeza untuk menunjukkan fleksibiliti dan kemudahan reka bentuk CSS supaya dapat memberi inspirasi kepada lebih banyak idea reka bentuk.
Format kali ini ialah div+h1+h2. Kami menggunakan tag div untuk menyediakan kawasan struktur navigasi. Dalam bidang ini, kami menggunakan h1 sebagai tajuk klasifikasi peringkat kedua, dan h2 sebagai butiran di bawah klasifikasi peringkat kedua. Dalam maksud XHTML, tag h1, h2, dan h3 sendiri mempunyai maksud pembahagian hierarki teks Menggunakan h1 dan h2 secara langsung untuk menyatakan perhubungan hierarki adalah berbeza daripada menambah id atau kelas kepada tag untuk mencipta perhubungan hierarki adalah lebih mudah dan lebih intuitif. Sangat sesuai untuk menggunakan h1 dan h2 di sini untuk menandakan tahap nama klasifikasi yang berbeza. Mari lihat reka bentuk kod css:

#nav { width:100px; border-style:solid; ># nav h1 { margin:0px; font-size:12px; font-family:Verdana; ># nav h2 { margin:0px; padding: fon-size:12px; font-weight: normal; ;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

Bahagian kod css ini menggunakan kaedah penulisan yang dipermudahkan jika anda tidak memahami maksud mana-mana ayat, anda boleh menukarnya dalam Dreamweaver Open dan pilih helaian gaya edit untuk melihat item yang mana ia adalah. Saya percaya bahawa selepas beberapa latihan, anda boleh memahami sepenuhnya kod ini, yang bermaksud anda selangkah lebih dekat untuk menjadi seorang pakar.
Anda mungkin perasan bahawa dalam contoh ini, sempadan #nav hanya mempunyai satu piksel untuk bahagian bawah kiri dan kanan dan tiada bahagian atas, tetapi dalam gaya h1, piksel atas bahagian atas ditetapkan? kenapa ni? Oleh kerana terdapat garisan mendatar di bahagian atas gaya h1, jika terdapat satu lagi garisan mendatar di bahagian atas nav, ia akan berkembang menjadi dua, dan hasilnya akan menjadi dua piksel tinggi.
Baiklah, anda boleh pratonton kesan lengkap:

Menu navigasi menegak
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>

</title>
<style> 
#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} 
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} 
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} 
#nav h2 a { color:#666666; text-decoration:none;} 
#nav h2 a:hover { color:#999999; text-decoration:underline;}

</style>
    CSS
        <div id="nav">
<h1>Bermula dengan css</h1>
<h2>
        <a href="#"></a>css lanjutan</h2>
<h2>
        <a href="#"></a>css lanjutan</h2>
<h2>
    <a href="#">webUI</a>
        </h2>
<h1>Pengetahuan teori</h1>
<h2>
        <a href="#"></a>Aplikasi praktikal</h2>
<h2>
        <a href="#"></a>Petua Lanjutan</h2>
<h2>
    <a href="#">DOM</a>
        </h2>
<h1>Bermula dengan DOM</h1>
<h2>
        <a href="#"></a>Aplikasi DOM</h2>
<h2>
        <a href="#"></a>DOM dan Penyemak Imbas</h2>
<h2>
    <a href="#">XHTML</a>
        </h2>
<h1>Manual Rujukan</h1>
<h2>
        <a href="#"></a>Forum Komunikasi</h2>
<h2>
<a href="#">
</a>
</h2>
</div>

[Ctrl+A untuk memilih semua Nota: