涉及到的图片请到这里下载
涉及到的图片请到这里下载
涉及到的图片请到这里下载
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;
}
