前端嘗試

這是前端挑戰 v24.09.04 的提交內容，美化我的標記：Space

我建造了什麼

我建立了一個以太空為主題的登陸頁面，提供有關太空探索的資訊。目標是創造一個有吸引力的簡約設計，突出太空歷史、當前任務、未來任務等的關鍵方面。此頁麵包括主頁、關於、歷史、當前任務、未來任務、問捲和聯絡資訊等部分。

示範
您可以在此處即時查看該項目。以下是登陸頁面的螢幕截圖：

太空探索登陸頁

您也可以在Github上查看程式碼

旅程

創建這個專案是一次令人興奮的旅程。以下是有關該過程的一些要點：

設計和佈局：我的目標是乾淨簡約的設計，帶有黑暗的太空主題背景，以創造身臨其境的體驗。佈局簡單但資訊豐富，使用戶可以輕鬆瀏覽不同的部分。

內容：我包含了有關太空探索歷史、當前和未來任務的詳細資訊。問卷部分允許使用者互動並分享他們對太空探索的想法。

挑戰：挑戰之一是確保動畫互動在不同裝置和螢幕尺寸上順利運作。在這個過程中我學到了很多關於響應式設計和跨瀏覽器相容性的知識。

未來計畫：我計劃增加更多互動元素，例如有關太空事實的測驗和太空探索中重大事件的時間表。我也希望整合更進階的動畫和轉場，讓頁面更吸引人。

程式碼

HTML

    <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">


    <header class="space-background">
        <h1 id="Welcome-to-Space-Exploration">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 id="Home">Home</h2>
            <p>Discover the wonders of the universe and our journey into space.</p>
        </section>
        <section id="about">
            <h2 id="About">About</h2>
            <p>Learn about the history and future of space exploration.</p>
        </section>
        <section id="history">
            <h2 id="History-of-Space-Exploration">History of Space Exploration</h2>
            <h3 id="Early-Concepts-Pre-th-Century">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 id="Early-th-Century">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 id="The-Space-Race-s-s">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 id="Post-Moon-Landings-and-the-Space-Shuttle-Era-s-s">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 id="International-Cooperation-and-Space-Exploration-s-Present">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 id="Private-Space-Exploration-and-the-Future-s-Present">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 id="Current-Missions">Current Missions</h2>
            <p>Explore the ongoing missions that are expanding our understanding of the universe.</p>
        </section>
        <section id="future-missions">
            <h2 id="Future-Missions">Future Missions</h2>
            <p>Learn about the upcoming missions that aim to push the boundaries of space exploration.</p>
        </section>
        <section id="questionnaire">
            <h2 id="Questionnaire">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 id="Contact">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>

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 許可證獲得許可。請隨意使用和修改您認為合適的程式碼。

以上是前端嘗試的詳細內容。更多資訊請關注PHP中文網其他相關文章！