采用HTML,CSS,JAVASCRIPT的前端网页设计的内容展示

最近在收拾电脑文件,发现了一些大一的东西,回过头来看自己那个时候真的好菜,当然现在还是很菜。废话不多说,直接看图。虽然很丑,但是至少能看吧。后来因为做的页面丑特意去学了UI,也有一些作品集,等以后有机会再发出来

1.首页
在这里插入图片描述
首页代码

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学<a href="https://jinshuju.net/f/WD5YCO" target="_blank">报名入口</a></h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-网站首页</h2>
			<p><b>哈勃观测银河系中仍在进行的最大恒星焰火</b></p>
			<p>2019.7.1:十八世纪40年代,航行在南大洋的水手,夜晚会用船底座一颗特别明亮的恒星来导航——它就是船底座η,中文名海山二。大约有十年,它曾经是夜晚第二亮的恒星(仅次于天狼星)。那些水手很难想象,二十几年后的18世纪60年代,这颗“亮星”会暗淡到肉眼都看不见!海山二经历了一次大规模爆发,然后它隐身于由此产生的尘埃云中。</p>
			<img src="images/002.png" width="100%	" >
			<p>本图由哈勃的第三代广域相机在紫外/光学通道(UVIS)拍摄,曝光时间2018.32018.7,伪彩配色,滤光通道和配色如下:280纳米(nm)的紫外波段电离镁谱线[Mg Ⅱ],蓝;336nm的长波紫外光,绿;658nm的红光电离氮线[NⅡ],红。海山二位于船底座,恒星编号η,离我们约7500光年,天球坐标:赤经104503.546秒,赤纬-59°4103.95″。</p>
			<p>让我们想象一下,一场始于170年前并延续至今的慢动作焰火秀。这不是发生在地球大气层中的烟火表演,它是遥远太空中的一颗超级巨星——它就是船底座η,双星成员中的最大子星。借助美国宇航局(NASA)和欧洲空间局(ESA)合作的哈勃太空望远镜,天文学家给7500光年外的这颗巨星拍摄了从紫外光到近红外光的最新肖像,展示了它炽热的发出红、白、蓝光的膨胀气体(光谱分类上它属于高光度蓝变星,LBV,译注)。</p>
			<p>这个天上的爆发形成了一对双极球瓣状、和丝状结构物的气体尘埃云(就是船底座大星云中的侏儒星云,译注)。这颗狂暴恒星最初质量可能超过了150个太阳质量,几十年来,天文学家一直在猜测,它什么时候会彻底毁灭。</p>
			<p>这场恒星焰火始于18世纪40年代,海山二经历了一场泰坦级爆发而变成整个夜空第二亮的星(堪比一次超新星爆发,译注),并持续近十年。当时的海山二是如此明亮,以至于它成为南大洋水手事实上的导航星。</p>
			<p>但是海山二很快变暗,今天它仅是肉眼勉强可见。不过恒星焰火还在持续,因为船底座η还活着(所以那次大爆发只能算假超新星,译注)!过去25年间,科学家动用包括哈勃在内的一切天文仪器,研究这个古怪而暴躁的天体。</p>
		</div>
	</div>
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权XXXX
			</address>
		</div>
	</div>
	
</body>
</html>

2.天文简介
在这里插入图片描述
简介代码如下

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学</h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-天文简介</h2>
			<p><b></b></p>
			<p>天文学(Astronomy)是研究宇宙空间天体、宇宙的结构和发展的学科。内容包括天体的构造、性质和运行规律等。天文学是一门古老的科学,自有人类文明史以来,天文学就有重要的地位。</p>
			<p>主要通过观测天体发射到地球的辐射,发现并测量它们的位置、探索它们的运动规律、研究它们的物理性质、化学组成、内部结构、能量来源及其演化规律。</p>
			<p>在天文学悠久的历史中,随着研究方法的改进及发展,先后创立了天体测量学、天体力学和天体物理学。</p>
			<div class="img">
				<img src="images/1-1.jpg" width="49%" >
				<img style="margin-left: 10px;" src="images/1-2.jpg" width="49%" >
			</div>
		</div>
	</div>
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权XXXX
			</address>
		</div>
	</div>
	
</body>
</html>

