<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 所有元素的边框由我来定义 */
.inner_c{
width: 1000px;
margin: 0 auto;
background-color: #eee;
margin-bottom: 20px;
}
.navbar{
position: fixed;
width: 60px;
border: 1px solid #ccc;
}
.navbar ul{
list-style: none;
}
.navbar li{
line-height: 300%;
text-align: center;
}
.navbar li.cur{
background-color: navy;
color: white;
}
</style>
<div class="navbar" id="navbar">
<ul>
<li data-navli="1">太阳</li>
<li data-navli="2">月亮</li>
<li data-navli="3">水星</li>
<li data-navli="4">金星</li>
<li data-navli="5">火星</li>
<li data-navli="6">木星</li>
<li data-navli="7">土星</li>
<li data-navli="8">天王星</li>
<li data-navli="9">海王星</li>
</ul>
</div>
<div class="inner_c header" style="height:363px;">
航天-星球探索
</div>
<div class="inner_c" data-grid="1" style="height:563px;">
<h3>太阳</h3>
<p>太阳(Sun)是太阳系的中心天体,占有太阳系总体质量的99.86%。
太阳系中的八大行星、小行星、流星、彗星、外海王星天体以及星际尘埃等，都围绕着太阳公转，而太阳则围绕着银河系的中心公转。
太阳是位于太阳系中心的恒星,它几乎是热等离子体与磁场交织着的一个理想球体。
太阳直径大约是1392000(1.392x10⁶)千米,相当于地球直径的109倍;
体积大约是地球的130万倍;其质量大约是2x10³⁰千克(地球的330000倍)。
从化学组成来看，现在太阳质量的大约四分之三是氢，剩下的几乎都是氦,
包括氧、碳、氖、铁和其他的重元素质量少于2%，采用核聚变的方式向太空释放光和热。
太阳目前正在穿越银河系内部边缘猎户臂的本地泡区中的本星际云。
在距离地球17光年的距离内有50颗最邻近的恒星系(与太阳距离最近的恒星是称作比邻星的红矮星,大约4.2光年)。
太阳是一颗黄矮星(光谱为G2V),黄矮星的寿命大致为100亿年,目前太阳大约45.7亿岁。
虽然氦聚变产生的能量比氢聚变产生的能量少，但温度也更高，因此太阳的外层将膨胀，并且把一部分外层大气释放到太空中。
当转向新元素的过程结束时，太阳的质量将稍微下降，外层将延伸到地球或者火星目前运行的轨道处（这时由于太阳质量的下降，这两颗行星将会离太阳更远）。</p>
</div>
<div class="inner_c" data-grid="2" style="height:563px; ">
<h3>月亮</h3>
<p>月球(英文名:Moon,拉丁文:Luna)是围绕地球旋转的球形天体，同时也是地球的天然卫星。
月球是太阳系中体积第五大的卫星,其平均半径约为1737.10千米.,相当于地球半径的0.273倍；
质量则接近7.342x10²²千克,相当于地球的0.0123倍 [1]。月球的表面布满了可能由小天体撞击形成的撞击坑。
月球与地球的平均距离约38.44万千米,大约是地球直径的30倍。
月球具有与地球相似的流体外核和固体内核。</p>
</div>
<div class="inner_c" data-grid="3" style="height:863px; ">
<h3>水星</h3>
<p>水星(英语:Mercury:拉丁语:Mercurius),因快速运动,欧洲古代称它为墨丘利(Mercury),意为古罗马神话中飞速奔跑的信使神。
中国古称辰星，西汉《史记‧天官书》的作者司马迁从实际观测发现辰星呈灰色，与五行学说联系在一起，以黑色属水，将其命名为水星。
水星是太阳系的八大行星中最小且最靠近太阳的行星。轨道周期是87.9691天,116天左右与地球会合一次,公转速度远远超过太阳系的其它行星。
水星是表面昼夜温差最大的行星,大气层极为稀薄无法有效保存热量,白天时赤道地区温度可达437°C,夜间可降至-172°C。
水星的轴倾斜是太阳系所有行星中最小的(大约1/30度),但有最大的轨道偏心率。水星在远日点的距离大约是在近日点的1.5倍。
水星表面遍布环形山，与月球和其他卫星相似，其地质在数十亿年来都处于非活动状态。
水星无四季变化，行星中仅有它与太阳轨道共振。每自转三圈的时间与绕太阳公转两圈的时间几乎相等。
从太阳看水星，参照它的自转与公转，每两个水星年才一个太阳日。
水星的轨道位于地球的内侧（与金星相同），所以它只能在晨昏之际与白天出现于天空中，而不会在子夜前后出现。
从地球看水星的亮度有很大的变化，视星等从-2.48至7.25等,但是它与太阳的距角最大只有28.3°。
在北半球，只能在凌晨或黄昏的曙暮光中看见水星。当大距出现于赤道以南的纬度时，在南半球的中纬度可以在完全黑暗的天空中看见水星。</p>
</div>
<div class="inner_c" data-grid="4" style="height:263px; ">
<h3>金星</h3>
<p>金星(英语、拉丁语:Venus,天文符号:♀),在太阳系的八大行星中,是从太阳向外的第二颗行星,轨道公转周期为224.7天，没有天然的卫星。
金星在中国古代称为太白、明星或大嚣，早晨出现于东方称启明，晚上出现于西方称长庚。到西汉时期，《史记‧天官书》作者司马迁从实际观测发现太白为白色，
与“五行”学说联系在一起,正式把它命名为金星。英文名称源自罗马神话的爱与美的女神维纳斯(Venus),古希腊人称为阿佛洛狄忒，
也是希腊神话中爱与美的女神。金星的天文符号用维纳斯的梳妆镜来表示。
金星在夜空中的亮度仅次于月球，是第二亮的天体，视星等可以达到-4.7等，足以在地面照射出影子。
由于金星是在地球内侧的内行星,它永远不会远离太阳运行:它的离日度最大值为47.8°。金星是一颗与地球相似的类地行星，常被称为地球的姊妹星。
它有着太阳系四颗类地行星中最浓厚的大气层,其中超过96%都是二氧化碳,金星表面的大气压力是地球的92倍。
其表面的平均温度高达735 K(462 °C),是太阳系中最热的行星，比最靠近太阳的水星还要热。
金星被一层高反射、不透明的硫酸云覆盖着，阻挡了来自太空中，可能抵达表面的可见光。
它在过去可能拥有海洋，但是随着失控的温室效应导致温度上升而全部蒸发掉。
水最有可能因为缺乏行星磁场而受到光致蜕变分解成氢和氧，而自由氢被太阳风吹散，逃逸到星际空间。
2020年9月15日,科学家在金星大气层中侦测到磷化氢存在,这可能是地外生命存在的迹象。</p>
</div>
<div class="inner_c" data-grid="5" style="height:593px; ">
<h3>火星</h3>
<p>火星（英语：Mars；拉丁语：Martis；天文符号：♂），是距离太阳第四近的行星，也是太阳系中仅次于水星的第二小的行星，为太阳系里四颗类地行星之一。
欧洲古称火星为“马尔斯 [43]”，古罗马神话中的“战神”，也被称为“红色星球”。古汉语中则因为它荧荧如火，位置和亮度时常变动而称之为荧惑。
其橘红色外表是因为地表被赤铁矿（氧化铁）覆盖，火星的直径约为地球的一半，自转轴倾角和自转周期则与地球相近，但公转周期是地球的两倍。
火星亮度最高可达-2.9等，但在大部分时间里比木星暗。
火星大气以二氧化碳为主（95.3%），既稀薄又寒冷，遍布撞击坑、峡谷、沙丘和砾石，没有稳定的液态水。南半球是古老、充满撞击坑的高地，
北半球则是较年轻的低地平原。火星上最大的火山—奥林帕斯山和最大的峡谷—水手号峡谷。火星有两个天然卫星：火卫一和火卫二，形状不规则，
可能是捕获的小行星。根据观测的证据，在火星观察到类似地下水涌出的现象，南极冰冠有部分退缩，雷达数据显示两极和中纬度地表下存在大量的水冰。
火星有美国宇航局和欧洲发射的四艘在轨环绕探测器，分别是奥德赛号、火星快车号、火星全球勘测者和MAVEN火星探测器。
表面还有多个美国的火星车，如好奇号、洞察号以及结束任务的火星探路者号、凤凰号、勇气号和机遇号等等。
2021年5月15日，科研团队根据“祝融号”火星车发回遥测信号确认，“天问一号”着陆巡视器成功着陆于预选着陆区，中国首次火星探测任务取得圆满成功。
</p>
</div>
<div class="inner_c" data-grid="6" style="height:463px; ">
<h3>木星</h3>
<p>木星（Jupiter）是太阳系中距离太阳第五近的行星，也是太阳系中体积最大的行星。
古人早已认识这颗行星 ，罗马人以主神朱庇特命名这颗行星。古代中国则称木星为岁星，取其绕行天球 [19]一周约为12年，与地支相同之故。
到西汉时期，《史记‧天官书》作者司马迁从实际观测发现岁星呈青色，与“五行”学说联系在一起，正式把它命名为“木星”。
从地球看木星，视星等最高可达-2.94等，已经可以在地面照出物体阴影。
木星是继月球和金星之后，是夜空平均亮度第三的天体（火星在其轨道的特定点上时能短暂超过木星的亮度）。
木星是颗巨行星，质量是太阳的千分之一，但却是太阳系其他行星质量总和的2.5倍。
木星的主要成分是氢，但只占十分之一分子数量的氦，却占了总质量的四分之一；它可能有岩石核心和重元素，但没有可以明确界定的固体表面。
由于快速地自转，木星的外观呈现扁球体。大气层依纬度成不同的区域带，在彼此的交界处有湍流和风暴作用着。
最显著的例子就是大红斑，这是17世纪第一次被望远镜见到后就未曾停歇过的巨大风暴。
环绕着木星的还有微弱的行星环和强大的磁层，包括4颗1610年发现的伽利略卫星，截至2023年2月，木星已知有92颗卫星 [22-23]。
木卫三是其中最大的一颗，其直径大于行星中的水星。
早期飞掠木星的探测器有先驱者号和旅行者号各2艘，后来环绕木星探测的伽利略号、朱诺号以及借用木星引力加速飞往冥王星的新视野号。
未来仍将有不少探测木星系统的太空任务。</p>
</div>
<div class="inner_c" data-grid="7" style="height:363px; ">
<h3>土星</h3>
<p>土星（英文：Saturn，拉丁文：Saturnus，符号：♄），是太阳系八大行星之一，到太阳的距离排在太阳系第六位。
古代中国土星是中国古代人根据五行学说结合肉眼观测到的土星的颜色（黄色）来命名的，亦称之为镇星（常写作填星）。
土星的英文名称Saturn来自于罗马神话中的农业之神萨图恩。
土星是气态巨行星，主要由氢组成，还有少量的氦与少量元素，内部的核心包括岩石和冰，外围由数层金属氢和气体包覆着。
最外层的大气层在外观上通常情况下都是平淡的，虽然有时会有长时间存在的特征出现。土星的风速高达1800千米/时，风速明显比木星快。
土星的行星磁场强度介于地球和更强的木星之间。土星有一个显著的行星环系统，主要的成分是冰的微粒和较少数的岩石残骸以及尘土。
2023年确认的土星的卫星有145颗 [13] [16]。
其中，土卫六是土星系统中最大和太阳系中第二大的卫星，仅次于木卫三，比行星中的水星还要大，并且土卫六是太阳系仅有的拥有明显大气层的卫星。
土星自转一周等于10小时33分38秒，大约是地球的半天时长。</p>
</div>
<div class="inner_c" data-grid="8" style="height:563px; ">
<h3>天王星</h3>
<p>天王星（英文：Uranus，天文符号：⛢，占星符号：♅），为太阳系八大行星之一，是太阳系由内向外的第七颗行星（18.37~20.08天文单位），
是一颗在太阳系中离太阳第七近的青色行星， [17]其体积在太阳系中排名第三（比海王星大），质量排名第四（小于海王星），几乎横躺着围绕太阳公转。
封面图为旅行者2号飞掠天王星最近时拍摄的照片。
天王星是第一颗使用望远镜发现的行星。威廉·赫歇尔在1781年3月13日于自宅庭院中发现了这颗行星。
天王星和海王星的内部和大气构成和更巨大的气态巨行星（木星、土星）不同，天文学家设立了冰巨星分类来定义它们。
天王星拥有27颗已知天然卫星，其中有5颗规模较大，另外还有13条较为暗弱的行星环。
天王星大气的主要成分是氢、氦、甲烷和氘。据推测，其内部可能含有丰富的重元素。地幔由甲烷和氨的冰组成，可能含有水。
内核由冰和岩石组成。天王星是太阳系内大气层最冷的行星，最低温度为49K（-224℃）。</p>
</div>
<div class="inner_c" data-grid="9" style="height:563px; ">
<h3>海王星</h3>
<p>海王星（英语：Neptune，天文符号：♆）是太阳系八大行星之一，也是已知太阳系中离太阳最远的大行星。
海王星的轨道半长轴为30.07天文单位，公转周期为164.8年，质量为17.147地球质量（第3位，比它的近邻天王星稍大），半径为3.86地球半径（第4位） [1]。
海王星的视星等最高约为7.67等，需要借助天文望远镜才能观察 [2]。
海王星对肉眼呈蓝色，西方人据此按罗马神话中的海神尼普顿（Neptune）的名字而命名。李善兰等人于1859年翻译《谈天》时，将其中文译文定为海王星。
海王星的大气层的化学组成以氢分子和氦为主。此外，海王星大气中还有微量的甲烷，这是使行星呈蓝色的原因之一。
海王星有着强烈的风暴，测量到的风速高达2400km/h。海王星云顶温度是-218摄氏度（55K），比天王星云顶温度稍高。
据推测，海王星很可能有一个炽热的内部，其核心的温度约7000℃，和大多数已知的行星相似。
海王星的质量稍大于天王星，密度稍大于天王星，而半径稍小于天王星。
海王星在1846年9月23日被发现，是仅有的利用数学预测而非观测意外发现的行星。
天文学家利用天王星轨道的摄动推测出海王星的存在与可能的位置。迄今只有美国国家航空航天局的旅行者2号探测器曾经在1989年8月25日飞掠过海王星。
</p>
</div>
<script type="text/javascript">
//让navbar贴板心对齐
$('#navbar').css('right',$(window).width() / 2-500-60);
//窗口改变时让navbar贴板心对齐
$(window).resize(function(){
$('#navbar').css('right',$(window).width() / 2-500-60);
});
//头部的高度，height()表示内容盒子高度，innerHeight（）表示算padding,outerHeight()表示算上
//边框,outerHeight(ture)表示算上margin。
var headerH =$('.header').outerHeight(true);
//计算好各个楼层的累计高度
var gridHeightArr = [0];
//设置每个小网络的高度
function setGridHeightArr(){
var sum = 0;
gridHeightArr = [0];
//方括号表示有这个属性的div元素
$('div[data-grid]').each(function(){
gridHeightArr.push($(this).offset().top);
});
}
setGridHeightArr();
// 当页面滚动时
$(window).scroll(function(){
// 有效卷动（已经去掉了header的高度），最后的150是一个误差，是一个临近值
var A = $(window).scrollTop() - headerH + 150;
if(A <= 0){
$(".navbar ul li").removeClass("cur");
return;
}
for(var i = 1; i < gridHeightArr.length; i++){
if(A > gridHeightArr[i - 1] && A < gridHeightArr[i]){
break;
}
}
$(".navbar ul li").eq(i - 1).addClass("cur").siblings().removeClass("cur");
});
//单击楼层时做的事情
$('.navbar ul li').click(function(){
var floor =$(this).data('navli');
//得到这楼的位置
var h = $("div[data-grid="+floor+"]").offset().top;
//冲锋
$("html,body").animate({
"scrollTop" :h
},300);
});
</script>
</body>
</html>可以进行优化
效果图
3453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
