航天网页
html代码
<!DOCTYPE html>
<html>
<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>Document</title>
<script src="jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="test25.css">
</head>
<body>
<a id="section1"></a>
<br>
<h1 class="bt">我国航天历史进程</h1>
<div class="bq">
<a href="#section1">首页</a>
<a href="#section2">四大里程碑</a>
<a href="#section3">航天员简介</a>
<a href="#section4">载人飞船</a>
</div>
<div class="backgrund">
<p>中国航天史是从1956年二月份开始的，当时著名科学家钱学森向中央提出《建立中国国防航空工业的意见》。向中央提出《建立中国国防航空工业的意见》。</p>
<a href="ht1.webp" data-lightbox="image-set" data-title="Optional caption">
<img src="ht1.webp" width="200px" height="100">
</a>
<br>
<p>聂荣臻任主任，黄克诚、赵尔陆任副主任，航空工业委员会的成立标志着中国的航天事业创业的开始。</p>
<a id="section2"></a>
<br>
<h1>中国航天发展四大里程碑</h1>
<br>
<p>（1）第一个想到利用火箭飞天的人——明朝的万户</p>
<p>14世纪末期，明朝的官员万户把47个自制的火箭绑在椅子上，自己坐在椅子上，双手举着大风筝。他最先开始设想利用火箭的推力，飞上天空，然后利用风筝平稳着陆。
不幸火箭爆炸，万户也为此献出了宝贵的生命。但他的行为却鼓舞和震撼了人们的内心。促使人们更努力的去钻研。</p>
<p>（2）东方红一号——中国第一颗人造卫星</p>
<p>1970 年4月24日中国第一颗人造卫星“东方红1 号”成功升空。成为了中国航天发展史上第一个里程碑。</p>
<p>（3） 载人航天</p>
<p>2003 年10 月15 日，中国神舟五号载人飞船升空，表明中国掌握载人航天技术，成为中国航天事业发展史上的第三个里程碑。</p>
<p>（4）深空探测-嫦娥奔月</p>
<p>2007年10月24日18时05分，随着嫦娥一号成功奔月，嫦娥工程顺利完成了一期工程。
此后，神舟九号与天宫一号相继发射，并成功对接。
2016年9月15日22时04分09秒，天宫二号空间实验室在酒泉卫星发射中心发射成功</p>
<a id="section3"></a>
<br>
<br>
<a id="section3"></a>
<h1>航天员简介</h1>
<p>航天员——乘坐航天器进入太空飞行的人员为航天员，也叫宇航员。航天员有职业和非职业两类，
一般分驾驶员、任务专家和载荷专家，或指令长、驾驶员、随船工程师和飞行工程师。最近出现了以旅游为目的的游客航天员。
航天员是开拓太空之路的先锋，作为一名航天员需要具有崇高的献身精神、高深的学识水平、非凡的工作能力、优秀的环境耐力、良好的心理素质和健康的身体条件。</p>
<br>
<br>
<a href="ht2.webp" data-lightbox="image-set" data-title="Optional caption">
<img src="ht2.webp" width="200px" height="100">
</a>
<h1>重要里程碑</h1>
<p>★里程碑之一</p>
<p>1970年4月份24日21时31分，中国“东方红”一号飞向太空。这是中国发射的第一颗人造卫星。</p>
<p>★里程碑之二</p>
<p>1987年8月份，中国返回式卫星为法国搭载试验装置。这是中国打入世界航天市场的首次尝试。</p>
<p>★里程碑之三</p>
<p>2003年10月15日，神舟五号载人飞船升空，搭载杨利伟升空；
2005年10月12日，神舟六号搭载费俊龙，聂海胜两名航天员升空。
2008年9月25日21点10分04秒988毫秒神舟七号搭载翟志刚，景海鹏，刘伯明三名航天员升空。</p>
<a href="ht3.webp" data-lightbox="image-set" data-title="Optional caption">
<img src="ht3.webp" width="200px" height="100">
</a>
<br>
<h3 style="color:rgb(0, 140, 255)">探月时代</h3>
<p>★里程碑之四</p>
<p>2007年10月24日18时05分，搭载着中国首颗探月卫星嫦娥一号的长征三号甲运载火箭在西昌卫星发射中心三号塔架点火成功发射。</p>
<p>★里程碑之五</p>
<p>2010年10月1日18时59分57秒，嫦娥一号卫星的姐妹星嫦娥二号，
在西昌卫星发射中心发射升空，并获得了圆满成功。此次发射目的主要是实现下一步的月球软着陆进行部分关键技术试验，
并对嫦娥三号着陆区进行了高精度成像。</p>
<a href="ht4.webp" data-lightbox="image-set" data-title="Optional caption">
<img src="ht4.webp" width="200px" height="100">
</a>
<a id="section4"></a>
<br>
<h1>载人飞船</h1>
<p>1999年11月20日，中国第一艘无人试验飞船“神舟”一号飞船在酒泉起飞，21小时后在内蒙古中部回收场成功着陆，
圆满完成“处女之行”。这次飞行成功为中国载人飞船上天打下非常坚实的基础。</p>
<p>2003年，“神舟五号”搭载首位中国宇航员杨利伟前往太空；</p>
<p>2008年，“神舟七号”搭载三名宇航员进入太空，翟志刚完成首次出舱行走。</p>
</div>
<div class="card">
<div id="meg">
<h2 style="text-align:center ; color: orange;">留言板</h2>
<input type="text" id="input" placeholder="在这里输入留言">
<select id="rating">
<option value="☆">1星</option>
<option value="☆☆">2星</option>
<option value="☆☆☆">3星</option>
<option value="☆☆☆☆">4星</option>
<option value="☆☆☆☆☆">5星</option>
</select>
<button id="btn">添加留言</button>
<ul id="list"></ul>
<script>
$(function() {
// 添加留言
$("#btn").click(function() {
var message = $("#input").val(); // 获取输入框的值
var rating = $("#rating").val(); // 获取评分的值
if (message !== "") { // 确保留言不为空
var listItem = "<li>" + message + "（评分：" + rating + "） <button class='delete'>删除</button></li>"; // 创建留言项
$("#list").append(listItem); // 将留言项添加到留言列表中
$("#input").val(""); // 清空输入框
}
});
// 删除留言
$("#list").on("click", ".delete", function() {
$(this).parent().remove(); // 删除该留言项
});
});
</script>
</div>
</div>
<script>
$(function(){
$('.card').click(function(){
$(this).append('<span class="icon"></span>');
});
});
</script>
<script>
window.onscroll = function() {
var bp = document.getElementById('bp');
if (window.pageYOffset > 100) { // 滚动超过100像素时
bp.classList.add('sticky'); //JavaScript事件监听器，在页面滚动时触发，页面滚动超过100像素时，它会选取id为'bp'的元素，并给它添加一个名为'sticky'的类
} else {
bp.classList.remove('sticky');
}
};
</script>
<script>
$(document).ready(function(){ //这段代码是一个jQuery事件监听器，它会在文档加载完成后执行。它选取了所有class为'bq'的元素下的所
$(".bq a").hover(function(){ //有链接，当鼠标悬停在链接上时，它会执行一个动画效果，将链接的字体大小从16px变为18px。当鼠标移开时，
$(this).animate({fontSize: '18px'}, "fast"); //它会执行另一个动画效果，将链接的字体大小从18px恢复为16px。这段代码的作用是实现鼠标悬停时链接的放大效果，增强用户体验。
}, function(){
$(this).animate({fontSize: '16px'}, "fast");
});
});
</script>
</body>
</html>
css代码
body {
background-image: url("htbj.webp");
background-repeat: no-repeat; /* 用于指定背景图像在元素背景中的重复方式,这里不重复 */
background-size: cover; /* 于设置背景图片的大小，使其覆盖整个容器元素，同时保持图像的宽高比 */
}
.backgrund{
color: white;
}
.bt{
font-size: 50px; /* 设置字体大小 */
text-align: center ; /* 设置居中 */
color: rgb(0, 140, 255); /* 字体颜色 */
margin-top: 90px; /* 设置元素顶部边距的大小，它可以用来控制元素与其上方元素之间的距离 */
}
p{
text-indent: 40px; /* 定义一个块元素首行文本内容之前的缩进量 */
}
h1{
color:rgb(0, 140, 255) ;
}
img {
right: 20px; /* 距离右边界的距离 */
float: right;/* 浮动，靠右 */
width: 200px; /* 设置图片宽度 */
height: auto; /* 让高度自适应宽度 */
}
.bq {
position: fixed;/* 固定定位 */
top: 0; /* 和position一起实现固定在页面顶部 */
width: 100%;
z-index: 1000;
overflow: hidden;/* 清除溢出，超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 */
background-color:rgb(0, 140, 255);
}
.bq a {
float: left;
display: block; /* 被显示为块级元素，即独占一行，并且会自动换行 */
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /* 内边距 */
text-decoration: none;/* 设置文本上的装饰性线条的外观,设置为没有 */
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.bq a:hover { /*给导航栏添加悬停效果，背景白，字体黑*/
background-color: #ddd;
color: black;
}
#meg {
background-image:url(胡桃2.gif) ;
max-width: 300px; /* 设置最大宽度值 */
margin: 0 auto; /* 外边距 */
padding: 10px; /* 内边距 */
border: 5px solid #ccc; /* 边框宽度.样式.颜色 */
border-radius: 5px; /* 设置边框圆角 */
font-family: Arial, sans-serif; /* 设置默认字体 */
}
#input {
width: 95%;
padding: 10px;
margin-bottom: 10px; /* 设置下边距 */
border: 1px solid #ccc;
border-radius: 3px;
}
#btn {
display: block; /* 被显示为块级元素，即独占一行，并且会自动换行 */
width: 100%;
padding: 10px;
color: #fff;
background-color: #4caf50;
border: none;
border-radius: 3px;
cursor: pointer; /* 设置光标悬停效果，显示为一只手 */
}
ul {
list-style: none; /* 列表前无标记 */
padding: 0;
}
li {
margin-bottom: 5px; /* 下边距 */
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 3px;
}
.delete {
float: right;
padding: 5px 10px;
color: #fff;
background-color: #f44336;
border: none;
border-radius: 3px;
cursor: pointer;
}
.card{
top: 50%;
left: 5%;
width: 450px;
position: relative;
background-color:rgb(0, 140, 255);
padding: 3em;
border-radius: 1rem;
clip-path: circle(30px at 419px 31px);
transition: all 0.3s ease-in-out;
}
.card:hover{
clip-path: circle(75%);
background-color:rgb(0, 140, 255);
}
.selected{
color: rgb(0, 140, 255);;
font: size 5px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
