css实现一级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
css实现一级下拉菜单
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
涉及到的圖片請(qǐng)到這里下載
涉及到的圖片請(qǐng)到這里下載
涉及到的圖片請(qǐng)到這里下載
html代碼
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>北大青鳥(niǎo)——下拉列表菜單頁(yè)面</title> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" class="bodyBg"><!--導(dǎo)航開(kāi)始--><div id="top"><div class="logo"><img src="image/logo.png" alt="logo" /></div><div class="topAdver1">北大青鳥(niǎo)授權(quán)培訓(xùn)中心</div><div class="topAdverText"><a href="#">青鳥(niǎo)官網(wǎng)</a> | <a href="#">中心首頁(yè)</a></div><div class="topAdver2"><img src="image/TopAdver.png" alt="adver" /></div><div class="clear"></div><!--頁(yè)面欄目開(kāi)始--><div class="menu"><dl><dt><a href="#">中心信息</a></dt><dd><a href="#">中心介紹</a><a href="#" >榮譽(yù)獎(jiǎng)項(xiàng)</a><a href="#" >中心環(huán)境</a><a href="#" >中心地址</a><a href="#" >聯(lián)系我們</a> </dd></dl><dl><dt><a href="#">新聞動(dòng)態(tài)</a></dt><dd><a href="#">行業(yè)新聞</a><a href="#" >中心新聞</a> </dd></dl><dl><dt><a href="#">課程介紹</a></dt></dl><dl><dt><a href="#">師資力量</a></dt><dd><a href="#">招生辦公室</a><a href="#" >教質(zhì)部</a><a href="#" >學(xué)術(shù)部</a><a href="#" >就業(yè)部</a> </dd></dl><dl><dt><a href="#">就業(yè)展示</a></dt><dd><a href="#">就業(yè)學(xué)員</a><a href="#" >簽約名企</a><a href="#" >就業(yè)感言</a><a href="#" >就業(yè)活動(dòng)</a><a href="#" >就業(yè)部工作</a> </dd></dl><dl><dt><a href="#">學(xué)術(shù)教學(xué)</a></dt><dd><a href="#">教學(xué)教法</a><a href="#" >學(xué)習(xí)心得</a><a href="#" >視頻分享</a><a href="#" >技術(shù)文檔</a> </dd></dl><dl><dt><a href="#">學(xué)員天地</a></dt><dd><a href="#">學(xué)員活動(dòng)</a><a href="#" >學(xué)社工作</a><a href="#" >項(xiàng)目展示</a> </dd></dl><dl><dt><a href="#">招生信息</a></dt><dd><a href="#">開(kāi)班信息</a><a href="#" >體驗(yàn)課信息</a><a href="#" >講座信息</a><a href="#" >招生問(wèn)答</a> </dd></dl><dl><dt><a href="#">咨詢報(bào)名</a></dt></dl></div><!--頁(yè)面欄目結(jié)束--></div><!--導(dǎo)航結(jié)束--><!--主體內(nèi)容開(kāi)始--><div id="content"><!--公告--><div class="topAdver"><span class="bold">公司公告欄：</span><a href="#">北大青鳥(niǎo)APTECH ACCP7.0新聞發(fā)布會(huì)將于10月18日下午在二樓會(huì)議廳召開(kāi)！</a></div><div class="h10"></div><!--圖片廣告--><div class="left w770"><img src="image/centerAdver05.png" alt="adver"/></div><div class="right w200"><div><a href="#"><img src="image/centerAdver01.png" alt="adver"/></a></div><div class="adverImg1"><a href="#"><img src="image/centerAdver02.png" alt="adver"/></a></div><div class="adverImg1"><a href="#"><img src="image/centerAdver03.png" alt="adver"/></a></div><div class="adverImg1"><a href="#"><img src="image/centerAdver04.png" alt="adver"/></a> </div></div><div class="h10"></div><div class="borderBlue"><div class="borderBlueB"><div class="cooperateTitle"></div><div class="cooperateText">合作企業(yè)</div></div><div class="h10"></div><ul class="cooperate"><li><a href="#">北京北大青鳥(niǎo)</a></li><li><a href="#">西安北大青鳥(niǎo)</a></li><li><a href="#">武漢北大青鳥(niǎo)</a></li><li><a href="#">長(zhǎng)春北大青鳥(niǎo)</a></li><li><a href="#">北京北大青鳥(niǎo)</a></li><li><a href="#">西安北大青鳥(niǎo)</a></li><li><a href="#">武漢北大青鳥(niǎo)</a></li><li><a href="#">長(zhǎng)春北大青鳥(niǎo)</a></li><li><a href="#">北京北大青鳥(niǎo)</a></li><li><a href="#">西安北大青鳥(niǎo)</a></li><li><a href="#">武漢北大青鳥(niǎo)</a></li><li><a href="#">長(zhǎng)春北大青鳥(niǎo)</a></li><li><a href="#">北京北大青鳥(niǎo)</a></li><li><a href="#">西安北大青鳥(niǎo)</a></li><li><a href="#">武漢北大青鳥(niǎo)</a></li><li><a href="#">長(zhǎng)春北大青鳥(niǎo)</a></li></ul><div class="h10"></div><div class="clear"></div></div></div><!--主體內(nèi)容結(jié)束--><!--版權(quán)內(nèi)容開(kāi)始--><div class="h10"></div><div id="bottom"> 北京APTECH北大青鳥(niǎo)信息技術(shù)有限公司版權(quán)所有<br />地址：北京市城府號(hào)207號(hào)北大青鳥(niǎo)樓<br />電話：010-62768866<br />傳真：010-82667065</div> </div> <!--版權(quán)內(nèi)容結(jié)束--> </div> </body> </html>css代碼 @charset "utf-8"; /* CSS Document *//*通用部分*/ body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li {margin:0;padding:0; } body {font:12px/1.5 "宋體";color:#000; } img {border:0; } ul, li {list-style:none; } a {color:#626262;text-decoration:none; } a:hover {color:#626262;text-decoration:underline; } #container {margin:0 auto;width:1004px; } .bodyBg {background-image:url(../image/bodyBg.jpg);background-repeat:no-repeat;width:1004px; } #top, #content, #bottom {width:980px;margin:0px auto;clear:both; } /*保證使用float時(shí)背景正常顯示*/ .clear {clear:both;height:0px;overflow:hidden; } .h10 {height:10px;clear:both;overflow:hidden; } .left {float:left; } .right {float:right; } .logo {float:left;padding-left:5px;padding-top:15px; } .topAdver1 {float:left;padding-top:50px;padding-left:0px;color:#FFF;font-size:18px;font-weight:bolder; } .topAdverText {float:right;color:#6cddfd;width:300px;text-align:right;padding-top:5px; } .topAdverText a, .topAdverText a:hover {color:#6cddfd;text-decoration:none; } .topAdver2 {float:right; } .topAdver3 {float:right;padding-top:40px;width:165px;text-align:right; } /*下拉列表菜單*/ .menu dl {float:left;width:108px;position:relative; /*下拉效果*/ } .menu dt {background-image:url(../image/centerMenuBg.png);background-repeat:no-repeat;height:36px;padding-top:13px;text-align:center;color:#ffffff;font-size:14px;font-weight:bold; } .menu dt a, .menu dt a:hover {text-decoration:none;color:#ffffff;font-size:14px;font-weight:900; } .menu dd {background:url(../image/secondBgj.gif) repeat-y;width:80px;padding-left:10px;/*下拉菜單效果*/display:none;position:absolute;z-index:1;left:10px;top:36px; } .menu dd a {font-size:12px;line-height:25px;display:block; } .menu dl:hover dd {display:block; /*下拉菜單效果*/ } .bold {font-weight:bold; } .topAdver {background-image: url(../image/adverBg.png);background-repeat:no-repeat;width:975px;height:20px;padding-left:5px;padding-top:5px;color:#626262; } .borderBlue {border:1px #0273c3 solid; } .borderBlueB {border-bottom:1px #0273c3 solid;height:33px;background-color:#1b93e9; } .cooperateTitle {background:url(../image/iconBg.gif) 2px 1px no-repeat;width:35px;height:30px;float:left; } .cooperateText {color:#FFF;font-size:14px;font-weight:bold;padding-top:5px; } .cooperate li {float:left;padding-left:10px;padding-top:5px;width:110px; } .centerTopAdver {background-image:url(../image/centerTopAdver.png);background-repeat:no-repeat;width:535px;height:21px;float:left;padding-top:4px;padding-left:5px;color:#626262; } #bottom {color:#626262;text-align:center;line-height:25px; }
總結(jié)
以上是生活随笔為你收集整理的css实现一级下拉菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [置顶]动态网页开发基础【笔记】
- 下一篇： 涨知识 | 100个中国最难读的地名，第