3.天文研究意义
在这里插入图片描述
意义代码如下:

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学</h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-研究意义</h2>
			<p><b></b></p>
			<p>天文学的研究对于我们的生活有很大的实际意义,对于人类的自然观有很大的影响。古代的天文学家通过观测太阳、月球和其他一些天体及天象,确定了时间、方向和历法。这也是天体测量学的开端。如果从人类观测天体,记录天象算起,天文学的历史至少已经有五六千年了。天文学在人类早期的文明史中,占有非常重要的地位。埃及的金字塔、欧洲的巨石阵都是很著名的史前天文遗址。哥白尼的日心说曾经使自然科学从神学中解放出来;康德和拉普拉斯关于太阳系起源的星云说,在十八世纪形而上学的自然观上打开了第一个缺口。</p>
			<p>牛顿力学的出现,核能的发现等对人类文明起重要作用的事件都和天文研究有密切的联系。当前,对高能天体物理、致密星和宇宙演化的研究,能极大地推动现代科学的发展。对太阳和太阳系天体包括地球和人造卫星的研究在航天、测地、通讯导航等部门中都有许多应用。天文起源于古代人类时令的获得和占卜活动。</p>
			<p>天文学循着观测-理论-观测的发展途径,不断把人的视野伸展到宇宙的新的深处。随着人类社会的发展,天文学的研究对象从太阳系发展到整个宇宙。现今,天文学按研究方法分类已形成天体测量学、天体力学和天体物理学三大分支学科。按观测手段分类已形成光学天文学、射电天文学和空间天文学几个分支学科。</p>
			<div class="img">
				<img src="images/22-1.jpg" width="49%" >
				<img src="images/22-2.jpg" style="margin-left: 10px;" width="49%" >
			</div>
		</div>
	</div>
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权XXXX
			</address>
		</div>
	</div>
	
</body>
</html>

4.研究对象
在这里插入图片描述

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学</h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-研究对象</h2>
			<p><b>研究对象</b></p>
			<p>随着天文学的发展,人类的探测范围由目测的太阳、月球、天空中的星星到达了距地球约100亿光年的距离,根据尺度和规模,天文学的研究对象可以分为:</p>
			<p><b>行星层次</b></p>
			<p>包括行星系中的行星、围绕行星旋转的卫星和大量的小天体,如小行星、彗星、流星体以及行星际物质等。恒星系统。</p>
			<p><b>恒星层次</b></p>
			<p>现时人们已经观测到了亿万个恒星,太阳只是无数恒星中很普通的一颗。</p>
			<p><b>星系层次</b></p>
			<p>人类所处的太阳系只是处于由无数恒星组成的银河系中的一隅。而银河系也只是一个普通的星系,除了银河系以外,还存在着许多的河外星系。星系又进一步组成了更大的天体系统,星系群、星系团和超星系团。</p>
			<p><b>宇宙</b></p>
			<p>一些天文学家提出了比超星系团还高一级的总星系。按照现今的理解,总星系就是现时人类所能观测到的宇宙的范围,半径超过了100亿光年。</p>
			<p>在天文学研究中最热门、也是最难令人信服的课题之一就是关于宇宙起源与演化的研究。对于宇宙起源问题的理论层出不穷,其中最具代表性,影响最大,也是最多人支持的就是1948年美国科学家伽莫夫等人提出的大爆炸理论。根据正不断完善的这个理论,宇宙是在约137亿年前的一次猛烈的爆发中诞生的。然后宇宙不断地膨胀,温度不断地降低,产生各种基本粒子。随着宇宙温度进一步下降,物质由于引力作用开始塌缩,逐级成团。在宇宙年龄约10年时星系开始形成,并逐渐演化为现时的样子。</p>
		</div>
	</div>
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权归属XXXX
			</address>
		</div>
	</div>
	
</body>
</html>

5.天文图片
在这里插入图片描述

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学</h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-天文图片</h2>
			<div class="img">
				<span><img src="images/2-1.jpg" width="" ></span>
				<span><img src="images/2-2.jpg" width="" ></span>
				<span><img src="images/2-3.jpg" width="" ></span>
				<span><img src="images/2-4.jpg" width="" ></span>
				<div style="clear: both;"></div>
			</div>
		</div>
	</div>
	
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权归属XXXXX
			</address>
		</div>
	</div>
	
</body>
</html>

