<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>index</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
*{padding:0;margin:0}
html,body,div{
font:normal normal 13px/24px SimSun,MicroSoft YaHei;
color:#333;
}
html,body{
height:100%;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
ul,li,ol,dl,dt,dd{
list-style:none;
margin:0;
padding:0;
}
header,nav,section,article,footer,aside{
display:block;
}
.clearfix{
zoom:1;
}
.clearfix:after{
display:block;
content:"";
overflow:hidden;
clear:both;
}
ul,ol,li{list-style:none;}
.tabtitle{
list-style:none;
}
.tabfocus{
border:1px #ddd solid;
padding:0px;
margin:30px;
width:500px;
}
.tabfocus ul li{
float:left;
text-align:center;
cursor:pointer;
width:90px;
padding:10px 0;
font-family: MicroSoft YaHei;
}
.tabfocus ul{
border-bottom:2px solid #ebebeb;
position:relative;
}
.tabfocus ul div.line{
display: block;
position: absolute;
border-bottom: 2px solid #f60;
bottom: -2px;
width: 90px;
left: 0;
text-align: center;
bottom: -2px;
height: 4px;
}
.tabfocus ul b{
display: inline-block;
height: 0;
width: 0;
overflow:hidden;
line-height: 0;
border-width: 5px;
border-style: solid;
border-color: #f60 transparent transparent transparent;
margin-top: 4px;
}
.conn{
margin:13px;
}
.conn .con{
display:none;
color:#666;
}
.conn .current{
display:block;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="pageContent">
<div class="tabfocus" style="margin:100px auto;">
<ul class="clearfix">
<div class="line"><b></b></div>
<li>北京市</li>
<li>上海市</li>
<li>广州市</li>
<li>深圳市</li>
</ul>
<div class="conn">
<div class="con current">
北京（Beijing），简称京，中华人民共和国首都、直辖市、国家中心城市，中国的政治、文化中心，全国重要的交通枢纽和最大空港，国家经济的决策和管理中心，是中华人民共和国中央人民政府和全国人民代表大会的办公所在地[1] 。<br/>
北京位于华北平原北部，背靠燕山，毗邻天津市和河北省。北京市下辖东城区、西城区、朝阳区、海淀区、丰台区、石景山区、门头沟区、房山区、大兴区、通州区、顺义区、昌平区、平谷区、怀柔区、密云县、延庆县等16个区县。2014年末，北京市常住人口2151.6万人。<br/>
北京是中国“八大古都”之一，拥有7项世界遗产，是世界上拥有世界文化遗产数最多的城市，是一座有着三千余年建城史、八百六十余年建都史的历史文化名城，拥有众多名胜古迹和人文景观。今日的北京，更已发展成为一座现代化的国际大都市。
</div>
<div class="con">
上海（Shanghai），简称“沪”，有“东方巴黎”的美称，中华人民共和国直辖市之一，中国国家中心城市，中国的经济、金融中心，繁荣的国际大都市，拥有中国大陆首个自贸区“中国（上海）自由贸易试验区”。<br/>
上海作为中国民族工业的发祥地，地处长江入海口，东向东海，隔海与日本九州岛相望，南濒杭州湾，西与江苏、浙江两省相接并与安徽相望，共同构成以上海为龙头的“长江三角洲城市群”。<br/>
上海是中国的历史文化名城，拥有深厚的近代城市文化底蕴和众多历史古迹，江南的吴越传统文化与各地移民带入的多样文化相融合，形成了特有的海派文化。2010年成功举办了2010年世界博览会、中国上海国际艺术节、上海国际电影节等大型文化交流活动。<br/>
上海属北亚热带湿润季风气候，四季分明，日照充分，雨量充沛。上海气候温和湿润，春秋较短，冬暖夏凉。1月份最冷，平均气温约4℃，通常7月份最热，平均气温约28℃。[5]
上海是中国的经济、交通、科技、工业、金融、贸易、会展和航运中心。GDP总量居中国第一，亚洲第二。上海港货物吞吐量和集装箱吞吐量均居世界第一，是一个良好的滨江滨海国际性港口。上海正致力于在2020年建成国际金融、航运和贸易中心。上海作为远东最大都市之一，有“中国的商业橱窗”之称。<br/>
上海是中国主要旅游城市之一。主要景点有上海博物馆、上海城市规划展示馆、东方明珠广播电视塔、上海大剧院、上海豫园、豫园商城、上海外滩风景区、上海新天地娱乐休闲街、陆家嘴金融贸易区等。
</div>
<div class="con">
广州，简称穗，别称羊城、花城，广东省省会，位于广东省中南部，东江、西江、北江交汇处，珠江三角洲北缘，濒临中国南海。<br/>
广州对外贸易发达，得益于良好的地理位置，广州自秦汉至明清，一直是中国对外贸易的重要港口城市。汉武帝时期，即有中国船队从广州出发，远航至东南亚和南亚诸国通商贸易。到明清时期，广州更是特殊开放的口岸，较长时间内曾是全国唯一的对外贸易港口城市。<br/>
每年春秋两季专门在广州举办的“中国进出口商品交易会”（即“广交会”），与世界200多个国家和地区建立经贸联系，吸引了大量的客商及投资者。
</div>
<div class="con">深圳，别称鹏城，广东省副省级市，中国国家区域中心城市，国际花园城市，中国四大一线城市之一。深圳地处广东省南部，珠江三角洲东岸，与香港一水之隔，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，北部与东莞、惠州接壤。<br/>
深圳是中国改革开放建立的第一个经济特区，是中国改革开放的窗口，已发展为有一定影响力的国际化城市，创造了举世瞩目的“深圳速度”，同时享有“设计之都”、“钢琴之城”、“创客之城”等美誉。<br/>
深圳市域边界设有中国最多的出入境口岸。深圳也是重要的边境口岸城市，皇岗口岸实施24小时通关。</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tabfocus =$('.tabfocus ul li');
var $conn = $('.conn .con');
var $b = $('.tabfocus div.line');
$tabfocus.mouseover(function(){
var index = $tabfocus.index(this);
$conn.eq(index).fadeIn('fast').siblings().hide();
var len = $tabfocus.width();
$b.stop(true,false).animate({'left':len*index+'px'},200);
});
});
</script>
</body>
</html>
