hujung hadapan web
html tutorial
網(wǎng)站導(dǎo)航欄有下拉菜單，但是下拉菜單出現(xiàn)后會把下面的內(nèi)容頂下去，這個怎么辦？？？求大神_html/css_WEB-ITnose
網(wǎng)站導(dǎo)航欄有下拉菜單，但是下拉菜單出現(xiàn)后會把下面的內(nèi)容頂下去，這個怎么辦？？？求大神_html/css_WEB-ITnose
Jun 24, 2016 pm 12:26 PM
導(dǎo)航欄 下拉菜單 css定位
網(wǎng)站導(dǎo)航欄有下拉菜單，但是下拉菜單出現(xiàn)后會把下面的內(nèi)容頂下去，這個怎么辦？？？求大神回復(fù)討論(解決方案)
下拉層的css 加上position:absolute;z-index:999;
position:absolute 絕對定位，和上下文無關(guān)。
z-index:第幾層?，這個數(shù)要保證最大以覆蓋其它內(nèi)容。
下拉層的css 加上position:absolute;z-index:999;
position:absolute 絕對定位，和上下文無關(guān)。
z-index:第幾層?，這個數(shù)要保證最大以覆蓋其它內(nèi)容。
還是不行呀，我把下拉菜單ul加上
ul{display:none;position:absolute;z-index:999;}
代碼發(fā)多點。
代碼發(fā)多點。
.navbar-float{list-style-type:none;?border-right:1px?solid?#406b8d;?line-height:36px;}
#navbar-float-last{border:0px?solid?#024e70}
#navbar?ul{width:?100%;position:relative;right:1px;}
#navbar{height:36px;?filter:alpha(Opacity=130);-moz-opacity:0.5;opacity:?0.8;z-index:100;?background:#024e70;}
.navbar-float{float:left;?width:95px;?text-align:center;}
.navbar-float?a{color:white;}
.navbar-float?a:hover{position:relative;?top:1px;}
.navbar-float?ul{display:none;position:absolute;z-index:999;}
.navbar-float?ul?li{
width:150px;
background-color:#000;
text-align:left;
padding-left:5px;
list-style-type:disc;
list-style-position:inside;
filter:alpha(Opacity=130);
-moz-opacity:0.7;
opacity:0.98;?
z-index:999;
border-left:1px?solid?#024e70;
border-right:1px?solid?#024e70;
border-bottom:1px?dashed?#333;
}
<!-- 導(dǎo)航條開始 --> <div id="navbar"> <ul> <!-- 首頁分類開始 --> <li class="navbar-float"> <a href="#">首 頁</a> </li> <li class="navbar-float"> <a href="#" id="navbar-intro">學(xué)院簡介</a> <ul> <li><a href="#">學(xué)院概況</a></li> <li><a href="#">歷屆領(lǐng)導(dǎo)</a></li> <li><a href="#">學(xué)院領(lǐng)導(dǎo)</a></li> <li><a href="#">辦公電話</a></li> </ul> </li> <!-- 首頁分類結(jié)束 --> <!-- 機構(gòu)設(shè)置分類開始 --> <li class="navbar-float"> <a href="#" id="navbar-organ">機構(gòu)設(shè)置</a> <ul> <li><a href="#">黨政管理機構(gòu)</a></li> <li><a href="#">黨務(wù)機構(gòu)</a></li> <li><a href="#">行政機構(gòu)</a></li> <li><a href="#">教學(xué)機構(gòu)</a></li> <li><a href="#">系所設(shè)置</a></li> <li><a href="#">實驗室</a></li> <li><a href="#">委員會</a></li> </ul> </li> <!-- 機構(gòu)設(shè)置分類結(jié)束 --> <!-- 師資隊伍分類開始 --> <li class="navbar-float"> <a href="#" id="navbar-teachers">師資隊伍</a> <ul> <li><a href="#">教授</a></li> <li><a href="#">副教授</a></li> <li><a href="#">教師名錄</a></li> <li><a href="#">博士生導(dǎo)師</a></li> <li><a href="#">碩士生導(dǎo)師</a></li> </ul> </li> <!-- 師資隊伍分類結(jié)束 --> <!-- 教育工作分類開始 --> <li class="navbar-float"> <a href="#" id="navbar-edu">教育工作</a> <ul> <li><a href="#">學(xué)生工作</a></li> <li><a href="#">本科教育</a></li> <li><a href="#">研究生工作</a></li> </ul> </li> <!-- 教育工作分類結(jié)束 --> <!-- 質(zhì)量工程分類開始 --> <li class="navbar-float"><a href="#">質(zhì)量工程</a></li> <!-- 質(zhì)量工程分類結(jié)束 --> <!-- 學(xué)科建設(shè)分類開始 --> <li class="navbar-float"><a href="#">學(xué)科建設(shè)</a></li> <!-- 學(xué)科建設(shè)分類結(jié)束 --> <!-- 科學(xué)研究分類開始 --> <li class="navbar-float"><a href="#">科學(xué)研究</a></li> <!-- 科學(xué)研究分類結(jié)束 --> <!-- 招生就業(yè)分類開始 --> <li class="navbar-float"><a href="#">招生就業(yè)</a></li> <!-- 招生就業(yè)分類結(jié)束 --> <!-- 合作交流分類開始 --> <li class="navbar-float" id="navbar-float-last"><a href="#">合作交流</a></li> <!-- 合作交流分類結(jié)束 --> </ul> </div> <!-- 導(dǎo)航條結(jié)束 -->
你不能發(fā)多點代碼嗎?js部分呢。
你不能發(fā)多點代碼嗎?js部分呢。
// 通過id獲得節(jié)點function $(id){ return document.getElementById(id);}// 獲取兄弟節(jié)點function brothers(elem) { var r = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem ) { r.push( n ); } } return r;}//----------------------------------// 導(dǎo)航欄//----------------------------------// 鼠標(biāo)移動到導(dǎo)航欄上function mouse_over_navbar(id) { // 獲得菜單分類的下一個兄弟節(jié)點 var child = brothers($(id)); child[0].style.display = "block";}// 鼠標(biāo)移開導(dǎo)航欄的下拉菜單function mouse_out_navmenu(id) { // 獲得菜單分類的下一個兄弟節(jié)點 var child = brothers($(id)); child[0].style.display = "none";}// 鼠標(biāo)移開導(dǎo)航欄的下拉菜單function get_menu_node(id) { // 獲得菜單分類的下一個兄弟節(jié)點 var child = brothers($(id)); return child[0];}function hide_menu(which) { which.style.display = 'none';}// 獲得導(dǎo)航欄下拉菜單// 綁定事件window.onload = function(){ // 導(dǎo)航欄有下拉列表的id值 var navid1 = "navbar-intro"; var navid2 = "navbar-organ"; var navid3 = "navbar-teachers"; var navid4 = "navbar-edu"; // 綁定鼠標(biāo)經(jīng)過導(dǎo)航欄的事件 $(navid1).onmouseover = function() { mouse_over_navbar(navid1); } $(navid2).onmouseover = function() { mouse_over_navbar(navid2); } $(navid3).onmouseover = function() { mouse_over_navbar(navid3); } $(navid4).onmouseover = function() { mouse_over_navbar(navid4); } } javascript我只是在鼠標(biāo)移動到導(dǎo)航欄時修改了display屬性為block
XML/HTML code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 ……
第一個ul標(biāo)簽我用的position:relative修飾了，然后會不會對他里面的ul標(biāo)簽產(chǎn)生影響
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><style type="text/css">.navbar-float{list-style-type:none; border-right:1px solid #406b8d; line-height:36px;}#navbar-float-last{border:0px solid #024e70}#navbar ul{width: 100%;right:1px;}#navbar{height:36px; filter:alpha(Opacity=130);-moz-opacity:0.5;opacity: 0.8;z-index:100; background:#024e70;}.navbar-float{float:left; width:95px; text-align:center;position:Relative}.navbar-float a{color:white;}.navbar-float a:hover{ top:1px;}.navbar-float ul{display:none;position:absolute;z-index:999;}.navbar-float ul li{width:150px;background-color:#000;text-align:left;padding-left:5px;list-style-type:disc;list-style-position:inside;filter:alpha(Opacity=130);-moz-opacity:0.7;opacity:0.98; z-index:999;border-left:1px solid #024e70;border-right:1px solid #024e70;border-bottom:1px dashed #333;</style> <script type="text/javascript"> function $(id){ return document.getElementById(id);} // 獲取兄弟節(jié)點function brothers(elem) { var r = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem ) { r.push( n ); } } return r;}//----------------------------------// 導(dǎo)航欄//---------------------------------- // 鼠標(biāo)移動到導(dǎo)航欄上function mouse_over_navbar(id) { // 獲得菜單分類的下一個兄弟節(jié)點 var child = brothers($(id)); console.log(child[0]); child[0].style.display = "block";} // 鼠標(biāo)移開導(dǎo)航欄的下拉菜單function mouse_out_navmenu(id) { // 獲得菜單分類的下一個兄弟節(jié)點 var child = brothers($(id)); child[0].style.display = "none";} // 鼠標(biāo)移開導(dǎo)航欄的下拉菜單function get_menu_node(id) { // 獲得菜單分類的下一個兄弟節(jié)點 var child = brothers($(id)); return child[0];} function hide_menu(which) { which.style.display = 'none';} // 獲得導(dǎo)航欄下拉菜單// 綁定事件window.onload = function(){ // 導(dǎo)航欄有下拉列表的id值 var navid1 = "navbar-intro"; var navid2 = "navbar-organ"; var navid3 = "navbar-teachers"; var navid4 = "navbar-edu"; // 綁定鼠標(biāo)經(jīng)過導(dǎo)航欄的事件 $(navid1).onmouseover = function() { mouse_over_navbar(navid1); } $(navid1).onmouseout = function() { mouse_out_navmenu(navid1); } $(navid2).onmouseover = function() { mouse_over_navbar(navid2); } $(navid2).onmouseout = function() { mouse_out_navmenu(navid2); } $(navid3).onmouseover = function() { mouse_over_navbar(navid3); } $(navid3).onmouseout = function() { mouse_out_navmenu(navid3); } $(navid4).onmouseover = function() { mouse_over_navbar(navid4); } $(navid4).onmouseout = function() { mouse_out_navmenu(navid4); } } </script> </head> <body><!-- 導(dǎo)航條開始 --> <div id="navbar"> <ul> <!-- 首頁分類開始 --> <li class="navbar-float"> <a href="#">首 頁</a> </li> <li class="navbar-float"> <a href="#" id="navbar-intro">學(xué)院簡介</a> <ul> <li><a href="#">學(xué)院概況</a></li> <li><a href="#">歷屆領(lǐng)導(dǎo)</a></li> <li><a href="#">學(xué)院領(lǐng)導(dǎo)</a></li> <li><a href="#">辦公電話</a></li> </ul> </li> <!-- 首頁分類結(jié)束 --> <!-- 機構(gòu)設(shè)置分類開始 --> <li class="navbar-float"> <a href="#" id="navbar-organ">機構(gòu)設(shè)置</a> <ul> <li><a href="#">黨政管理機構(gòu)</a></li> <li><a href="#">黨務(wù)機構(gòu)</a></li> <li><a href="#">行政機構(gòu)</a></li> <li><a href="#">教學(xué)機構(gòu)</a></li> <li><a href="#">系所設(shè)置</a></li> <li><a href="#">實驗室</a></li> <li><a href="#">委員會</a></li> </ul> </li> <!-- 機構(gòu)設(shè)置分類結(jié)束 --> <!-- 師資隊伍分類開始 --> <li class="navbar-float"> <a href="#" id="navbar-teachers">師資隊伍</a> <ul> <li><a href="#">教授</a></li> <li><a href="#">副教授</a></li> <li><a href="#">教師名錄</a></li> <li><a href="#">博士生導(dǎo)師</a></li> <li><a href="#">碩士生導(dǎo)師</a></li> </ul> </li> <!-- 師資隊伍分類結(jié)束 --> <!-- 教育工作分類開始 --> <li class="navbar-float"> <a href="#" id="navbar-edu">教育工作</a> <ul> <li><a href="#">學(xué)生工作</a></li> <li><a href="#">本科教育</a></li> <li><a href="#">研究生工作</a></li> </ul> </li> <!-- 教育工作分類結(jié)束 --> <!-- 質(zhì)量工程分類開始 --> <li class="navbar-float"><a href="#">質(zhì)量工程</a></li> <!-- 質(zhì)量工程分類結(jié)束 --> <!-- 學(xué)科建設(shè)分類開始 --> <li class="navbar-float"><a href="#">學(xué)科建設(shè)</a></li> <!-- 學(xué)科建設(shè)分類結(jié)束 --> <!-- 科學(xué)研究分類開始 --> <li class="navbar-float"><a href="#">科學(xué)研究</a></li> <!-- 科學(xué)研究分類結(jié)束 --> <!-- 招生就業(yè)分類開始 --> <li class="navbar-float"><a href="#">招生就業(yè)</a></li> <!-- 招生就業(yè)分類結(jié)束 --> <!-- 合作交流分類開始 --> <li class="navbar-float" id="navbar-float-last"><a href="#">合作交流</a></li> <!-- 合作交流分類結(jié)束 --> </ul> </div> <!-- 導(dǎo)航條結(jié)束 --> <br>abcde <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 <br>123123123 </body></html> JavaScript?code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990……
謝謝大神
樓主，還在嗎？我也遇到這個問題了，能不能告訴我怎么解決呢？
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Memohon struktur semantik dengan artikel, seksyen, dan selain dalam HTML
Jul 05, 2025 am 02:03 AM
Penggunaan rasional tag semantik dalam HTML dapat meningkatkan kejelasan struktur halaman, aksesibilitas dan kesan SEO. 1. Digunakan untuk blok kandungan bebas, seperti jawatan blog atau komen, ia mesti mandiri; 2. Digunakan untuk kandungan berkaitan klasifikasi, biasanya termasuk tajuk, dan sesuai untuk modul yang berlainan halaman; 3. Digunakan untuk maklumat tambahan yang berkaitan dengan kandungan utama tetapi tidak teras, seperti cadangan sidebar atau profil pengarang. Dalam perkembangan sebenar, label harus digabungkan dan lain -lain, elakkan bersarang yang berlebihan, pastikan struktur mudah, dan sahkan rasionalitas struktur melalui alat pemaju.
Apakah elemen HTML penting untuk menstrukturkan laman web?
Jul 03, 2025 am 02:34 AM
Struktur laman web perlu disokong oleh elemen HTML teras. 1. Struktur keseluruhan halaman terdiri daripada, yang merupakan unsur akar, yang menyimpan maklumat meta dan memaparkan kandungan; 2. Organisasi kandungan bergantung pada tajuk (-), perenggan () dan tag blok (seperti,) untuk meningkatkan struktur organisasi dan SEO; 3. Navigasi dilaksanakan melalui dan dilaksanakan, organisasi yang biasa digunakan dihubungkan dan ditambah dengan atribut aria-semasa untuk meningkatkan kebolehcapaian; 4. Borang Interaksi melibatkan, dan, untuk memastikan fungsi input dan penyerahan pengguna lengkap. Penggunaan unsur -unsur ini dapat meningkatkan kejelasan halaman, penyelenggaraan dan pengoptimuman enjin carian.
Melaksanakan pengesahan borang klien menggunakan atribut HTML.
Jul 03, 2025 am 02:31 AM
Klien-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1) userequiredtoenforcemandatory.2) valateateMailsandurlSwithtypeattributeseMailorurl, orusepatternwithregexforcustmin.3)
Melaksanakan butang yang boleh diklik menggunakan elemen butang HTML
Jul 07, 2025 am 02:31 AM
Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini
Apakah tag penutup diri dalam html?
Jul 02, 2025 pm 02:55 PM
Tag penutup diri adalah unsur-unsur dalam HTML yang tidak memerlukan tag tertutup kerana mereka tidak mengandungi kandungan. Contoh umum termasuk: ① Masukkan gambar; ② Tambah Break Line; ③ Buat garis mendatar; ④ Tentukan input borang; ⑤ menghubungkan sumber luaran; ⑥ Menyediakan metadata. Tag ini berfungsi melalui atribut seperti atau. Terdapat dua cara yang betul untuk menulis: sintaks HTML standard, seperti gaya XHTML, tetapi HTML5 mengesyorkan bekas. Perhatikan bahawa anda tidak boleh menggunakan borang tertutup sendiri pada label yang memerlukan kandungan pakej. Sekiranya kesilapan itu salah, ia harus ditukar kepada hello yang ditutup dengan betul. Penggunaan tag penutup diri yang betul membantu mengekalkan kod anda dengan mudah dan cekap, dan meningkatkan keserasian dengan alat lain seperti kerangka.
Bagaimana cara kumpulan pilihan dalam lungsur turun pilih menggunakan HTML?
Jul 04, 2025 am 03:16 AM
Gunakan tag dalam HTML untuk pilihan kumpulan dalam menu drop-down. Kaedah khusus adalah untuk membungkus sekumpulan elemen dan menentukan nama kumpulan melalui atribut label, seperti: 1 mengandungi pilihan seperti epal, pisang, oren, dan lain -lain; 2. Mengandungi pilihan seperti wortel, brokoli, dan sebagainya; 3. Nota termasuk: ① Tiada sarang disokong; ② Seluruh kumpulan boleh dilumpuhkan melalui atribut yang kurang upaya; ③ Gaya ini terhad dan perlu dihidupkan dalam kombinasi dengan CSS atau perpustakaan pihak ketiga; Plug-in seperti SELECT2 boleh digunakan untuk meningkatkan fungsi.
Mengkonfigurasi metadata dokumen dalam elemen kepala HTML
Jul 09, 2025 am 02:30 AM
Metadata dalam htmlhead adalah penting untuk SEO, perkongsian sosial, dan tingkah laku penyemak imbas. 1. Tetapkan tajuk halaman dan perihalan, gunakan dan simpannya ringkas dan unik; 2. Tambahkan maklumat kad OpenGraph dan Twitter untuk mengoptimumkan kesan perkongsian sosial, perhatikan saiz imej dan gunakan alat penyahpepijatan untuk menguji; 3. Tentukan set aksara dan tetapan Viewport untuk memastikan sokongan pelbagai bahasa disesuaikan dengan terminal mudah alih; 4. Tag pilihan seperti Hak Cipta Pengarang, Kawalan Robot dan Canonical Mencegah Kandungan Duplikat juga harus dikonfigurasi dengan munasabah.
Menambah kapsyen dan trek ke elemen video dan audio HTML.
Jul 02, 2025 pm 04:05 PM
Untuk membenamkan video atau audio dengan sari kata dan trek audio ke dalam laman web, ia dapat dicapai melalui fungsi asli HTML. 1. Gunakan tag untuk menambah fail sari kata dalam format Webvtt dan tetapkan sifat, srclang dan label; 2. Menyokong subtitle pelbagai bahasa melalui pelbagai elemen, dan gunakan atribut lalai untuk menetapkan bahasa lalai; 3. Multi-trek boleh mengawal pelbagai elemen beralih melalui JavaScript, atau menggunakan penyelesaian sambungan media yang lebih kompleks; 4. Perhatikan keserasian penyemak imbas, konfigurasi laluan dan pengesahan format untuk memastikan operasi normal pada peranti yang berbeza dan menyediakan penyelesaian sandaran.
