Tutorial pengenalan reka letak halaman web CSS 13: menu lungsur turun dan pop timbul berbilang peringkat_Tutorial Asas

Menu drop-down dan pop-up adalah borang navigasi yang biasa digunakan dalam reka bentuk laman web Borang menu ini boleh menggunakan sepenuhnya ruang semasa pada halaman untuk menyembunyikan dan memaparkan lebih banyak kandungan, dan boleh mengklasifikasikan dan memaparkan kandungan secara munasabah borang navigasi yang sangat baik.
Menu lungsur turun atau pop timbul awal menggunakan lapisan tersembunyi atau div untuk menyembunyikan kandungan, dan bertindak balas kepada operasi pengguna melalui skrip JavaScript Pada masa ini, JavaScript+div atau elemen lain juga digunakan untuk membuat navigasi yang berbeza akan dibina menggunakan reka letak CSS standard, dan jadual tidak akan digunakan lagi untuk mencipta menu Menu lungsur turun ialah gabungan navigasi mendatar dan navigasi menegak yang disebutkan di atas, dan melalui banyak sokongan CSS untuk atribut, menu yang sama Anda tidak. lagi memerlukan beberapa div untuk bekerjasama antara satu sama lain Gunakan reka letak CSS untuk mencipta elemen menu lungsur turun. Anda juga boleh mengawal elemen ul atau li secara langsung pelaksanaan menu lungsur turun Banyak teknologi JavaScript digunakan Saya tidak akan memberikan terlalu banyak pemahaman yang komprehensif tentang sintaks teknologi JavaScript di sini atribut, lebih mudah dan lebih mudah untuk menggunakan elemen pada halaman web.先看一下目前所设计的导航的XHTML部分代码： 

 
    

文章 
        

 
            
• CSS教程
 
            
• DOM教程
 
            
• XML教程
 
            
• FLASH教程
 
        

 
    

 
    

参考 
        

 
            
• XHTML
 
            
• XML
 
            
• CSS
 
        

 
    

 
    

BLOG 
        

 
            
• 全部
 
            
• 网页技术
 
            
• UI技术
 
            
• FLASH技术
 
        

 
    

 
 

 
    
• 摇滚
 
    
• 纯音乐
 
    
• 古典金曲
 
    
• 电影原声
 

 

　　一个标准的采用ul结构的菜单构成,但与前面所不同的是,这里的代码结构涉及嵌套在第一层的li之间插入了另一个ul的结构，这就是多级菜单的一个代码构成模式,我们尝试编写一些简单的css样式让菜单变成所希望的横向式: 

ul { padding:0; Rand:0; list-style:none;} 
li { float:left; Breite: 100 Pixel;我们去掉ul中的所有圆点标识.list-style属性拥有其它更丰富的使用方法,将在后面的列表元素中重点了解. 
　　我们希望导航是横向的通过对li设置float:left属性, 将所有的li向左浮动, 形成了横向的布局,并尝试使用每个li的宽度为100px，继续编写代码： 


li ul { display:none; oben: 20px;}定义的ul元素都将受到这部分样式的定义。在这里使用top属性设置了整个ul的上边距,并使用display:none让这部分被了起来。Grundsätzlich können alle Elemente in CSS das Anzeigeattribut verwenden, um zu steuern, ob sie angezeigt oder ausgeblendet werden.


li:hover ul,li.over ul { display:block;}

li:hover ul definiert das ul-Element unter dem li-Element. Durch Kommas getrennt kann das Attribut display:block in beiden Fällen verwendet werden. Das Attribut display:none ist genau das Gegenteil, wenn es auf display:block gesetzt ist sein zugewiesenes Element wird angezeigt, und es wird auch in Blockform angezeigt. Wenn display:block nicht verwendet wird, wird das Element nur entsprechend der von seinem Inhalt eingenommenen Fläche angezeigt Wenn display:block ist Bei Verwendung bildet das Element selbst einen breiten Block. Als eigene Punktmarkierung ist diese Einstellung sehr praktisch, um Schaltflächen zu vergrößern.

Im Vorschaucode unten können Sie sehen, dass der und js-Code hinzugefügt wurde. Er wird verwendet, um die Anzeige des Dropdown-Menüs im IE-Browser zu steuern. Ursprünglich war der Satz li: hover ul ist Ja, aber die CSS-Unterstützung des IE ist noch unvollständig, sodass Sie JS zur Steuerung verwenden müssen.
Als nächstes versuchen wir, einige Stile zum Dropdown-Menü hinzuzufügen:

ul li a { display:block border:1px solid #ccc; margin-left: 3px; padding:none; color:#777;}
ul li a:hover { background-color:#ddd;}

Der Fokus des Tropfens -Down-Menüsteuerung des CSS-Layouts ist auf Elemente ein- und ausblenden eingestellt.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Dropdown- und mehrstufiges Popup-Men眉 www.aa25.cn</title> <style> ul { padding:0; margin:0; list-style:none;} li { float:left; width:100px;} ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;} ul li a:hover { background-color:#ddd;} li ul { display:none; top:20px;} li:hover ul,li.over ul { display:block;} </style> <ul id="nav"> <li> <a href=""></a>Artikel<ul> <li> <a href=""></a>CSS-Tutorial</li> <li> <a href=""></a>DOM-Tutorial</li> <li> <a href=""></a>XML-Tutorial</li> <li> <a href=""></a>FLASH-Tutorial</li> </ul> </li> <li> <a href=""></a>Referenz<ul> <li> <a href=""></a>XHTML</li> <li> <a href=""></a>XML</li> <li> <a href=""></a>CSS</li> </ul> </li> <li> <a href=""></a>BLOG<ul> <li> <a href=""></a>Alle</li> <li> <a href=""></a>Web-Technologie</li> <li> <a href=""></a>UI-Technologie</li> <li> <a href=""></a>FLASH-Technologie</li> </ul> </li> </ul> <ul> <li> <a href=""></a>Rock</li> <li> <a href=""></a>Musik pur</li> <li> <a href=""></a>Klassische Hits</li> <li> <a href=""></a>Film-Original-Soundtrack</li> </ul>