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

news2024/10/6 1:39:12

源码获取 文末联系

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

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. 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>Home</title>
    <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 navigation</span> <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.cn</div>
            </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>


学的反而越迷茫

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

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

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

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


学习更多

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


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/20528.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java八股文总结】之Spring

文章目录Spring一、Spring介绍1、Spring是什么&#xff1f;特性&#xff1f;2、Spring有哪些模块&#xff1f;3、Spring中的设计模式&#xff1f;二、IOC1、基本概念2、什么是IOC&#xff1f;什么是DI&#xff1f;Q&#xff1a;为什么要使用 IOC 呢&#xff1f;3、Spring IOC的…

一文快速学会hadoop完全分布式集群搭建,很详细

文章目录前言一、准备工作二、克隆三台虚拟机并进行网络配置克隆虚拟机克隆引导修改网络配置验证验证方式一验证方式二三、安装jdk和hadoop四、ssh免密登录配置概述生成公钥和私钥把公钥拷贝到三台虚拟机上面去验证把hadoop103 和 hadoop104的免密登录配置安装上面的操作再做一…

ZYNQ - 无DDR固化程序(代码运行在OCM上)

写在前面 ZYNQ固化时&#xff0c;正常情况下都需要DDR参与&#xff0c;但是有时硬件设计时&#xff0c;可能将DDR去掉或设计出错&#xff0c;这将导致ZYNQ无法正常固化&#xff0c;之前有写过一个使用静态链接库进行无DDR固化的文章&#xff0c;当时那个是压缩了FSBL的相关代码…

yolov5剪枝实战3: yolov5-slimming项目运行演示

1. 下载项目文件 从百度网盘下载并解压 网盘地址,文末有链接:包括项目完整源代码、数据集、原理的课件说明等。 解压源码: yolov5-6.1-slimming.zip项目没有从yolov5 github上直接克隆项目文件,而是从百度网盘上下载项目文件并解压,因为yolov5原始的代码是没有带网络剪枝的,…

ElasticSearch - ​开启搜索的新境界

You Know&#xff0c; for Search ElasticSearch官网 开启搜索的新境界 Elasticsearch 是一个开源的搜索引擎&#xff0c;建立在一个全文搜索引擎库 Apache Lucene™ 基础之上。 Lucene 可以说是当下最先进、高性能、全功能的搜索引擎库。但是 Lucene 仅仅只是一个库。为了充分…

STM32+ MAX30102通过指尖测量心率+血氧饱和度

一、前言 重要的事情放在最前面&#xff1a;max30102只适用于指尖手指测量&#xff0c;不适用与手腕手指测量&#xff0c;如需做成可穿戴样式选择传感器的小伙伴请pass掉他&#xff0c;因为他只有红光和红外2种光&#xff0c;不够充足的数据源去运算。 由于一些原因&#xff0c…

个人开发者轻松接入支付回调

易支付&#xff08;https://epay.jylt.cc&#xff09;- 个人支付如此简单 随着技术的发展&#xff0c;现在个人构建一个网站的成本越来越低&#xff0c;越来越多的个人开发者拥有了自己的网站。个人搭建网站除了带来成就感之外如果能赚一些额外的收入岂不更好&#xff1f; 事…

多目标优化问题的研究概述(Matlab代码实现)

&#x1f352;&#x1f352;&#x1f352;欢迎关注&#x1f308;&#x1f308;&#x1f308; &#x1f4dd;个人主页&#xff1a;我爱Matlab &#x1f44d;点赞➕评论➕收藏 养成习惯&#xff08;一键三连&#xff09;&#x1f33b;&#x1f33b;&#x1f33b; &#x1f34c;希…

ECMAScript

介绍 JavaScript和ECMAScript的区别 html和css的解析在两款浏览器是不同的效果&#xff0c;比如一个页面能在IE解析&#xff0c;但是不能在网景浏览器解析 后面出现了脚本语言&#xff0c;JavaScript&#xff0c;提供了丰富功能&#xff0c;比如输入密码进行正则的判断提示 …

