HTML+CSS melaksanakan gaya CSS menu lungsur kedua bar navigasi


Kami telah menambah pemilih kelas pada elemen HTML kami yang sepadan dalam bab sebelumnya Sekarang kami menambah kelas ini pada gaya css kami hanya perlu menambah gaya css ini pada halaman untuk mencapai kesan yang kami mahu

Anda boleh meletakkan gaya css ini secara berasingan ke dalam fail css dan kemudian merujuknya dalam halaman HTML

Anda juga boleh meletakkan ia terus di 'kepala' halaman HTML Tutorial ini diletakkan pada halaman yang sama

Lihat kod lengkap dalam bab seterusnya



Meneruskan pembelajaran
||
<style> li{ list-style-type:none; } #menu { width:950px; margin:30px auto 0px; height:45px; background-color: #030e11; } #menu li { float:left; width:109px; line-height:39px; text-align:center; position:relative; border:none; } #menu li a { font-size:16px; color: #e6f8e9; display:block; outline:0; text-decoration:none; } #menu li:hover a { color: #ff0000; /*导航栏文字颜色 */ } #menu li:hover .dropdown_1column { left:0px; top:38px; } .dropdown_1column{ /* 下拉菜单边框颜色*/ margin:0px auto; float:left; position:absolute; left:-999em; text-align:left; border:1px solid #066591; border-top:none; background:#F4F4F4; width: 140px; } #menu li:hover div a { /* 下拉菜单文字颜色*/ font-size:12px ;color:#444; } #menu li:hover div a:hover{color:#21910e;} /*下拉带单鼠标停留颜色*/ #menu li ul { list-style:none;padding:10px 5px; margin:0; } #menu li ul li { font-size:12px; line-height:26px; position:relative; padding:0;margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none;padding:0; margin:0; } </style>
  • Cadangan kursus
  • Muat turun perisian kursus
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!