HTML+CSS+JS网页设计期末课程大作业____（航天月球响应式 3页）

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

HTML结构代码



DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hometitle>
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1651562396552/img/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">

head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    <nav id="menu" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigationspan> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button>
                <a class="navbar-brand page-scroll" href="#page-top">中国探月a>
                <div class="phone"><span>信息报送：span>clep@cnsa.gov.cndiv>
            div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="" class="page-scroll">首页a>li>
                    <li><a href="#services" class="page-scroll">国际视野a>li>
                    <li><a href="mt.html" class="page-scroll">美图a>li>
                    <li><a href="conat.html" class="page-scroll">联系我们a>li>
                ul>
            div>
        div>
    nav>
    <header id="header">
        <div class="intro">
            <div class="overlay">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 intro-text">
                            <h1>“祝融号”近距离“看”降落伞与背罩h1>
                            <p>　2021年7月12日，“祝融号”火星车在南向巡视探测途中，路过降落伞与背罩组合体附近p>
                            <a href="#about" class="btn btn-custom btn-lg page-scroll">点击查看a> div>
                    div>
                div>
            div>
        div>
    header>
    <div id="get-touch">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-md-offset-1">
                    <h3>深空探测科学数据发布系统h3>
                    <p>月球与深空探测科学数据与样品发布系统p>
                div>
                <div class="col-xs-12 col-md-4 text-center"><a href="#contact" class="btn btn-custom btn-lg page-scroll">前往 →a>div>
            div>
        div>
    div>
    <div id="about">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6"> <img src="picture/about.jpg" class="img-responsive" alt=""> div>
                <div class="col-xs-12 col-md-6">
                    <div class="about-text">
                        <h2>工程简介h2>
                        <p>2006年2月，国务院颁布《国家中长期科学和技术发展规划纲要（2006～2020）》，明确将载人航天与探月工程列入国家十六个重大科技专项。 　我国探月工程规划为绕、落、回三期。 　绕 ：2004年～2007年（一期）研制和发射我国首颗月球探测卫星，实施绕月探测。 　落：2013年前后（二期）进行首次月球软着陆和自动巡视勘测。 　回：2020年前（三期）进行首次月球样品自动取样返回探测。
                        p>
                        <h3>组织体系 h3>
                        <div class="list-style">
                            <div class="col-lg-6 col-sm-6 col-xs-12">
                                <ul>
                                    <li>测控系统li>
                                    <li>探月与航天工程中心li>
                                    <li>工程总指挥li>
                                    <li>工程总设计师li>
                                ul>
                            div>
                            <div class="col-lg-6 col-sm-6 col-xs-12">
                                <ul>
                                    <li>运载火箭系统li>
                                    <li>发射场系统li>
                                    <li>地面应用系统li>
                                    <li>探测器系统li>
                                ul>
                            div>
                        div>
                    div>
                div>
            div>
        div>
    div>
    <div id="services">
        <div class="container">
            <div class="section-title">
                <h2>国际视野h2>
            div>
            <div class="row">
                <div class="col-md-4">
                    <div class="service-media"> <img src="picture/service-1.jpg" alt=" "> div>
                    <div class="service-desc">
                        <h3>嫦娥五号月球样品首篇研究成果发表在《Science》h3>
                        <p>近期，由中国地质调查局中国地质科学院地质研究所北京离子探针中心刘敦一研究员和地质所海外高级访问学者澳大利亚科廷大学Alexander Nemchin教授领衔...p>
                    div>
                div>
                <div class="col-md-4">
                    <div class="service-media"> <img src="picture/service-2.jpg" alt=" "> div>
                    <div class="service-desc">
                        <h3>航空航天博览会h3>
                        <p>金秋九月，浪漫珠海。9月26日至29日期间，中国国家航天局邀请多国驻华使馆代表及国际组织人员，赴广东珠海参加2021珠海论坛和第十三届中国国际航空航天博览会系列主题活动。t.p>
                    div>
                div>
                <div class="col-md-4">
                    <div class="service-media"> <img src="picture/service-3.jpg" alt=" "> div>
                    <div class="service-desc">
                        <h3>欧空局发布“欧盟太空计划”h3>
                        <p>当地时间6月22日，欧空局宣布启动“欧盟太空计划”(European Union Space Programme)。根据官网介绍，该计划持续到2027年，届时欧盟27个成员国和英国将深..


                        p>
                    div>
                div>
            div>
            <div class="row">
                <div class="col-md-4">
                    <div class="service-media"> <img src="picture/service-4.jpg" alt=" "> div>
                    <div class="service-desc">
                        <h3>俄卫星星座将能预测北极光h3>
                        <p>日前，俄罗斯航天系统公司高管阿列克谢·科瓦廖夫表示，俄罗斯卫星星座未来可对北极光及其可能出现的纬度进行预测研究。p>
                    div>
                div>
                <div class="col-md-4">
                    <div class="service-media"> <img src="picture/service-5.jpg" alt=" "> div>
                    <div class="service-desc">
                        <h3>NASA持续推进太空引爆点技术h3>
                        <p>美国国家航空航天局(NASA)早已与多家美国太空公司建立起公私合作伙伴关系，开发“引爆点”(Tipping Point)技术，即潜在的革命性太空技术。p>
                    div>
                div>
                <div class="col-md-4">
                    <div class="service-media"> <img src="picture/service-6.jpg" alt=" "> div>
                    <div class="service-desc">
                        <h3>阿联酋火星探测器发射成功h3>
                        <p>北京时间2020年7月20日凌晨5点58分，阿联酋“希望”号火星探测器在日本种子岛太空中心由日本H-2A运载火箭发射成功，开启前往火星之旅，揭开2020年国际火星探测大幕。

                        p>
                    div>
                div>
            div>
        div>
    div>
 
    <div id="footer">
        <div class="container text-center">
            <p>版权所有p>
        div>
    div>
    <script type="text/javascript" src="js/jquery.1.11.1.js">script>
    <script type="text/javascript" src="js/bootstrap.js">script>
    <script type="text/javascript" src="js/main.js">script>

body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

在这里插入图片描述

相关阅读:
深度学习时代的视频理解综述
 python自动化系列之python操作pptx文件
 Mac Pro 突然不能双击打开文件夹
 【Vulfocus靶场-初级】Tomcat后台弱口令+War包文件上传Getshell漏洞复现
 saas系统：巧用MyBatisPlus，成功实现多租户功能
 MySQL-多表查询
 9.20 QT作业
 Matter over Wi-Fi: Raspberry Pi 4开发环境设置
 在Qt设计师（Qt Designer ）控件面板加入自定义控件
 Tech Lead（技术经理）带人之道
原文地址：https://blog.csdn.net/m0_46321522/article/details/127916087