概要
天文网页面包含：时间实时更新，正则表达式验证，选项卡切换（mouseover事件）
天文网页图片
主页：
副页：
登录页面：
注册页面：
代码
代码片.zu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>天文网</title>
<link rel="stylesheet" href="css/zu.css">
<script src="./js/zu.js"></script>
</head>
<body>
<div class="box">
<div class="box-1 l">
<p>定位：<a href="">南京</a></p>
<!-- 搜索 -->
<div class="cont">
<form action="" class="parent">
<input type="text" class="search" placeholder="搜索">
<a href="">🔘</a>
</form>
</div>
</div>
<div class="box-2 l">
<p class="p0"></p>
<p>欢迎进入天文网！</p>🕳
</div>
<div class="box-3 l">
<div class="box-3-1 l">
<div class="it l">
<a href="">💎个人VIP</a>
<a href="">📞客户服务</a>
</div>
</div>
<div class="box-3-2 l">
<a href="http://localhost:52330/wook/deng.html" onclick="deng()">登录</a>
<a href="http://localhost:52330/wook/zhuce.html">注册</a>
</div>
</div>
</div>
<div class="text">
<p style="margin-top: 4vh;">——太阳系的八大行星——</p>
</div>
<!-- 盒子1 -->
<div class="box1 l">
<a href="http://localhost:52330/wook/bada.html#b1"><img src="./images/shui.gif"></a>
</div>
<!-- 盒子2 -->
<div class="box2 l">
<a href="http://localhost:52330/wook/bada.html#b2"><img src="./images/jin.gif" alt=""></a>
</div>
<!-- 盒子3 -->
<div class="box3 l">
<a href="http://localhost:52330/wook/bada.html#b3"><img src="./images/di.gif" alt=""></a>
</div>
<!-- 盒子4 -->
<div class="box4 l">
<a href="http://localhost:52330/wook/bada.html#b4"><img src="./images/huo.gif" alt=""></a>
</div>
<!-- 盒子5 -->
<div class="box5 l">
<a href="http://localhost:52330/wook/bada.html#b5"><img src="./images/mu.gif" alt=""></a>
</div>
<!-- 盒子6 -->
<div class="box6 l">
<a href="http://localhost:52330/wook/bada.html#b6"><img src="./images/tu.gif" alt=""></a>
</div>
<!-- 盒子7 -->
<div class="box7 l">
<a href="http://localhost:52330/wook/bada.html#b7"><img src="./images/tian.gif" alt=""></a>
</div>
<!-- 盒子8 -->
<div class="box8 l">
<a href="http://localhost:52330/wook/bada.html#b8"><img src="./images/hai.gif" alt=""></a>
</div>
<div class="box9 1">水星</div>
<div class="box10 1">金星</div>
<div class="box11 1">地球</div>
<div class="box12 1">火星</div>
<div class="box13 1">木星</div>
<div class="box14 1">土星</div>
<div class="box15 1">天王星</div>
<div class="box16 1">海王星</div>
</body>
</html>
zu.css
body{
background-color: rgb(0,0,0);
}
.box{
width: 100%;
height: 10vh;
border-bottom: 1px solid rgb(153, 141, 141);
}
.box-1{
width: 10%;
height: 50px;
}
.box-1 p{
font-size: 20px;
color: rgb(248, 242, 242);
}
.box-1 a{
font-size: 20px;
text-decoration: none;
color: rgb(241, 30, 30);
}
.parent{
/* position: relative; */
/* display: block; */
/* margin: 15px auto; */
margin-top: -57px;margin-left: 20vh;
}
.search{
width: 300px;
height: 40px;
border-radius: 18px;
outline: none;
border: 1px solid rgb(250, 247, 247);
padding-left: 20px;
position: absolute;
}
.parent a{
position: absolute;
left: 430px;
top: 20px;
text-decoration: none;
font-size: 30px;
}
.box-2{
margin-left: 30%;
width: 20%;
height: 88px;
}
.box-2 p{
color: rgb(248, 245, 245);
text-align: center;
}
.box-3{
margin-left: 15%;
width: 25%;
height: 88px;
}
.it{
width: 100%;
height: 30px;
margin-top: 12%;
}
.box-3-1 a{
font-size: 18px;
text-decoration: none;
}
.box-3-2{
width: 40%;
height: 30px;
margin-top: 6.5%;
}
.box-3-2 a{
font-size: 20px;
text-decoration: none;
margin-left: 15%;
}
.text{
width: 100%;
height: 8vh;
background-color: rgb(0,0,0);
}
.text p{
font-size: 5vh;
text-align: center;
color: rgb(250, 245, 245);
}
.l{
float: left;
}
/* 盒子1 */
.box1{
width: 5%;
height: 10vh;
margin-top: 5vh;
}
img{
width: 100%;
height: 100%;
}
/* 盒子2 */
.box2{
width: 10%;
height: 20vh;
margin-top: 10vh;
}
/* 盒子3 */
.box3{
width: 15%;
height: 30vh;
margin-top: 20vh;
}
/* 盒子4 */
.box4{
width: 20%;
height: 40vh;
margin-top: 25vh;
}
/* 盒子5 */
.box5{
width: 15%;
height: 30vh;
margin-top: 20vh;
}
/* 盒子6 */
.box6{
width: 15%;
height: 20vh;
margin-top: 17vh;
}
/* 盒子7 */
.box7{
width: 10%;
height: 20vh;
margin-top: 10vh;
}
/* 盒子8 */
.box8{
width: 10%;
height: 15vh;
margin-top: 3vh;
}
.box9{
margin-left: 0.8%;
margin-top: 12%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box10{
margin-top: 20%;
margin-left: 8%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box11{
margin-top: 30%;
margin-left: 20%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box12{
margin-top: 34%;
margin-left: 38%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box13{
margin-top: 29%;
margin-left: 56%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box14{
margin-top: 24%;
margin-left: 71%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box15{
margin-top: 19%;
margin-left: 83%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
.box16{
margin-top: 12%;
margin-left: 92%;
position:absolute;
font-size: 20px;
color: rgb(252, 246, 246);
}
zu.js
/**
* 年月日时分秒星期几的实时更新
*/
function zero(value){
// if(value<10){
// return "0"+value
// }else{
// return value
// }
return value<10?"0"+value:value
}
function showTime(){
var time=new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
month=zero(month);
var day = time.getDate();
day=zero(day);
var hour = time.getHours();
hour=zero(hour);
var minute = time.getMinutes();
minute=zero(minute);
var second = time.getSeconds();
second=zero(second);
var week = time.getDay();
switch(week){
case 1: week="星期一";break;
case 2: week="星期二";break;
case 3: week="星期三";break;
case 4: week="星期四";break;
case 5: week="星期五";break;
case 6: week="星期六";break;
case 7: week="星期日";break;
}
var result=document.querySelectorAll(".p0");
result[0].innerHTML=year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒"+week;
}
window.setInterval("showTime()",1000);
window.onload=function(){
showTime()
}
bada.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天文网</title>
<link rel="stylesheet" href="./css/bada.css">
<script src="./js/zu.js"></script>
<script src="./js/bada2.js"></script>
</head>
<body>
<div class="box1">
<div class="sou l">
<select class="sou-huan" onchange="location = this.options[this.selectedIndex].value;">
<option value="">选择</option>
<option value="#b1">水星</option>
<option value="#b2">金星</option>
<option value="#b3">地球</option>
<option value="#b4">火星</option>
<option value="#b5">木星</option>
<option value="#b6">土星</option>
<option value="#b7">天王星</option>
<option value="#b8">海王星</option>
</select>
<!-- 搜索 -->
<div class="cont">
<form action="" class="parent">
<input type="text" class="search" placeholder="搜索">
<a href="">🔘</a>
</form>
</div>
</div>
<div class="time l">
<p class="p0"></p>
<p>欢迎进入天文网！</p>🕳
</div>
<div class="deng l">
<div class="deng-1 l">
<div class="it l">
<a href="">💎个人VIP</a>
<a href="">📞客户服务</a>
</div>
</div>
<div class="deng-2 l">
<a href="http://localhost:52330/wook/deng.html">登录</a>
<a href="http://localhost:52330/wook/zhuce.html">注册</a>
</div>
</div>
</div>
<div class="box2" id="b1">
<div class="box2-1 l">
<a href="http://localhost:52330/wook/zu.html">水星</a>
<p>Mercury</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span class="on" divkey="0">详情</span>
<span divkey="1">概述</span>
<span divkey="2">历史</span>
</h2>
<div class="wrap">
<div>
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：水星</td>
<td>半长轴：0.3871 天文单位</td>
</tr>
<tr>
<td>外文名：Mercury</td>
<td>离心率：0.205630</td>
</tr>
<tr>
<td>别名：辰星</td>
<td>公转周期：87.9691 日</td>
</tr>
<tr>
<td>分类：行星、类地行星</td>
<td>平近点角：174.796 度</td>
</tr>
<tr>
<td>质量：3.3011✕1023 kg</td>
<td>轨道倾角：7.00487 度</td>
</tr>
<tr>
<td>平均密度：5.427 g/cm³</td>
<td>升交点经度：48.331 度</td>
</tr>
<tr>
<td>直径：4880 km</td>
<td>体积：6.083×10¹⁰ 立方千米</td>
</tr>
<tr>
<td>表面温度：-190 至 430 ℃</td>
<td>表面积：7.48×10⁷ 平方千米</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>水星（英语：Mercury；拉丁语：Mercurius），因快速运动，欧洲古代称它为墨丘利（Mercury），意为古罗马神话中飞速奔跑的信使神。
中国古称辰星，西汉《史记‧天官书》的作者司马迁从实际观测发现辰星呈灰色，与五行学说联系在一起，以黑色属水，将其命名为水星。<br>
水星是太阳系的八大行星中最小且最靠近太阳的行星。轨道周期是87.9691天，116天左右与地球会合一次，公转速度远远超过太阳系的其它行星。
水星表面遍布环形山，与月球和其他卫星相似，其地质在数十亿年来都处于非活动状态。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>水星最早被闪族人在（公元前三千年）发现，他们叫它Ubu-idim-gud-ud。
最早的详细记录观察数据的是巴比伦人，他们叫它gu-ad或gu-utu。希腊人给它起了两个古老的名字，
当它出现于早晨时叫阿波罗，当它出现于傍晚叫赫耳墨斯，但是希腊天文学家知道这两个名字表示的是同一个东西。
希腊哲学家赫拉克利特甚至认为水星和金星（维纳斯星）是绕太阳公转的而不是地球。中国古代称水星为“辰星”。
它与太阳最大角距不超过28°，由于古代称30°为一辰，故而得名。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box2-2 l">
<img src="./images/x1.jpg" alt="">
</div>
</div>
<div class="box" id="b2">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">金星</a>
<p>Venus</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="4">详情</span>
<span divkey="5">概述</span>
<span divkey="6">历史</span>
</h2>
<div class="wrap">
<div class="none"></div>
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：金星</td>
<td>视星等：-4.92 至 -2.98 等</td>
</tr>
<tr>
<td>外文名：Venus</td>
<td>自转周期：243天</td>
</tr>
<tr>
<td>别名：太白</td>
<td>半长轴：0.723332 天文单位</td>
</tr>
<tr>
<td>分类：行星、类地行星</td>
<td>平近点角：50.115 度</td>
</tr>
<tr>
<td>质量：4.8675✕1024 kg</td>
<td>轨道倾角：3.39458 度</td>
</tr>
<tr>
<td>直径：12103.6 km(±1.0)</td>
<td>升交点经度：76.680 度</td>
</tr>
<tr>
<td>表面温度：464 ℃(737 K)</td>
<td>近日点：0.718440天文单位</td>
</tr>
<tr>
<td>逃逸速度：10.36 km/s</td>
<td>远日点：0.728213 天文单位</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>金星（英语、拉丁语：Venus，天文符号：♀），在太阳系的八大行星中，是从太阳向外的第二颗行星，轨道公转周期为224.7天，
没有天然的卫星。金星在中国古代称为太白、明星或大嚣，早晨出现于东方称启明，晚上出现于西方称长庚。到西汉时期，
《史记‧天官书》作者司马迁从实际观测发现太白为白色，与“五行”学说联系在一起，正式把它命名为金星。英文名称源自罗马神话的爱与美的女神维纳斯（Venus），
古希腊人称为阿佛洛狄忒，也是希腊神话中爱与美的女神。金星的天文符号用维纳斯的梳妆镜来表示。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>人类对太阳系行星的空间探测首先是从金星开始的，
前苏联和美国从20世纪60年代起，就对揭开金星的秘密倾注了极大的热情和探测竞争。
迄今为止，发往金星或路过金星的各种探测器已经超过40个，获得了大量的有关金星的科学资料。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/jin.jpg" alt="">
</div>
</div>
<div class="box" id="b3">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">地球</a>
<p>Earth</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="7">详情</span>
<span divkey="8">概述</span>
<span divkey="9">历史</span>
</h2>
<div class="wrap">
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：地球</td>
<td>离心率：0.0167086</td>
</tr>
<tr>
<td>外文名：Earth</td>
<td>公转周期：365.256363 天</td>
</tr>
<tr>
<td>别名：蓝星、第三行星</td>
<td>升交点经度：-11.26064 度</td>
</tr>
<tr>
<td>分类：行星</td>
<td>体积：1.0832073×10^12km³</td>
</tr>
<tr>
<td>质量：5.97237✕1024 kg</td>
<td>远日点距离：152097701 km</td>
</tr>
<tr>
<td>平均密度：5507.85 kg/m³</td>
<td>近日点距离：147098074 km</td>
</tr>
<tr>
<td>直径：12756 km</td>
<td>轨道周长：924375700 km</td>
</tr>
<tr>
<td>表面温度：14 ℃(287 K)</td>
<td>近日点辐角：114.20783°</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>地球（英文名:Earth）为太阳系由内及外的第三颗行星，也是太阳系中直径、质量和密度最大的类地行星，距离太阳约1.496亿千米（1天文单位）。
地球自西向东自转，同时围绕太阳公转。现有45.5亿岁，有一个天然卫星——月球，二者组成一个天体系统——地月系统。45.5亿年以前起源于原始太阳星云。
地球赤道半径6378.137千米，极半径6356.752千米，平均半径约6371千米，赤道周长约为40075千米，呈两极稍扁赤道略鼓的不规则的椭球体。
地球表面积5.1亿平方千米，其中71%为海洋，29%为陆地，在太空上看地球总体上呈蓝色。大气层，主要成分为氮气和氧气以及少量二氧化碳、氩气等。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>地球的英文名Earth源自中古英语，其历史可追溯到古英语（时常作“eorðe”），在日耳曼语族诸语中都有同源词，其原始日耳曼语词根构拟为“*erþō”。拉丁文称之为“Terra”，为古罗马神话中大地女神忒亚之名。
希腊文中则称之为“Γαῖα”（Gaia），这个名称是希腊神话中大地女神盖亚的名字。中文“地球”一词最早出现于明朝的西学东渐时期，
最早引入该词的是意大利传教士利玛窦（Matteo Ricci，1552－1610），他在《坤舆万国全图》中使用了该词。
清朝后期，西方近代科学引入中国，地圆说逐渐为中国人所接受，“地球”一词（亦作“地毬”）被广泛使用，申报在创刊首月即登载《地球说》一文</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/di.jpg" alt="">
</div>
</div>
<div class="box" id="b4">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">火星</a>
<p>Mars</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="10">详情</span>
<span divkey="11">概述</span>
<span divkey="12">历史</span>
</h2>
<div class="wrap">
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：火星</td>
<td>离心率：0.09341233</td>
</tr>
<tr>
<td>外文名：Mars(英语)</td>
<td>公转周期：686.971 天</td>
</tr>
<tr>
<td>别名：荧惑，玛尔斯</td>
<td>轨道倾角：1.850 度</td>
</tr>
<tr>
<td>分类：行星、类地行星</td>
<td>升交点经度：49.558 度</td>
</tr>
<tr>
<td>质量：6.4171✕1023 kg</td>
<td>会合周期：779.96 天</td>
</tr>
<tr>
<td>平均密度：3.9335 g/cm³</td>
<td>表面重力：0.3794 g</td>
</tr>
<tr>
<td>直径：6779 km</td>
<td>同步轨道高度：17031.568 km</td>
</tr>
<tr>
<td>表面温度：-63 ℃(210 K)</td>
<td>近日点：1.382 天文单位</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>火星（英语：Mars；拉丁语：Martis；天文符号：♂），是离太阳第四近的行星，也是太阳系中仅次于水星的第二小的行星，为太阳系里四颗类地行星之一。
欧洲古称火星为玛尔斯，古罗马神话中的战神，也被称为“红色星球”。古汉语中则因为它荧荧如火，位置、亮度时常变动让人无法捉摸而称之为荧惑。
其橘红色外表是因为地表被赤铁矿（氧化铁）覆盖，火星的直径约为地球的一半，自转轴倾角、自转周期则与地球相近，但公转周期是地球的两倍。
火星亮度最高可达-2.9等，但在大部分时间里比木星暗。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>古罗马人称火星为玛尔斯，是罗马神话中的战神，古巴比伦人也称为“红色星球，因其为红色。
在古中国，取其“荧荧如火、亮度与位置变化甚大使人迷惑”之意，命名“荧惑”。
《尚书·舜典》记载：“在璿玑玉衡以齐七政。”孔颖达疏：“七政，其政有七，于玑衡察之，必在天者，知七政谓日月与五星也。
木曰岁星，火曰荧惑星，土曰镇星，金曰太白星，水曰辰星。”今日则取名“火星”。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/huo.jpg" alt="">
</div>
</div>
<div class="box" id="b5">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">木星</a>
<p>Jupiter</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="13">详情</span>
<span divkey="14">概述</span>
<span divkey="15">历史</span>
</h2>
<div class="wrap">
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：木星</td>
<td>平近点角：20.020 度</td>
</tr>
<tr>
<td>外文名：Jupiter</td>
<td>轨道倾角：1.303 度</td>
</tr>
<tr>
<td>别名：岁星</td>
<td>升交点经度：100.464 度</td>
</tr>
<tr>
<td>分类：行星，类木行星，气态巨行星</td>
<td>远日点：5.4588 天文单位</td>
</tr>
<tr>
<td>发现者：伽利略·伽利雷</td>
<td>近日点：4.9501 天文单位</td>
</tr>
<tr>
<td>发现时间：1960年1月7日</td>
<td>平均公转速度：47051 km/h</td>
</tr>
<tr>
<td>质量：1.8982✕1027 kg(317.8 M⊕)</td>
<td>会合周期：398.88 天</td>
</tr>
<tr>
<td>平均密度：1.326 g/cm³</td>
<td>平均半径：71492 km</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>木星（Jupiter）是距离太阳第五近的行星，也是太阳系中体积最大的行星，截至2019年已知有79颗卫星。
古人早已认识这颗行星 ，罗马人以主神朱庇特命名这颗行星。古代中国则称木星为岁星，取其绕行天球一周约为12年，与地支相同之故。
到西汉时期，《史记‧天官书》作者司马迁从实际观测发现岁星呈青色，与“五行”学说联系在一起，正式把它命名为木星。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>木星，因为在夜晚以肉眼很容易就看见它，当太阳的位置很低时，偶尔也能在白天看见，因此自古以来就为人所知。
在巴比伦，这个天体代表他们的神马尔杜克（Marduk）。他们用木星轨道大约12年绕行黄道一周来定义它们生肖的星宫。
罗马人依据神话将它命名为木星（拉丁语：Iuppiter, Iūpiter，也称为Jova），是罗马神话中主要的神，
它的名字来自原始印欧语系的呼格合成*Dyēu-pəter（主格：*Dyēus-pətēr，意思是“O天神之父”或“O日神之父”）。
相对而言，木星对应于希腊神话是宙斯（Ζεύς），也被称为Dias（Δίας），其中的行星名称仍然保留在现代的希腊语中。
在英语，周四（Thursday）是源自“雷神日”（Thor's day），是出在日耳曼神话。相较于罗马神话就是朱庇特。罗马星期四的Jovis也重新命名为Thursday。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/mu.jpg" alt="">
</div>
</div>
<div class="box" id="b6">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">土星</a>
<p>Saturn</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="16">详情</span>
<span divkey="17">概述</span>
<span divkey="18">历史</span>
</h2>
<div class="wrap">
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名:土星</td>
<td>反照率:0.342(球面，0.499 几何)</td>
</tr>
<tr>
<td>外文名:Saturn</td>
<td>自转周期:10小时33分38秒</td>
</tr>
<tr>
<td>别名:镇星</td>
<td>半长轴:9.5826 天文单位</td>
</tr>
<tr>
<td>分类:行星、气态行星、类木行星</td>
<td>平近点角:317.020 度</td>
</tr>
<tr>
<td>质量:5.6834✕1026 kg</td>
<td>轨道倾角:2.485 度</td>
</tr>
<tr>
<td>平均密度:0.687 g/cm³</td>
<td>升交点经度:113.665 度</td>
</tr>
<tr>
<td>直径:116464 km(赤道半径60268千米，极半径54364千米)</td>
<td>近日点:9.0412 天文单位</td>
</tr>
<tr>
<td>表面温度:-139 ℃(134K，1巴压力大气)</td>
<td>远日点:10.1238 天文单位</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>土星（英文：Saturn，拉丁文：Saturnus，符号：♄），是太阳系八大行星之一，到太阳的距离排在太阳系第六位。
古代中国土星是中国古代人根据五行学说结合肉眼观测到的土星的颜色（黄色）来命名的，亦称之为镇星（常写作填星）。
土星的英文名称Saturn来自于罗马神话中的农业之神萨图恩。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>在史前时代就已经知道土星的存在，在古代，它是除了地球之外已知的五颗行星中最远的一颗，并且有与其特性相符的各式各样的神话。
在古罗马神话中它是农神，从这颗行星所采用的名字，它是农业和收获的神祇。
罗马人认为他与希腊神克洛诺斯，希腊人认为最外层的行星是神圣的克洛诺斯，而罗马人也承袭这个传统。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/tu.jpg" alt="">
</div>
</div>
<div class="box" id="b7">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">天王星</a>
<p>Uranus</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="19">详情</span>
<span divkey="20">概述</span>
<span divkey="21">历史</span>
</h2>
<div class="wrap">
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：天王星</td>
<td>半长轴：19.2184 天文单位</td>
</tr>
<tr>
<td>外文名：Uranus</td>
<td>离心率：0.046381</td>
</tr>
<tr>
<td>别名：赫歇尔的行星、乔治之星</td>
<td>轨道倾角：0.772556 度</td>
</tr>
<tr>
<td>分类：行星、类木行星、远日行星、冰巨星</td>
<td>升交点经度：74.006 度</td>
</tr>
<tr>
<td>发现者：威廉·赫歇尔</td>
<td>卫星数：27</td>
</tr>
<tr>
<td>发现时间：1781年3月13日</td>
<td>大气构成：氢、氦、甲烷、氘</td>
</tr>
<tr>
<td>质量：8.681✕1025 kg（±0.0013）</td>
<td>近日点：18.33 天文单位</td>
</tr>
<tr>
<td>平均密度：1.27 g/cm³</td>
<td>远日点：20.11 天文单位</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>天王星（英文：Uranus，天文符号：⛢，占星符号：♅），为太阳系八大行星之一，是太阳系由内向外的第七颗行星（18.37~20.08天文单位），
其体积在太阳系中排名第三（比海王星大），质量排名第四（小于海王星），几乎横躺着围绕太阳公转。封面图为旅行者2号飞掠天王星最近时拍摄的照片。
天王星是第一颗使用望远镜发现的行星。威廉·赫歇尔在1781年3月13日于自宅庭院中发现了这颗行星。天王星和海王星的内部和大气构成和更巨大的气态巨行星（木星、土星）不同，
天文学家设立了冰巨星分类来定义它们。天王星拥有27颗已知天然卫星，其中有5颗规模较大，另外还有13条较为暗弱的行星环。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>在古代人们就熟知五颗行星（水星、金星、火星、木星、土星），与它们相比，天王星的亮度也是肉眼可见的。但天王星亮度较暗、绕行速度缓慢，
并且由于那时望远镜观测能力不足，被古代的观测者认定为是一颗恒星。天王星在被发现是行星之前，已经被观测了很多次，但都把它当作恒星看待。
最早的纪录可以追溯至1690年约翰·佛兰斯蒂德（John Flamsteed），在星表中将其编为金牛座34（34 Tauri），并且至少观测了6次。
法国天文学家Pierre Charles Le Monnier在1750至1769年也至少观测了12次，包括一次连续四夜的观测。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/tian.jpg" alt="">
</div>
</div>
<div class="box" id="b8">
<div class="box-1 l">
<a href="http://localhost:52330/wook/zu.html">海王星</a>
<p>Neptune</p>
<div class="k">
<div class="k-1">
<div class="content">
<h2>
<span divkey="22">详情</span>
<span divkey="23">概述</span>
<span divkey="24">历史</span>
</h2>
<div class="wrap">
<div class="none">
<ul>
<li>
<dl>
<table class="tables">
<colgroup>
<col width="240">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td>中文名：海王星</td>
<td>半长轴：30.07 天文单位</td>
</tr>
<tr>
<td>外文名：Neptune</td>
<td>离心率：0.008678</td>
</tr>
<tr>
<td>别名：尼普顿</td>
<td>公转周期：164.8 年</td>
</tr>
<tr>
<td>分类：行星；气态行星；冰巨星；远日行星</td>
<td>轨道倾角：1.767975 度</td>
</tr>
<tr>
<td>发现者：奥本·勒维耶</td>
<td>升交点经度：131.784 度</td>
</tr>
<tr>
<td>发现时间：1846年9月23日</td>
<td>近日点：29.81 天文单位</td>
</tr>
<tr>
<td>质量：1.0241✕1026 kg</td>
<td>已知卫星：14</td>
</tr>
<tr>
<td>平均密度：1.638 g/cm³</td>
<td>平均公转速度：19720 km/h</td>
</tr>
</tbody>
</table>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>海王星（英语：Neptune，天文符号：♆）是太阳系八大行星之一，也是已知太阳系中离太阳最远的大行星。
海王星的轨道半长轴为30.07天文单位，公转周期为164.8年，质量为17.147地球质量（第3位，比它的近邻天王星稍大），半径为3.86地球半径（第4位）
海王星的视星等最高约为7.67等，需要借助天文望远镜才能观察。
海王星对肉眼呈蓝色，西方人据此按罗马神话中的海神尼普顿（Neptune）的名字而命名。李善兰等人于1859年翻译《谈天》时，将其中文译文定为海王星。</h1>
</dl>
</li>
</ul>
</div>
<div class="none">
<ul>
<li>
<dl>
<h1>在最早的观测记录中，伽利略·伽利雷（Galileo di Vincenzo Bonaulti de Galilei）在1612年12月28日首度观测并描绘出海王星，1613年1月27日又再次观测，
但因为观测的位置在夜空中都靠近木星（海王星与木星处在合的位置），这两次机会伽利略都误认海王星是一颗恒星。因此，海王星的发现并不归功于他。
1612年12月，他第一次观测海王星时，海王星在天空中几乎是静止的，因为那天它刚好逆行了。这种明显的反向运动是当地球的轨道经过一颗外行星时产生的。
因为海王星才刚刚开始它的年度逆行周期，这颗行星的运动太微弱了，伽利略的小型望远镜无法观测到。2009年，墨尔本大学的物理学家大卫·杰美生宣称，
有新的证据表明伽利略至少知道他看见的星星相对于背景的恒星有微量的相对运动。</h1>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-2 l">
<img src="./images/hai.jpg" alt="">
</div>
</div>
<div class="box3">
<p> 关于我们 —— 广告合作 —— 联系我们 —— 免责声明 —— 网站地图 —— 投诉建议 —— 在线投稿</p>
<p>©CopyRight 2006-2020 Astronomy Inc All Rights Reserved. 天文网 版权所有</p>
</div>
</body>
</html>
bada.css
body{
background-color: rgb(0, 0, 0);
margin-top: 0px;
}
.box1{
width: 101%;
height: 10vh;
position: fixed;
left: -10px;
background-color: rgb(0, 0, 0);
border: 1px solid #726f6f;
}
.sou{
width: 8%;
height: 50px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
}
.sou-huan{
font-size: 20px;
}
.parent{
/* position: relative; */
/* display: block; */
/* margin: 15px auto; */
margin-top: -30px;
margin-left: 20vh;
}
.search{
width: 300px;
height: 40px;
border-radius: 18px;
outline: none;
border: 1px solid rgb(250, 247, 247);
padding-left: 20px;
position: absolute;
}
.parent a{
position: absolute;
left: 28.8%;
top: 2.6%;
position: fixed;
text-decoration: none;
font-size: 30px;
}
.time{
width: 20%;
height: 10vh;
margin-left: 30%;
}
.time p{
text-align: center;
color: rgb(247, 242, 242);
}
.deng{
width: 30%;
height: 7vh;
margin-left: 10%;
}
.it{
width: 100%;
height: 30px;
margin-top: 15%;
}
.deng-1 a{
font-size: 18px;
text-decoration: none;
}
.deng-2{
width: 40%;
height: 30px;
margin-top: 6%;
margin-left: 6%;
}
.deng-2 a{
font-size: 20px;
text-decoration: none;
margin-left: 15%;
}
.l{
float: left;
}
.box2{
width: 100%;
height: 90vh;
background-color: rgb(1, 1,1);
}
.box2-1{
width: 50%;
height: 70vh;
margin-top: 9%;
background-color: rgb(1, 1, 1);
}
.box2-1 a{
font-size: 50px;
text-decoration: none;
color: rgb(247, 239, 239);
}
.box2-1 p{
font-size: 20px;
color: rgb(243, 236, 236);
}
.box2-2{
width: 40%;
height: 70vh;
margin-top: 10%;
}
img{
width: 100%;
height: 100%;
}
.box{
width: 100%;
height: 80vh;
background-color: rgb(1, 1, 1);
}
.box-1{
width: 50%;
height: 70vh;
margin-top: 10%;
background-color: rgb(1, 1, 1);
}
.box-2{
width: 40%;
height: 70vh;
margin-top: 10%;
}
.box-1 a{
font-size: 50px;
text-decoration: none;
color: rgb(247, 239, 239);
}
.box p{
font-size: 20px;
color: rgb(243, 236, 236);
}
.k{
width: 80%;
height: 50vh;
}
.content{
width: 540px;
height: 279px;
margin-left: 20px;
margin-top: 8px;
}
.content h2{
height: 40px;
line-height: 38px;
border-top: solid 2px #0c0707;
border-left: solid 1px #110909;
background-color: rgb(1, 1, 1);
}
.content h2 span{
float: left;
display: inline;
width: 177px;
background-color: rgb(1, 1, 1);
border: solid 1px #140a0a;
border-top: 0px;
border-left: 0px;
text-align: center;
font-size: 22px;
color: rgb(240, 230, 230);
}
.wrap{
width: 532px;
height: 260px;
border: solid 1px #130a0a;
border-top: 0px;
/* text-align: center; */
font-size: 8px;
color: rgb(252, 244, 244);
background-color: rgb(1, 1, 1);
}
.wrap div{
width: 532px;
height: 210px;
padding: 1px 0px 5px;
background-color: rgb(1, 1, 1);
}
ul{
list-style: none;
}
.none{
display: none;
}
.content span.on{
background: none;
border-bottom: 0px;
}
.tables td{
color: rgb(252, 245, 245);
font-size: 15px;
font-weight: bold;
}
.box3{
width: 100%;
height: 100px;
margin-top: 50%;
position:relative;
border: 1px solid #474646;
}
.box3 p{
color: rgb(247, 241, 241);
text-align: center;
}
bada.js
window.onload=function(){
//页面加载完成，触发一下函数执行
var ContentSpan=document.querySelectorAll(".content h2 span");
var WrapDiv=document.querySelectorAll(".wrap div");
for(var i=0;i<ContentSpan.length;i++){
ContentSpan[i].addEventListener("mouseover",function(){
for(var j=0;j<ContentSpan.length;j++){
ContentSpan[j].className="";
}
this.className="on";
for(var k=0;k<WrapDiv.length;k++){
WrapDiv[k].style.display="none";
}
WrapDiv[this.getAttribute("divkey")].style.display="block";
})
}
}
deng.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天文网</title>
<link rel="stylesheet" href="./css/deng.css">
<script src="./js/deng.js"></script>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
<div class="logo"><p>登 录</p></div>
<div class="item">
<input id="username" type="text" autocomplete="off" placeholder="邮箱账号">
<p>⚠请正确输入邮箱账号</p>
</div>
<div class="item">
<input id="password" type="password" autocomplete="off" placeholder="登录密码">
<p>⚠请正确输入密码，区分大小写和特殊符号</p>
</div>
<div class="item">
<button id="submit" onclick="login()">登 录</button>
</div>
<div class="item">
<a class="reg" href="http://localhost:52330/wook/zhuce.html">立即注册</a>
<a class="forget" href="">忘记密码</a>
</div>
</div>
</body>
</html>
deng.css
body{
background: url("../images/deng.jpg") no-repeat top center;
}
.box2{
width: 25%;
height: 50vh;
margin-left: 38%;
margin-top:15%;
border: 1px solid rgb(252, 245, 245);
}
.logo{
width: 100%;
height: 6vh;
}
.logo p{
font-size: 40px;
color: rgb(238, 231, 231);
text-align: center;
;
}
.item input{
width: 50%;
height: 3vh;
margin-left: 23.5%;
}
.item button{
width: 50%;
height: 3vh;
margin-left: 24.5%;
}
.reg{
color: rgb(218, 71, 71);
margin-left: 5vh;
text-decoration: none;
}
.forget{
float:right;
color: rgb(221, 74, 74);
margin-right: 5vh;
text-decoration: none;
}
.item{
margin-top: 3vh;
}
.item p{
font-size: 10px;
margin-left: 23.5%;
color: rgb(221, 74, 74);
}
deng.js
function login() {
var username = document.getElementById("username");
var pass = document.getElementById("password");
if (username.value == "") {
alert("请输入邮箱账号");
} else if (pass.value == "") {
alert("请输入登录密码");
} else if(username.value == "123456@qq.com" && pass.value == "123456"){
window.location.href="zu.html";
} else {
alert("请输入正确的用户名和密码！")
}
}
zhu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天文网</title>
<link rel="stylesheet" href="./css/zhuce.css">
<script src="./js/zhuce.js"></script>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
<div class="logo"><p>注 册</p></div>
<form action="" name="f1">
<div class="item">
<input id="username" type="text" autocomplete="off" placeholder="用户名" name="username">
<p>⚠3-20位字符，可由中文、字母、数字和下划线组成</p>
</div>
<div class="item">
<input id="password1" type="password" autocomplete="off" placeholder="密码" name="password1">
<p>⚠6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
</div>
<div class="item">
<input id="password2" type="password" autocomplete="off" placeholder="确认密码" name="password2">
<p>⚠请再次输入密码</p>
</div>
<div class="item">
<input type="button" value="注册" onclick="submitData()">
</div>
<div class="item">
<a class="reg" href="http://localhost:52330/wook/deng.html">立即登录</a>
<a class="forget" href="">忘记密码</a>
</div>
</form>
</div>
</div>
</body>
</html>
zhu.css
body{
background: url("../images/deng.jpg") no-repeat top center;
}
.box2{
width: 25%;
height: 60vh;
margin-left: 38%;
margin-top:15%;
border: 1px solid rgb(252, 245, 245);
}
.logo{
width: 100%;
height: 5vh;
}
.logo p{
font-size: 35px;
color: rgb(238, 231, 231);
text-align: center;
;
}
.item input{
width: 50%;
height: 3vh;
margin-left: 23.5%;
}
.item button{
width: 50%;
height: 3vh;
margin-left: 24.5%;
}
.reg{
color: rgb(218, 71, 71);
margin-left: 5vh;
text-decoration: none;
}
.forget{
float:right;
color: rgb(221, 74, 74);
margin-right: 5vh;
text-decoration: none;
}
.item{
margin-top: 2vh;
}
.item p{
font-size: 10px;
margin-right: 22%;
margin-left: 22%;
color: rgb(221, 74, 74);
}
zhu.js
function submitData(){
var usernameReg = new RegExp("^[0-9a-zA-Z\u4e00-\u9fa5_]{3,20}$");
var passwordReg = new RegExp("^[\x21-\x7E]{6,20}$");
var username = document.getElementById("username");
var password1 = document.getElementById("password1");
var password2 = document.getElementById("password2");
if(username.value==="" || password1.value==="" || password2.value===""){
alert("输入不能为空！")
return false;
}else if(!usernameReg.test(username.value) || !passwordReg.test(password1.value)){
alert("不通过，格式不对！")
return false;
}else if(password2.value!=password1.value){
alert("不通过，密码不一致！")
return false;
}else{
alert("格式正确，通过！")
return true;
}
}
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
