当前位置:首页 > 文章列表 > 文章 > 前端 > 前端尝试

前端尝试

来源:dev.to 2024-09-06 22:09:59 0浏览 收藏

编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《前端尝试》,文章讲解的知识点主要包括,如果你对文章方面的知识点感兴趣,就不要错过golang学习网,在这可以对大家的知识积累有所帮助,助力开发能力的提升。

这是前端挑战 v24.09.04 的提交内容,美化我的标记:space

我建造了什么

我构建了一个以太空为主题的登陆页面,提供有关太空探索的信息。目标是创造一个有吸引力的简约设计,突出太空历史、当前任务、未来任务等的关键方面。该页面包括主页、关于、历史、当前任务、未来任务、调查问卷和联系信息等部分。

演示
您可以在此处实时查看该项目。以下是登陆页面的屏幕截图:
前端尝试
太空探索登陆页面

您也可以在github上查看代码

旅程

创建这个项目是一次令人兴奋的旅程。以下是有关该过程的一些要点:

设计和布局:我的目标是干净简约的设计,带有黑暗的太空主题背景,以创造身临其境的体验。布局简单但信息丰富,使用户可以轻松浏览不同的部分。

内容:我包含了有关太空探索历史、当前和未来任务的详细信息。问卷部分允许用户互动并分享他们对太空探索的想法。

挑战:挑战之一是确保动画交互在不同设备和屏幕尺寸上顺利运行。在这个过程中我学到了很多关于响应式设计和跨浏览器兼容性的知识。

未来计划:我计划添加更多互动元素,例如有关太空事实的测验和太空探索中重大事件的时间表。我也希望整合更高级的动画和转场,让页面更加吸引人。

代码

html




    
    
    space exploration
    


    

welcome to space exploration

home

discover the wonders of the universe and our journey into space.

about

learn about the history and future of space exploration.

history of space exploration

1. early concepts (pre-20th century)

ancient civilizations: ancient cultures like the babylonians, egyptians, greeks, and chinese were among the first to study the stars and celestial objects, laying the foundation for astronomy.

17th century: johannes kepler’s laws of planetary motion and isaac newton’s law of universal gravitation provided the necessary understanding for future space travel concepts.

2. early 20th century

tsiolkovsky's rocket equation (1903): russian scientist konstantin tsiolkovsky proposed the idea of space travel using rockets and formulated the tsiolkovsky rocket equation, a fundamental principle in astronautics.

robert goddard (1926): an american physicist, robert goddard, successfully launched the world's first liquid-fueled rocket, proving that space travel was possible.

3. the space race (1950s-1970s)

sputnik 1 (1957): the soviet union launched the first artificial satellite, sputnik 1, into space, marking the beginning of the space age.

yuri gagarin (1961): soviet cosmonaut yuri gagarin became the first human to orbit earth aboard vostok 1, a major milestone in space exploration.

apollo 11 (1969): the united states' nasa successfully landed astronauts neil armstrong and buzz aldrin on the moon, with armstrong famously declaring, "that's one small step for man, one giant leap for mankind."

4. post-moon landings and the space shuttle era (1970s-1990s)

space stations:

  • salyut and mir (1971-1986): the soviet union launched a series of space stations, culminating in the long-lasting mir, which operated until 2001.
  • skylab (1973): the united states launched its first space station, skylab, which was operational for six years.

space shuttle program (1981-2011): nasa’s reusable space shuttle fleet completed 135 missions over 30 years, including launching satellites, conducting scientific research, and assembling the international space station (iss).

5. international cooperation and space exploration (1990s-present)

international space station (iss) (1998-present): a joint effort by nasa, roscosmos (russia), esa (europe), jaxa (japan), and other partners, the iss serves as a hub for scientific research and international collaboration in low earth orbit.

mars exploration:

  • rovers and orbiters: the mars rovers like spirit, opportunity, curiosity, and perseverance have provided detailed information about the martian surface and its potential to support life.
  • exomars (2020): a european-russian mission designed to search for signs of life on mars.

6. private space exploration and the future (2000s-present)

commercial spaceflight: companies like spacex, blue origin, and virgin galactic are pioneering commercial space travel, aiming to make space more accessible to private individuals and researchers.

current missions

explore the ongoing missions that are expanding our understanding of the universe.

future missions

learn about the upcoming missions that aim to push the boundaries of space exploration.

questionnaire















contact

get in touch with us for more information about space exploration.

© 2024 space exploration. all rights reserved.

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #000;
    color: #fff;
}

.space-background {
    background: rgba(0, 0, 0, 0.8) url('https://www.nasa.gov/sites/default/files/thumbnails/image/potw2048a.jpg') no-repeat center center;
    background-size: cover;
}

header {
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin-bottom: 0.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

form {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 5px;
}

form label {
    display: block;
    margin-bottom: 0.5rem;
}

form input[type="text"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 5px;
}

form input[type="submit"] {
    background: #333;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background: #555;
}

footer {
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

团队
这个项目是一个人的努力,但我想归功于以下资源和灵感:

  • nasa 令人惊叹的太空图像。

  • mdn web 文档,提供有关 web 开发的优秀文档。

许可证
该项目根据 mit 许可证获得许可。请随意使用和修改您认为合适的代码。

本篇关于《前端尝试》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!

版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
拉维尔 |节流|服务提供商|服务容器拉维尔 |节流|服务提供商|服务容器
上一篇
拉维尔 |节流|服务提供商|服务容器
Win10系统无法关闭飞行模式怎么办_Win10系统无法关闭飞行模式解决方法
下一篇
Win10系统无法关闭飞行模式怎么办_Win10系统无法关闭飞行模式解决方法
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ChatExcel酷表:告别Excel难题,北大团队AI助手助您轻松处理数据
    ChatExcel酷表
    ChatExcel酷表是由北京大学团队打造的Excel聊天机器人,用自然语言操控表格,简化数据处理,告别繁琐操作,提升工作效率!适用于学生、上班族及政府人员。
    6044次使用
  • Any绘本:开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本(anypicturebook.com/zh),一款开源免费的AI绘本创作工具,基于Google Gemini与Flux AI模型,让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景,零门槛,高自由度,技术透明,本地可控。
    6462次使用
  • 可赞AI:AI驱动办公可视化智能工具,一键高效生成文档图表脑图
    可赞AI
    可赞AI,AI驱动的办公可视化智能工具,助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析,还是一键生成专业图表、脑图、知识卡片,可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景,大幅提升办公效率,降低专业门槛,是您提升工作效率的得力助手。
    6272次使用
  • 星月写作:AI网文创作神器,助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具,解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配,助力新人快速上手,资深作者效率倍增。
    8243次使用
  • MagicLight.ai:叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台,专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型,保障角色、风格、场景高度一致性,让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销,助您轻松实现创意落地与商业化。
    6862次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码