如何用 HTML 和 CSS 創(chuàng)建 Netflix 登錄頁面

編程獅（w3cschool.cn） 2025-05-23 14:11:48 瀏覽數(shù) (46)

反饋

對于想要學(xué)習(xí)網(wǎng)頁開發(fā)的初學(xué)者來說，從一個實際項目入手往往能獲得更好的學(xué)習(xí)效果。今天，我將手把手教你使用 HTML 和 CSS 創(chuàng)建一個 Netflix 風(fēng)格的登錄頁面。這個項目不僅能幫助你掌握網(wǎng)頁開發(fā)的基礎(chǔ)知識，還能讓你在實踐中理解網(wǎng)頁布局和設(shè)計的精髓。更重要的是，完成這個項目后，你將擁有一個可以展示給未來雇主的作品?，F(xiàn)在就讓我們開始這段編程之旅吧！

為什么創(chuàng)建 Netflix 登錄頁面？

學(xué)習(xí)網(wǎng)頁布局：了解如何使用 HTML 創(chuàng)建頁面結(jié)構(gòu)，以及如何使用 CSS 實現(xiàn)頁面樣式和布局。
提升求職競爭力：將此項目添加到你的作品集，向雇主展示你的網(wǎng)頁開發(fā)能力。
理解用戶體驗：通過復(fù)刻知名網(wǎng)站的界面，學(xué)習(xí)優(yōu)秀的用戶體驗設(shè)計。

頁面結(jié)構(gòu)分析

我們先來分析一下 Netflix 登錄頁面的結(jié)構(gòu)：

頭部區(qū)域：包含 Netflix 標志。
背景圖像：增強頁面的視覺效果。
登錄表單：核心功能區(qū)域，包括輸入框和按鈕。
底部區(qū)域：包含幫助鏈接和語言選擇等信息。

開始編碼

HTML 結(jié)構(gòu)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netflix 登錄頁面 - 編程獅教程</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="banner">
        <!-- Netflix 標志 -->
        <div class="logo">
            <img src="https://atts.w3cschool.cn/attachments/image/20250522/1747908447939954.png" alt="Netflix 標志">
        </div>

        
        <!-- 主要內(nèi)容區(qū)域 -->
        <div class="main-content">
            <div class="login-form">
                <form>
                    <h1>登錄</h1>

                    
                    <!-- 郵箱輸入框 -->
                    <div class="input-group">
                        <input type="email" id="email" required>
                        <label for="email">電子郵件或手機號碼</label>
                    </div>

                    
                    <!-- 密碼輸入框 -->
                    <div class="input-group">
                        <input type="password" id="password" required>
                        <label for="password">密碼</label>
                    </div>

                    
                    <!-- 登錄按鈕 -->
                    <div class="button-group">
                        <button class="signin-btn" type="submit">登錄</button>
                    </div>

                    
                    <!-- 其他登錄方式 -->
                    <div class="divider">
                        <p>或</p>
                    </div>

                    
                    <div class="button-group">
                        <button class="code-btn" type="button">使用登錄代碼</button>
                    </div>

                    
                    <!-- 忘記密碼 -->
                    <div class="forgot-password">
                        <a href="#">忘記密碼？</a>
                    </div>

                    
                    <!-- 記住我選項 -->
                    <div class="remember-me">
                        <label class="checkbox-container">記住我
                            <input type="checkbox">
                            <span class="checkmark"></span>
                        </label>
                    </div>

                    
                    <!-- 注冊選項 -->
                    <div class="signup-option">
                        <p>新用戶？</p>
                        <a href="#">立即注冊</a>
                    </div>

                    
                    <!-- 安全提示 -->
                    <div class="security-info">
                        <p>
                            該頁面受 Google reCAPTCHA 保護
                            <a href="#">了解更多</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>

        
        <!-- 底部信息 -->
        <footer>
            <div class="footer-content">
                <div class="contact-info">
                    <p>有問題？請致電 <a href="tel:000-800-919-1694">000-800-919-1694</a></p>
                </div>

                
                <div class="links">
                    <a href="#">常見問題</a>
                    <a href="#">幫助中心</a>
                    <a href="#">使用條款</a>
                    <a href="#">隱私政策</a>
                    <a href="#">Cookie 設(shè)置</a>
                    <a href="#">公司信息</a>
                </div>

                
                <div class="language-selector">
                    <select>
                        <option>簡體中文</option>
                        <option>English</option>
                        <option>日本語</option>
                        <option>Fran?ais</option>
                    </select>
                </div>
            </div>
        </footer>
    </header>

    
    <!-- 底部引導(dǎo) -->
    <div class="w3cschool-promo">
        <p>想更系統(tǒng)地學(xué)習(xí) HTML 和 CSS？歡迎訪問<a  target="_blank">編程獅 - W3Cschool</a>，獲取更多實戰(zhàn)項目教程和專業(yè)指導(dǎo)！</p>
    </div>


    <script>
        // 表單驗證示例
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();

            
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            
            if(email && password) {
                alert('登錄功能將在后端實現(xiàn)');
                // 這里可以添加 AJAX 請求發(fā)送到服務(wù)器
            }
        });
    </script>
