index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留学网</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function() { // find() 方法返回被选元素的后代元素。 // prev() 方法返回被选元素的前一个同级元素。 // next() 方法返回被选元素的后一个同级元素。 $("li").find("ul").prev().toggle( function() { // slideDown() 方法以滑动方式显示被选元素。 // $(this).next().show(); $(this).next().slideDown("slow"); }, function() { // slideUp() 方法以滑动方式隐藏被选元素。 $(this).next().slideUp("slow"); // $(this).next().hide(); }); }); </script> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <div id="container"> <div id="divTop"> <div id="divTopLogo"><img src="./img/logo.jpg" /></div> <div id="divTopLinks"><a href="#">首页</a> | <a href="#">网站地图</a> | <a href="#">联系我们</a></div> <div id="divTopMenu"> <ul> <li><a href="#">公司简介</a></li> <li><a href="#" style="color:#F4F719;">学校介绍</a></li> <li><a href="#">韩国生活</a> <ul> <li><a href="#">住房介绍</a></li> <li><a href="#">就业介绍</a></li> </ul> </li> <li><a href="#">特色专业</a> <ul> <li><a href="#">商务学</a></li> <li><a href="#">影视表演</a></li> </ul> </li> <li><a href="#">留学论坛</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </div> <div id="divMain"> <div id="divMainLeft"> <div id="divMainLeftTitle"><a href="#"><img src="./img/icon_01.jpg" /></a></div> <ul> <li><a href="#">2009年韩国留学十大热门专业</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 id="divMainLeftTitle"><a href="#"><img src="./img/icon_02.jpg" /></a></div> <ul> <li><a href="#">韩国留学的带汇窍门</a></li> <li><a href="#">韩国的住房</a></li> <li><a href="#">韩国人手机选号最爱数字“0”</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="#">韩国的住房可以分为4种</a></li> </ul> <div id="divMainLeftTitle"><a href="#"><img src="./img/icon_03.jpg" /></a></div> <ul> <li><a href="#">事无巨细 心中有底 各专业</a></li> <li><a href="#">多国爆发甲型H1N1流感，当下</a></li> <li><a href="#">自驾游畅想之旅：北海道</a></li> <li><a href="#">最真实的美国建筑学 TIOP10名</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="#">讲讲我在日本留学3年的感受</a></li> </ul> <div id="divMainLeftTitle"><a href="#"><img src="./img/icon_04.jpg" /></a></div> <ul> <li>地址：北京市海淀区中关村丹棱街</li> <li>3号 中国电子大厦B座15层</li> <li>邮编：100080</li> <li>联系电话：010：51625666</li> </ul> </div> <div id="divMainRight"> <div id="companypro"> <div class="title">公司简介</div> <p> 以“诚信为本、以产业立身、以教育报国”的理念，使我们成为了最专业的中韩教育服务机构，成为韩国优秀高校首选的合作伙伴，我们的员工成为最专业的中韩教育专家，做为顾客接受中韩教育首选的服务机构，我们成长为受社会尊敬、让员工自豪的企业。并通过我们与同行的共同努力，让留学服务业成为受人尊敬的行业。 <a href="#"><span> MORE>></span></a> </p> <div class="clearfix"> </div> </div> <div id="schoolpro"> <div class="title" style="padding:5px 2px 10px 15px;">学校介绍</div> <div class="img"><img src="./img/002.jpg" /></div> <p> 本院是韩国政府以及由韩国国内主要名牌大学正式认可在中国地区招收韩国留学生的招生处。截止2004年底，通过本院招收的学生当中，升入大学的升学率为100%，非法滞留率未满3%，具有90%签证率的在韩国唯一中国地区韩国留学生的招生处。 <a href="#"><span> MORE>></span></a> </p> </div> <div id="slogan"> 冲击世界顶级学校 摘取皇冠上的明珠 </div> <div id="program_01"> <div class="title1">必备方案一：</div> <div class="title1" style="font-weight:normal; padding-top:2px;">结合留学目标为自己做个职业规划</div> <p>留学对于哪一个家庭来说，无论是在精力还是花费上都是一笔大投资，每个家长和学生都对留学有着这样或那样的憧憬，有没有办法最大限度的保证憧憬的实现？古人说的好，“凡事预则立”，也就是说做事必须提前计划好，才能收获好的结果。说到底，留学只是为人生目标奋斗的一段历程，其最终目的还是事业与人生的成功。而成功源于你找对了方向，也就是说入对了行。当留学遇上职业规划，留学就成为一次有的放矢的奋斗历程。</p> </div> <div id="program_02"> <div class="title1">必备方案二：</div> <div class="title1" style="font-weight:normal; padding-top:2px;">参加考试前做好语言测评与考试规划并制定合理复习方案</div> <p>现在刚刚高一或大一、大二的你是否还对留学标准化考试毫无概念？如果自己参加这些考试会取得什么样的成绩？很想给自己一个定位？参加正式的考试太破费？在美加百利你可以得到这样一个机会：无需提前报名，只需打个预约电话，考试部的老师会为你提供免费语言水平测试。之后考试规划师会综合测试结果，为你做语言优劣势分析，并制定综合评估报告，使你对自己和各类留学考试胸中有数。</p> <p><a href="#"><span>MORE>></span></a></p> </div> </div> </div> <div id="divFooter"> <p>Copyright@1997-2009jingdongfang. All Rights Reserved</p> <p style="padding-left:377px; padding-top:3px;">备案/许可证号：京ICP备09004983号</p> </div> </div> </body> </html>
index.css
@charset "utf-8"; /* CSS 写在前面,默认样式-Start---------------------------------------------- */ * { margin: 0; padding: 0; } img { border: none; } ul, ol, li { list-style-type: none; } body { font-family: "宋体"; font-size: 12px; color: #6A6868; } a { color: #6A6868; text-decoration: none; } a:hover { color: #0C8ABD; } /* 写在前面-解决高度塌陷问题clearfix*/ .clearfix:before, .clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; } /* CSS 写在前面,默认样式-End---------------------------------------------- */ #container { width: 775px; margin: 0 auto; /* 相对布局 */ position: relative; /* z-index: 1; */ } /* CSS divTop Start---------------------------------------------- */ #divTop { width: 775px; height: 324px; position: relative; /* z-index: 1; */ /* scroll:背景图片随着页面的滚动而滚动，这是默认的。 */ background: url(../img/banner.jpg) no-repeat scroll 0 0; } /* logo的样式设定 */ #divTopLogo { width: 165px; height: 27px; position: absolute; top: 55px; left: 45px; /* z-index: 1; */ } /* 网页的链接 */ #divTopLinks { width: 180px; height: 20px; position: absolute; right: -10px; top: 60px; /* z-index: 1; */ } #divTopMenu { width: 110px; height: 180px; color: #fff; font-size: 14px; font-weight: bold; position: relative; top: 108px; left: 550px; /* z-index: 10; */ /* background-color: #F4F719; */ } #divTopMenu a { color: #fff; text-decoration: none; } #divTopMenu a:hover { color: #F4F719; text-decoration: none; } #divTopMenu ul { list-style-image: url(../img/icon_05.jpg); /* inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐 */ list-style-position: inside; } #divTopMenu li { line-height: 2.0; vertical-align: top; padding-bottom: 2px; } #divTopMenu li ul { display: none; list-style-image: none; } #divTopMenu li li { width: 85px; background-color:#6A6868; text-align: center; margin-top: 3px; margin-left: 25px; } /* CSS divTop End---------------------------------------------- */ /* CSS divMain Start---------------------------------------------- */ #divMain { width: 775px; height: 593px; position: absolute; /* 巧妙的将上下两背景图合并 */ background: url(../img/main_bg.jpg) repeat-y scroll 0 0; } #divMainLeft { width: 210px; height: 733px; /* 相对定位:脱离文档流 实现定位 */ position: absolute; top: -140px; left: 65px; } #divMainLeftTitle { margin-top: 10px; width: 161px; height: 26px; } #divMainLeft ul { width: 190px; padding: 0px 20px; } #divMainLeft li { line-height: 1.6; } #divMainRight { width: 447px; height: 576px; /* 因为左侧已经浮动了 所以右侧也需要浮动 */ position: absolute; top: 20px; left: 312px; /* background-color: #0C8ABD; */ } #divMainRight .title { padding-left: 15px; color: #000; font-size: 14px; font-weight: bold; } #companypro { padding-left: 10px; } #companypro p { padding: 10px 2px 0 15px; text-indent: 2em; line-height: 1.3; } #companypro p span { color: #0C8ABD; font-family: Georgia, "Times New Roman", Times, serif; font-size: 9px; } #schoolpro { padding-left: 10px; } #schoolpro p span { color: #0C8ABD; font-family: Georgia, "Times New Roman", Times, serif; font-size: 9px; cursor: pointer; } #schoolpro .img { border: 1px solid #000; float: left; } #schoolpro p { width: 310px; text-indent: 2em; line-height: 1.3; padding: 0px 0 0 10px; float: left; } #slogan { width: 447px; height: 25px; margin-top: 32px; line-height: 25px; text-indent: 95px; font-size: 14px; color: #000; font-weight: bold; background-color: #D4D3D3; float: left; } #program_01, #program_02 { padding: 12px 0 0 10px; float: left; } #program_01 .title1, #program_02 .title1 { color: #0C8ABD; font-weight: bold; font-size: 12px; padding-top: 2px; } #program_01 p { text-indent: 2em; padding-top: 2px; font-weight: normal; color: #000; line-height: 1.3; } #program_02 p { text-indent: 2em; padding-top: 2px; font-weight: normal; color: #000; line-height: 1.3; } #program_02 p span { text-align: right; color: #0C8ABD; font-family: Georgia, "Times New Roman", Times, serif; font-size: 9px; float: right; padding: 5px 5px 0 0; } /* CSS divMain End---------------------------------------------- */ /* CSS divFooter Start---------------------------------------------- */ #divFooter { width: 775px; height: 89px; position: absolute; top: 917px; z-index: 2; background: url(../img/footer_bg.jpg) no-repeat scroll 0 0; } #divFooter p { padding: 10px 0 0 320px; color: #C1BBBB; } /* CSS divFooter End---------------------------------------------- */
