每天一页:001.留学网【难度系数:★】

最新推荐文章于 2023-07-11 11:19:15 发布
最新推荐文章于 2023-07-11 11:19:15 发布
阅读量185 收藏
点赞数
分类专栏： # HTML+CSS 文章标签： html5 css jQuery库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37580383/article/details/107087121
版权

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">&nbsp;</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---------------------------------------------- */

 

Zero-To-One
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Python 爬虫案例
悦分享
10-19 1万+
大数据采集：通过爬虫获取特定行业（如汽车行业）股票的基本信息，并获取单只股票的历史行情数据。大数据存储：根据自定义的时间间隔定时获取涨幅前60名股票的实时行情数据，并存储在数据库中。大数据分析：计算股票的月涨跌幅，对股票进行相关性分析，并预测股票行情的未来走势。
天堂还是地狱！美国大学不是你想象的那样！道翰天琼认知智能API接口平台为您揭秘。
m0_49525819的博客
08-02 424
我们都知道，美国高等学府对于同学们的政策被形容作“宽进严出”（虽然“宽”就已经非常“严”），即拿到了学校的offer、顺利入读了心仪的院校并不代表你最终就一定能顺利毕业。 那么，美国的高校究竟有多严格？美国大学生的学习强度究竟有多大？中国学生对国外教育有哪些误区？ 今天和你分享这篇来自赴美读研的中国留学生@大西洋船员 的真实留学经历，希望能给大家做出参考，也欢迎你提出不同的声音。 在去美国读研究生之前，我（指本文作者）和大部分国人一样认为，美国的教育都是人性化的教育，教育方式和...
明翰全日制英国硕士留学攻略V3.0（持续更新）
热门推荐
欢迎！欢迎来到17号城市！
10-17 7万+
夜深人静的时候，自己好好想一想， 把目光放远到整个人生，在当下这一人生阶段， 到底什么对于自己来说才是优先级最高的？ 最重要的？最想做的？ 留学这件事儿理论上是赶早不赶晚，随着年龄的增长， 留学成本会陡增，工作一年能赚多少钱？ 不工作一年能损失多少钱？ 但有工作经验的好处是比其他学生更有方向， 知道自己哪里欠缺，更知道自己想要什么。 留学是一件苦差事， 无论是在备考雅思托福各种刻苦学英语， 还是是面对吨级的知识点以及各种学习压力， 还是面对境外环境时的各种捉襟见肘， 总之，留学比我想象中的要难很多。.
基于Java开发一套完整的区块链系统（附源码）
weixin_45727359的博客
01-16 5211
来源：https://blog.csdn.net/victory_long前言近几年区块链概念越来越火，特别是区块链技术被纳入国家基础设施建设名单后，各大企业也开始招兵买马，对区块链技术...
区块链技术
Golden_soft的专栏
06-08 836
https://blog.csdn.net/victory_long/article/details/106604338 本文目录 前言 一、区块链技术理论基础 1、基本概念 （1）区块链 （2）区块链网络 2、区块链分类 （1）公有链 （2）联盟链 （3）私有...
Google--PageRank(网页级别)技术解密[转]
涉外天下
08-16 3万+
Google--PageRank(网页级别)技术解密 1. 什么是PageRank2. PageRank的决定因素3. 如何查知PageRank4. PageRank的重要性5. Google的前1,000项搜索结果6. PageRank与其它影响网站排名因素间的区别 一：什么是PageRank(网页级别)PageRank(网页级别)是Google用于评测一个网页“重要性”的一种方法。在揉合了诸如
【南卡樱桃|读书笔记《学习高手》】
weixin_44698581的博客
04-21 9045
∝学霸分享 6大课 通过英语、写作和SMART原则、OKR工作法、LEO解读五步法等文章。同样适用于国内教育环境。 ∝3 学霸分享，直通世界名校的超级学习法 ∞第18课 LEO手把手教你如何学好英语 ◆第1小课 单词 ◆第2小课 语法 ◆第3小课 听力 ◆第4小课 阅读 ◆第5小课 口语 LEO的学习仪式感 我在不同英语学习阶段使用的教材 ∞第19课 三要素写作法，把文章写到读者心里去 ◆第1小课 Ethos，可信 ◆第2小课 Pathos，情感 ◆第3小课 Logos，逻辑 ◆19-本课核心方法回顾 ∞第
你感到迷茫吗？【笔记】
最新发布
小心星的博客
07-11 2395
你感到迷茫吗？【笔记】
小波发展历史
panhao762的专栏
12-02 9783
脊波（Ridgelet） 曲线波（Curvelet）　 梳状波（Brushlet）　 子束波（Beamlet）　 楔形波（Wedgelet）　 轮廓波（Contourlet）　 条带波（Bandelet）　 方向波（Directionlet）　 剪切波（Shearlet）　   Contourlets form a multiresolution dir
留学大数据：《中国留学发展报告(2016)》.doc
11-23
留学大数据：《中国留学发展报告(2016)》.doc
20200723-益普索-教育行业：2020海外留学趋势报告.pdf
04-08
20200723-益普索-教育行业：2020海外留学趋势报告.pdf
韩国留学生活秘籍：美食篇.docx
11-30
韩国留学生活秘籍：美食篇.docx
益普索教育行业：2020海外留学趋势报告.rar
09-06
益普索教育行业：2020海外留学趋势报告
国际留学生社会网络研究的维度.docx
05-05
国际留学生社会网络研究的维度
Web前端开发-为网页元素添加阴影效果
Zero
04-26 2479
效果图 .html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>为网页元素添加阴影效果</title> <link href="../2.css/03.为网页元素添加阴影效果.css" rel="stylesheet" t...
Web前端开发-简单导航栏实例
Zero
05-17 1793
HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>夏季导航栏</title> <link rel="stylesheet" type="text/css" href="../css/夏季导航栏.css" /> </head> <body> <!--logo图片等--> ...
Web前端开发-实现网页元素水平和垂直居中对齐
Zero
04-26 1302
效果图 .html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实现网页元素水平和垂直居中对齐</title> <link href="../2.css/02.实现网页元素水平和垂直居中对齐.css" rel="sty...
Web前端开发-内容溢出处理方式
Zero
04-26 934
.html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置内容溢出处理方式</title> <link href="../2.css/04.设置内容溢出处理方式.css" rel="stylesheet" type="...
写一篇400字的英文作文：对出国留学的看法
02-07
Studying abroad is a great opportunity for students to gain new experiences, learn a new language, and expand their cultural horizons. One of the main benefits of studying abroad is the chance to ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zero-To-One

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值