6.天文字典
在这里插入图片描述

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学</h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-天文字典</h2>
			<p><b>ZZ Ceti stars 鲸鱼座ZZ型变星</b></p>
			<p>脉动变星的一类,它们全是白矮星,以典型代表鲸鱼座ZZ命名。它们的表面温度约开氏12 000度,脉动周期从短于1分钟到长达30分钟。</p>
			<p><b>Zwicky,Fritz 兹威基,弗里茨</b></p>
			<p>1898-1974),对天体物理学做出了很多贡献的瑞士天文学家,他研究过超新星、致密星系和星系团,是脉冲星发现前认真对待中子星概念的少数人之一。</p>
			<p><b>Zond 探测号飞行器</b></p>
			<p>19631970年间发射的一系列苏联空间探测器的总称。探测1号飞过金星,探测2号飞过火星,都未能发回任何数据。探测3号和58号不着陆考查了月球,探测4号失败。最后四个(探测58号)绕过月球后返回了地球供研究。</p>
			<p><b>zodiac 黄道带</b></p>
			<p>从黄道向两边扩展各9°左右的一个环绕天空的假想带。这个带包含了太阳、月球和除冥王星外的全部行星在天空中的视运动路径,早在古代就引起了观测者的注意。希腊人把黄道带分成12个相等的段(每一段在天空上的宽度为30°),并给每个段起了一个与其中最显著星座对应的名称,这些名称就是“黄道十二宫”。</p>
			<p><b>zero-age main sequence(ZAMS) 零龄主序</b></p>
			<p>ZAMS,一群质量不同,但都在同一时刻开始通过核聚变燃烧氢的恒星在赫罗图上形成的主序。这样的主序就是,比方说,一个刚形成的球状星团应该有的主序。</p>
			<p><b>Yerkes Observatory 叶凯士天文台</b></p>
			<p>1897年乔治·埃勒里·海尔利用百万富翁查尔斯·叶凯士提供的资金,在芝加哥附近建立的天文台,现在由芝加哥大学管理,它的40英寸(102厘米)折射望远镜今天仍然是同类望远镜中世界最大者;其他仪器还有104厘米和61厘米的反射望远镜各一具。</p>
			<p><b>Yagi array 八木天线</b></p>
			<p>由一排平行棒(偶极子)组成的天线。很多家用电视天线就是八木天线;它们也能用于某些射电望远镜。名称源于八木秀津(Hidetsugu Yagi)。</p>
			<p><b>XUV astronomy 超紫外天文学</b></p>
			<p>从波谱的极端紫外到较低能(“软”) X射线之间的波段(简记为XUV波段)研究宇宙的学科。这一波段大致相当于波长10100纳米,或能量10100电子伏。很多XUV源是热的白矮星。见“罗萨特卫星”。
</p>
		</div>
	</div>
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权XXXXXX
			</address>
		</div>
	</div>
	
</body>
</html>

7.星座猜谜
在这里插入图片描述

<!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 rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<style type="text/css">
	.main .img img{margin: 10px;}
</style>
</head>

<body>
	
	<div class="wrap centers">
		<h1>天文学</h1>
	</div>
	
	<div class="ad">
		<div class="centers">
			<a href="">
				<img src="images/ad.jpg" width="100%" >
			</a>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="centers">
			<a href="index.html">网站首页</a>
			<a href="page1.html">天文简介</a>
			<a href="page2.html">研究意义</a>
			<a href="page3.html">研究对象</a>
			<a href="page4.html">天文图片</a>
			<a href="page5.html">天文字典</a>
			<a style="border-right: #000000 1px solid;" href="page6.html">星座猜谜</a>
		</div>
	</div>
	
	
	
	
	<div class="main">
		<div class="centers">
			<h2>天文学-星座猜谜</h2>
			<div class="img">
				<img src="images/img%20(1).jpg" >
				<img src="images/img%20(2).jpg" >
				<img src="images/img%20(3).jpg" >
				<img src="images/img%20(4).jpg" >
				<img src="images/img%20(5).jpg" >
				<img src="images/img%20(6).jpg" >
				<img src="images/img%20(7).jpg" >
				<img src="images/img%20(8).jpg" >
			</div>
		</div>
	</div>
	
	
	<div class="footer">
		<div class="centers">
			<address>
				版权归属XXXXXX
			</address>
		</div>
	</div>
	
</body>
</html>

8.下载链接
https://download.csdn.net/download/cchengjie007/85042629

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

007的米奇妙妙屋

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

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

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

打赏作者

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

抵扣说明:

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

余额充值