【算法】用动态规划求解背包问题

1.问题描述 有n种物品&#xff0c;每种物品的单件重量为w[i],价值为v[i]。现有一个容量为V的背包&#xff0c;如何选取物品放入背包&#xff0c;使得背包内物品的总价值最大。 下面是本题中我们使用的例子&#xff1a; 有三个物品&#xff0c;第一个物品的重量为3&#xff0c;…

【附源码】Python计算机毕业设计图书销售系统设计

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

用友vs金蝶产品分析(云星空与YonSuite)

产品定位 用友与金蝶二者面对的客户群体是相同的&#xff1a;都是为成长型企业提供一体化服务&#xff0c;由于金蝶云星空发展较早&#xff0c;在部分产品功能上具备一定的先发优势&#xff1b;在产品的架构上&#xff0c;由于YS采用目前最先进的云原生和微服务架构&#xff0…

Bootstrap(一)

目录&#xff1a; &#xff08;1&#xff09;bootstrap容器 1.简单框架使用 2.流体容器 3.固定容器 4.栅格系统 &#xff08;1&#xff09;bootstrap容器 1.简单框架使用 bootstrap-3.3.7、bootstrap-3.3.7-dist 是原码文件&#xff0c;带dist是编译完的&#xff0c;里面…

5.C语言常见运算符及其优先级

运算符 用算术运算符将运算对象&#xff08;也称操作数&#xff09;连接起来的、符合C语言规则的式子&#xff0c;称为C算术表达式。运算对象包括常量、变量、函数等。 例如&#xff1a;a * b / c - 1.5 ‘a’ 运算符的分类 1.双目运算符&#xff1a;即参加运算的操作数有两…

SpringBoot--获取路径中的参数(x-www-form-urlencoded)--方法/实例

原文网址&#xff1a;SpringBoot--获取路径中的参数(x-www-form-urlencoded)--方法/实例_IT利刃出鞘的博客-CSDN博客 简介 本文用示例介绍SpringMVC如何获取路径中的参数。也就是&#xff1a; Content-Type为x-www-form-urlencoded。 代码 Controller BasicController.java…

在线考试系统

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

Prometheus邮件告警

一. 部署Alertmanager&#xff1a; 1. 解压Alertmanager压缩包&#xff1a; [rootnode5 ~]# tar xf alertmanager-0.24.0.linux-amd64.tar.gz -C /usr/local/ 2. 为解压后的文件做软连接&#xff1a; [rootnode5 ~]# ln -sv /usr/local/alertmanager-0.24.0.linux-amd64/ …

SSM整合(三)

redis之简单使用 1.准备工作 1.1 在resource资源文件夹下面创建redis.properties文件,并填写如下内容 #连接端口 redis.port6379 #连接地址 redis.host127.0.0.1 #超时时间&#xff1a;单位ms redis.timeout3000 #授权密码 redis.password #最大连接数&#xff1a;能够同时建…

GUI编程--PyQt5--QLineEdit

文章目录键盘文本输入框文本占位符密码显示与隐藏自动补全输入限制掩码字符光标移动设置文本区域常用编辑功能输入控件&#xff0c;用于捕获用户的信息键盘文本输入框 QLineEdit, 单行&#xff0c;纯文本输入框 # 实例化 文本输入框 le QLineEdit("默认值", windo…

Material Design之CoordinatorLayout 与AppbarLayout与CollapsingToolbarLayout

Material Design 之 CoordinatorLayout 第一次接触CoordinatorLayout 你可能有这些疑问&#xff0c;CoordinatorLayout 到底是个什么玩意儿呢&#xff1f;它到底能帮我们做什么&#xff1f;我们要了解它&#xff0c;肯定是先看官方文档了。文档的第一句话就非常醒目&#xff1a…