</body>
</html>

CSS 樣式

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


body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #000;
    color: #999;
}


/* 主橫幅 */
.banner {
    width: 100%;
    height: 100vh;
    position: relative;
    background: url('https://atts.w3cschool.cn/attachments/image/20250522/1747908474547767.jpg') no-repeat center center/cover;
}


.banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
}


/* Netflix 標志 */
.logo {
    position: relative;
    z-index: 2;
    height: 90px;
}


.logo img {
    margin-left: 7%;
    padding-top: 10px;
    width: 170px;
    position: absolute;
    top: 20px;
    left: 40px;
}


/* 主要內(nèi)容區(qū) */
.main-content {
    position: relative;
    z-index: 2;
    width: 450px;
    background: rgba(0, 0, 0, 0.7);
    margin: 0 auto;
    padding: 60px 65px;
}


/* 表單標題 */
.login-form h1 {
    color: white;
    margin-bottom: 30px;
}


/* 輸入框組 */
.input-group {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}


.input-group input {
    width: 100%;
    height: 50px;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
}


.input-group input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
}


.input-group label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #aaa;
    transition: 0.3s;
}


.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
    top: -8px;
    left: 10px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0 5px;
}


/* 按鈕組 */
.button-group {
    margin-bottom: 15px;
}


button {
    width: 100%;
    height: 45px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
}


.signin-btn {
    background-color: #e50914;
    color: white;
}


.signin-btn:hover {
    background-color: #f40612;
}


.code-btn {
    background-color: #333;
    color: white;
}


.code-btn:hover {
    background-color: #444;
}


/* 分隔線 */
.divider {
    text-align: center;
    margin: 20px 0;
    color: #666;
}


/* 忘記密碼 */
.forgot-password {
    text-align: center;
    margin: 20px 0;
}


.forgot-password a {
    color: #aaa;
    text-decoration: none;
}


.forgot-password a:hover {
    text-decoration: underline;
    color: #fff;
}


/* 記住我 */
.remember-me {
    margin: 20px 0;
}


.checkbox-container {
    display: flex;
    align-items: center;
    color: white;
    cursor: pointer;
    user-select: none;
}


.checkbox-container input {
    display: none;
}


.checkmark {
    height: 16px;
    width: 16px;
    background-color: #333;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    margin-right: 10px;
}


.checkbox-container:hover input ~ .checkmark {
    background-color: #555;
}


.checkbox-container input:checked ~ .checkmark:after {
    content: "?";
    position: absolute;
    color: white;
    font-size: 12px;
    top: 1px;
    left: 3px;
}


/* 注冊選項 */
.signup-option {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: white;
}


.signup-option a {
    color: #aaa;
    text-decoration: none;
    margin-left: 10px;
}


.signup-option a:hover {
    text-decoration: underline;
    color: #fff;
}


/* 安全提示 */
.security-info {
    font-size: 12px;
    color: #999;
    margin: 20px 0;
}


.security-info a {
    color: #aaa;
}


.security-info a:hover {
    text-decoration: underline;
    color: #fff;
}


/* 底部樣式 */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
}


.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    color: #999;
}


