css实现一级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
css实现一级下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
涉及到的圖片請到這里下載
涉及到的圖片請到這里下載
涉及到的圖片請到這里下載
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>北大青鳥——下拉列表菜單頁面</title> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" class="bodyBg"><!--導航開始--><div id="top"><div class="logo"><img src="image/logo.png" alt="logo" /></div><div class="topAdver1">北大青鳥授權培訓中心</div><div class="topAdverText"><a href="#">青鳥官網</a> | <a href="#">中心首頁</a></div><div class="topAdver2"><img src="image/TopAdver.png" alt="adver" /></div><div class="clear"></div><!--頁面欄目開始--><div class="menu"><dl><dt><a href="#">中心信息</a></dt><dd><a href="#">中心介紹</a><a href="#" >榮譽獎項</a><a href="#" >中心環境</a><a href="#" >中心地址</a><a href="#" >聯系我們</a> </dd></dl><dl><dt><a href="#">新聞動態</a></dt><dd><a href="#">行業新聞</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="#" >教質部</a><a href="#" >學術部</a><a href="#" >就業部</a> </dd></dl><dl><dt><a href="#">就業展示</a></dt><dd><a href="#">就業學員</a><a href="#" >簽約名企</a><a href="#" >就業感言</a><a href="#" >就業活動</a><a href="#" >就業部工作</a> </dd></dl><dl><dt><a href="#">學術教學</a></dt><dd><a href="#">教學教法</a><a href="#" >學習心得</a><a href="#" >視頻分享</a><a href="#" >技術文檔</a> </dd></dl><dl><dt><a href="#">學員天地</a></dt><dd><a href="#">學員活動</a><a href="#" >學社工作</a><a href="#" >項目展示</a> </dd></dl><dl><dt><a href="#">招生信息</a></dt><dd><a href="#">開班信息</a><a href="#" >體驗課信息</a><a href="#" >講座信息</a><a href="#" >招生問答</a> </dd></dl><dl><dt><a href="#">咨詢報名</a></dt></dl></div><!--頁面欄目結束--></div><!--導航結束--><!--主體內容開始--><div id="content"><!--公告--><div class="topAdver"><span class="bold">公司公告欄：</span><a href="#">北大青鳥APTECH ACCP7.0新聞發布會將于10月18日下午在二樓會議廳召開！</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">合作企業</div></div><div class="h10"></div><ul class="cooperate"><li><a href="#">北京北大青鳥</a></li><li><a href="#">西安北大青鳥</a></li><li><a href="#">武漢北大青鳥</a></li><li><a href="#">長春北大青鳥</a></li><li><a href="#">北京北大青鳥</a></li><li><a href="#">西安北大青鳥</a></li><li><a href="#">武漢北大青鳥</a></li><li><a href="#">長春北大青鳥</a></li><li><a href="#">北京北大青鳥</a></li><li><a href="#">西安北大青鳥</a></li><li><a href="#">武漢北大青鳥</a></li><li><a href="#">長春北大青鳥</a></li><li><a href="#">北京北大青鳥</a></li><li><a href="#">西安北大青鳥</a></li><li><a href="#">武漢北大青鳥</a></li><li><a href="#">長春北大青鳥</a></li></ul><div class="h10"></div><div class="clear"></div></div></div><!--主體內容結束--><!--版權內容開始--><div class="h10"></div><div id="bottom"> 北京APTECH北大青鳥信息技術有限公司版權所有<br />地址：北京市城府號207號北大青鳥樓<br />電話：010-62768866<br />傳真：010-82667065</div> </div> <!--版權內容結束--> </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時背景正常顯示*/ .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; }
總結
以上是生活随笔為你收集整理的css实现一级下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [置顶]动态网页开发基础【笔记】
- 下一篇： 涨知识 | 100个中国最难读的地名，第