HTML第八章定位网页元素上机题3---------------北大青鸟——下拉列表菜单页面

来源：互联网发布：淘宝买药品可靠吗编辑：程序博客网时间：2024/04/27 14:28
<!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>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;}.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;}.menu dd a{font-size:12px;line-height:25px;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;}
0 0