.contact-info {
    margin-bottom: 15px;
}


.contact-info a {
    color: #aaa;
    text-decoration: none;
}


.contact-info a:hover {
    text-decoration: underline;
    color: #fff;
}


.links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}


.links a {
    color: #aaa;
    text-decoration: none;
    font-size: 14px;
}


.links a:hover {
    text-decoration: underline;
    color: #fff;
}


.language-selector select {
    background-color: #333;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}


/* 響應(yīng)式設(shè)計 */
@media (max-width: 768px) {
    .main-content {
        width: 90%;
        padding: 40px 30px;
    }

    
    .links {
        flex-direction: column;
        gap: 10px;
    }
}


/* 底部引導(dǎo)區(qū)域 */
.w3cschool-promo {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    border-radius: 5px;
    color: white;
    text-align: center;
    z-index: 100;
}


.w3cschool-promo a {
    color: #e50914;
    text-decoration: none;
    font-weight: bold;
}


.w3cschool-promo a:hover {
    text-decoration: underline;
}

代碼解析

HTML 部分

語義化標簽：我們使用了 <header>、<footer> 等 HTML5 語義化標簽，讓頁面結(jié)構(gòu)更清晰。
表單結(jié)構(gòu)：通過 <form> 標簽包裹輸入控件，使用 <input> 和 <label> 創(chuàng)建了郵箱和密碼輸入框。
可訪問性：通過 aria-label 和 tabindex 等屬性提升頁面的無障礙訪問性。
響應(yīng)式設(shè)計：在 CSS 中使用了媒體查詢（@media），確保在不同設(shè)備上都能良好顯示。

CSS 部分

Flexbox 布局：使用 Flexbox 技術(shù)讓頁面元素對齊和分布更加靈活。
偽元素：利用 ::before 和 ::after 實現(xiàn)一些裝飾性效果，減少圖片資源的使用。
過渡動畫：使用 transition 屬性為按鈕和輸入框添加了平滑的交互效果。
自定義表單樣式：對復(fù)選框進行了樣式重置，創(chuàng)建了更符合整體設(shè)計的視覺效果。

如何運行代碼

將上述完整代碼復(fù)制到一個文本編輯器中，如在線HTML編譯器_balnk、Trae、記事本等
保存為 .html 文件（例如 netflix-login-w3cschool.html）
用瀏覽器打開該文件即可查看效果

擴展建議

添加 JavaScript 功能：目前的表單只是前端展示，可以添加 JavaScript 實現(xiàn)真正的表單驗證和提交功能。
連接后端 API：在實際應(yīng)用中，需要將前端與后端 API 連接，實現(xiàn)真正的用戶認證功能。
進一步優(yōu)化樣式：根據(jù)實際需求調(diào)整顏色、字體和布局等樣式細節(jié)。

編程獅課程推薦

想更系統(tǒng)地學(xué)習(xí) HTML 和 CSS？歡迎訪問編程獅 - W3Cschool 網(wǎng)站，我們提供了豐富的課程資源，包括但不限于：

HTML5 與 CSS3 基礎(chǔ)實戰(zhàn)：從零開始學(xué)習(xí)網(wǎng)頁開發(fā)的基礎(chǔ)知識。
HTML+CSS響應(yīng)式網(wǎng)頁設(shè)計：學(xué)習(xí)如何創(chuàng)建適應(yīng)不同設(shè)備的網(wǎng)頁。
高級 CSS 技術(shù)：深入學(xué)習(xí) Flexbox、Grid Layout 等現(xiàn)代布局技術(shù)。

前端開發(fā)：零基礎(chǔ)入門到項目實戰(zhàn)：小白學(xué)前端系列課程

結(jié)語

通過創(chuàng)建 Netflix 登錄頁面，你不僅學(xué)習(xí)了 HTML 和 CSS 的基本語法，還掌握了網(wǎng)頁布局和樣式設(shè)計的技巧。繼續(xù)練習(xí)和探索，你將能夠構(gòu)建出更加復(fù)雜和精美的網(wǎng)頁。記住，編程獅始終在這里為你提供支持和指導(dǎo)！

HTML CSS 前端

0 人點贊