フロントエンドの試行-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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Laravel チュートリアル

1604

PHP チュートリアル

1509

276

Related knowledge

高度なJavaScriptスコープとコンテキスト Jul 24, 2025 am 12:42 AM

JavaScriptの範囲は、グローバル、機能、およびブロックレベルの範囲に分割される変数のアクセシビリティ範囲を決定します。コンテキストは、この方向を決定し、関数呼び出し方式に依存します。 1.スコープには、グローバルスコープ（どこでもアクセス可能）、関数スコープ（関数内でのみ有効）、およびブロックレベルのスコープ（letとconstは{}内で有効です）が含まれます。 2。実行コンテキストには、変数オブジェクト、スコープチェーン、およびこの値が含まれます。これは、通常の関数におけるグローバルまたは未定義を指します。メソッドコールはコールオブジェクトを指し、コンストラクターは新しいオブジェクトをポイントし、call/apply/bindで明示的に指定することもできます。 3。閉鎖とは、外部スコープ変数へのアクセスと記憶の関数を指します。それらはしばしばカプセル化とキャッシュに使用されますが、引き起こす可能性があります

JavaScriptで入力フィールドの値を取得する方法 Jul 15, 2025 am 03:09 AM

HTML入力ボックスの値を取得するために、コアはDOM操作を介して対応する要素を見つけて値属性を読み取ることです。 1. document.getElementByIDを使用して、最も直接的な方法です。入力にIDを追加した後、このメソッドを使用して要素を取得して値を読み取ることができます。 2。QuerySelectorを使用してより柔軟になり、名前、クラス、タイプなどの属性に基づいて要素を選択できます。 3.入力リスナーを追加または変更して、リアルタイムで入力コンテンツを取得するなど、インタラクティブな関数を達成できます。 4.スクリプトの実行タイミング、スペルミラー、null判断に注意し、値にアクセスする前に要素が存在することを確認してください。

JSで選択したラジオボタンの値を取得するにはどうすればよいですか？ Jul 18, 2025 am 04:17 AM

選択したラジオボタン値を取得するための2つのコアメソッドがあります。 1. QuerySelectorを使用して選択したアイテムを直接取得し、入力[name = "your-radio-name"]を使用します：選択した要素を取得し、その値属性を読み取ります。最新のブラウザに適しており、簡潔なコードがあります。 2。document.getElementsbyNameを使用して、ループノデリストを介して最初にチェックされた無線を見つけて見つけ、その値を取得します。これは、古いブラウザーと互換性がある、またはプロセスの手動制御が必要なシナリオに適しています。さらに、名前属性の綴り、選択されていない状況の処理、およびコンテンツの動的な負荷に注意を払う必要があります

JavaScriptを使用して、安全なサンドボックス付きIFRAMEを構築します Jul 16, 2025 am 02:33 AM

JavaScriptを使用して安全なSandbox iframeを作成するには、最初にHTMLのSandbox属性を使用して、スクリプトの実行、ポップアップウィンドウ、フォームの提出など、iFrameの動作を制限します。第二に、必要に応じて許可を緩和するために、許可を緩和するなどの特定のトークンを追加することにより。次に、PostMessage（）を組み合わせて安全なクロスドメイン通信を実現しながら、メッセージソースとデータを厳密に検証します。最後に、ソースを確認しない、CSPなどをセットアップしないなど、一般的な構成エラーを避け、オンラインになる前にセキュリティテストを実行します。

JavaScriptの日付オブジェクトを使用して日付と時間を操作する Jul 14, 2025 am 03:02 AM

JavaScriptで日付オブジェクトを使用する場合、次のキーポイントに注意を払う必要があります。1。newDate（）を使用して現在の時間を取得するインスタンスを作成するか、文字列、年、月、日のパラメーターを通して時間を指定します。互換性を確保するためにISO形式をお勧めします。 2。getFullyear（）、getMonth（）、およびその他のメソッドを使用して日付と時刻を取得し、文字列を手動でスプライスしてフォーマットします。 3.GETUTCシリーズの方法を使用してUTC時間を処理して、ローカルタイムゾーンの干渉を回避します。 4.タイムスタンプの差で時間間隔を計算しますが、クロスタイムゾーンまたは夏時間の節約時間によって引き起こされる可能性のある逸脱に注意してください。

Vue 3 CompositionAPI vs. OptionsAPI：詳細な比較 Jul 25, 2025 am 03:46 AM

VUE3のCompositapiは、複雑なロジックとタイプの導出により適しており、OptionsAPIはシンプルなシナリオや初心者に適しています。 1。OptionsAPIは、データやメソッドなどのオプションに従ってコードを整理し、明確な構造を持っていますが、複雑なコンポーネントは断片化されています。 2。CompusitionAPIは、セットアップを使用して関連ロジックを集中させます。これは、メンテナンスと再利用を助長します。 3。CompusitionAPIは、混合性機能を介して競合のないパラメーター化可能な論理再利用を実現します。これは、混合物よりも優れています。 4。CoputionAPIは、TypeScriptとより正確なタイプの派生をより適切にサポートしています。 5。2つのパフォーマンスとパッケージングのボリュームに大きな違いはありません。 6。

JavaScriptの並行性パターンのマスター：Webワーカーvs. Javaスレッド Jul 25, 2025 am 04:31 AM

JavaScriptのWebworkersとJavathreadsの同時処理には本質的な違いがあります。 1。JavaScriptは、単一スレッドモデルを採用しています。 Webworkersは、ブラウザによって提供される独立したスレッドです。これは、UIをブロックしないがDOMを操作できない時間のかかるタスクを実行するのに適しています。 2。Javaは、複雑な同時ロジックとサーバー側の処理に適した、スレッドクラスを通じて作成された言語レベルからの実際のマルチスレッドをサポートしています。 3。ウェブワーカーは、PostMessage（）を使用してメインスレッドと通信します。これは非常に安全で孤立しています。 Javaスレッドはメモリを共有できるため、同期の問題に注意する必要があります。 4。ウェブワーカーは、画像処理などのフロントエンドの並列コンピューティングにより適しています。

Javaデバッガーの原則を利用して、複雑なJavaScriptアプリケーションの高度なデバッグ技術 Jul 17, 2025 am 01:42 AM

複雑なJavaScriptアプリケーションをデバッグするには、体系的な使用ツールが必要です。 1.ブレークポイントと条件付きブレークポイントを設定して、条件に応じて、関数入力、ループ、非同期コールバック、フィルターなどの疑わしいプロセスを傍受します。 2.ブラックボクシング機能がサードパーティライブラリの干渉をブロックできるようにします。 3.デバッガーステートメントを使用して、環境判断に基づいてデバッグエントリを制御します。 4.コールスタックを介してコールリンクをトレースし、実行パスと変数ステータスを分析し、それにより問題の根本原因を効率的に見つけます。

See all articles

フロントエンドの試行

コード

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック