フロントエンドの試行-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

フロントエンドの試行

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2024 am 06:40 AM

これはフロントエンドチャレンジ v24.09.04、Glam Up My Markup: Space

への提出です。

私が作ったもの

宇宙探査に関する情報を提供する、宇宙をテーマにしたランディングページを作成しました。目標は、宇宙の歴史、現在のミッション、将来のミッションなどの重要な側面を強調する、魅力的でミニマルなデザインを作成することでした。このページには、ホーム、概要、履歴、現在のミッション、将来のミッション、アンケート、連絡先情報のセクションが含まれています。

デモ
ここでプロジェクトをライブで見ることができます。以下はランディングページのスクリーンショットです:
Frontend Attempt
宇宙探査ランディングページ

Github でコードをチェックアウトすることもできます

旅

このプロジェクトの作成はエキサイティングな旅でした。このプロセスに関する重要なポイントをいくつか示します:

デザインとレイアウト: 没入型の体験を生み出すために、宇宙をテーマにした暗い背景を備えたクリーンでミニマルなデザインを目指しました。レイアウトはシンプルですが有益であるため、ユーザーはさまざまなセクションに簡単に移動できます。

内容: 宇宙探査の歴史、現在および将来のミッションに関する詳細な情報が含まれています。アンケートセクションでは、ユーザーが宇宙探査について交流し、意見を共有することができます。

課題: 課題の 1 つは、アニメーションのインタラクティブ性がさまざまなデバイスや画面サイズでスムーズに動作するようにすることでした。このプロセス中に、レスポンシブデザインとブラウザ間の互換性について多くのことを学びました。

将来の計画: 宇宙の事実に関するクイズや宇宙探査における重要な出来事の年表など、よりインタラクティブな要素を追加する予定です。また、より高度なアニメーションやトランジションを統合して、ページをさらに魅力的なものにしたいと考えています。

コード

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Exploration</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="space-background">
        <h1>Welcome to Space Exploration</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#history">History</a></li>
                <li><a href="#current-missions">Current Missions</a></li>
                <li><a href="#future-missions">Future Missions</a></li>
                <li><a href="#questionnaire">Questionnaire</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main class="space-background">
        <section id="home">
            <h2>Home</h2>
            <p>Discover the wonders of the universe and our journey into space.</p>
        </section>
        <section id="about">
            <h2>About</h2>
            <p>Learn about the history and future of space exploration.</p>
        </section>
        <section id="history">
            <h2>History of Space Exploration</h2>
            <h3>1. Early Concepts (Pre-20th Century)</h3>
            <p><strong>Ancient Civilizations:</strong> 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.</p>
            <p><strong>17th Century:</strong> Johannes Kepler’s laws of planetary motion and Isaac Newton’s law of universal gravitation provided the necessary understanding for future space travel concepts.</p>
            <h3>2. Early 20th Century</h3>
            <p><strong>Tsiolkovsky's Rocket Equation (1903):</strong> Russian scientist Konstantin Tsiolkovsky proposed the idea of space travel using rockets and formulated the Tsiolkovsky rocket equation, a fundamental principle in astronautics.</p>
            <p><strong>Robert Goddard (1926):</strong> An American physicist, Robert Goddard, successfully launched the world's first liquid-fueled rocket, proving that space travel was possible.</p>
            <h3>3. The Space Race (1950s-1970s)</h3>
            <p><strong>Sputnik 1 (1957):</strong> The Soviet Union launched the first artificial satellite, Sputnik 1, into space, marking the beginning of the Space Age.</p>
            <p><strong>Yuri Gagarin (1961):</strong> Soviet cosmonaut Yuri Gagarin became the first human to orbit Earth aboard Vostok 1, a major milestone in space exploration.</p>
            <p><strong>Apollo 11 (1969):</strong> 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."</p>
            <h3>4. Post-Moon Landings and the Space Shuttle Era (1970s-1990s)</h3>
            <p><strong>Space Stations:</strong></p>
            <ul>
                <li><strong>Salyut and Mir (1971-1986):</strong> The Soviet Union launched a series of space stations, culminating in the long-lasting Mir, which operated until 2001.</li>
                <li><strong>Skylab (1973):</strong> The United States launched its first space station, Skylab, which was operational for six years.</li>
            </ul>
            <p><strong>Space Shuttle Program (1981-2011):</strong> 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).</p>
            <h3>5. International Cooperation and Space Exploration (1990s-Present)</h3>
            <p><strong>International Space Station (ISS) (1998-present):</strong> 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.</p>
            <p><strong>Mars Exploration:</strong></p>
            <ul>
                <li><strong>Rovers and Orbiters:</strong> The Mars rovers like Spirit, Opportunity, Curiosity, and Perseverance have provided detailed information about the Martian surface and its potential to support life.</li>
                <li><strong>ExoMars (2020):</strong> A European-Russian mission designed to search for signs of life on Mars.</li>
            </ul>
            <h3>6. Private Space Exploration and the Future (2000s-Present)</h3>
            <p><strong>Commercial Spaceflight:</strong> Companies like SpaceX, Blue Origin, and Virgin Galactic are pioneering commercial space travel, aiming to make space more accessible to private individuals and researchers.</p>
        </section>
        <section id="current-missions">
            <h2>Current Missions</h2>
            <p>Explore the ongoing missions that are expanding our understanding of the universe.</p>
        </section>
        <section id="future-missions">
            <h2>Future Missions</h2>
            <p>Learn about the upcoming missions that aim to push the boundaries of space exploration.</p>
        </section>
        <section id="questionnaire">
            <h2>Questionnaire</h2>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required><br><br>

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required><br><br>

                <label for="question1">1. What is your favorite planet?</label><br>
                <input type="text" id="question1" name="question1" required><br><br>

                <label for="question2">2. Have you ever visited a space museum?</label><br>
                <input type="radio" id="yes" name="question2" value="yes">
                <label for="yes">Yes</label><br>
                <input type="radio" id="no" name="question2" value="no">
                <label for="no">No</label><br><br>

                <label for="question3">3. What interests you the most about space exploration?</label><br>
                <textarea id="question3" name="question3" rows="4" cols="50" required></textarea><br><br>

                <input type="submit" value="Submit">
            </form>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <p>Get in touch with us for more information about space exploration.</p>
        </section>
    </main>
    <footer class="space-background">
        <p>© 2024 Space Exploration. All rights reserved.</p>
    </footer>
</body>
</html>

ログイン後にコピー

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 の素晴らしい宇宙画像。
Web 開発に関する優れたドキュメントの MDN Web ドキュメント。

ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています。必要に応じてコードを自由に使用および変更してください。

以上がフロントエンドの試行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7924

Java チュートリアル

1652

CakePHP チュートリアル

1411

Laravel チュートリアル

1303

PHP チュートリアル

1249

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。