如何用 HTML 和 CSS 创建 Netflix 登录页面

对于想要学习网页开发的初学者来说，从一个实际项目入手往往能获得更好的学习效果。今天，我将手把手教你使用 HTML 和 CSS 创建一个 Netflix 风格的登录页面。这个项目不仅能帮助你掌握网页开发的基础知识，还能让你在实践中理解网页布局和设计的精髓。更重要的是，完成这个项目后，你将拥有一个可以展示给未来雇主的作品。现在就让我们开始这段编程之旅吧！

为什么创建 Netflix 登录页面？

学习网页布局：了解如何使用 HTML 创建页面结构，以及如何使用 CSS 实现页面样式和布局。
提升求职竞争力：将此项目添加到你的作品集，向雇主展示你的网页开发能力。
理解用户体验：通过复刻知名网站的界面，学习优秀的用户体验设计。

页面结构分析

我们先来分析一下 Netflix 登录页面的结构：

头部区域：包含 Netflix 标志。
背景图像：增强页面的视觉效果。
登录表单：核心功能区域，包括输入框和按钮。
底部区域：包含帮助链接和语言选择等信息。

开始编码

HTML 结构

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

        
        <!-- 主要内容区域 -->
        <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 设置</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>

    
    <!-- 底部引导 -->
    <div class="w3cschool-promo">
        <p>想更系统地学习 HTML 和 CSS？欢迎访问<a href="https://w3cschool.cn" target="_blank">编程狮 - W3Cschool</a>，获取更多实战项目教程和专业指导！</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('登录功能将在后端实现');
                // 这里可以添加 AJAX 请求发送到服务器
            }
        });
    </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;
}


/* 主要内容区 */
.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;
}


/* 响应式设计 */
@media (max-width: 768px) {
    .main-content {
        width: 90%;
        padding: 40px 30px;
    }

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


/* 底部引导区域 */
.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 语义化标签，让页面结构更清晰。
表单结构：通过 <form> 标签包裹输入控件，使用 <input> 和 <label> 创建了邮箱和密码输入框。
可访问性：通过 aria-label 和 tabindex 等属性提升页面的无障碍访问性。
响应式设计：在 CSS 中使用了媒体查询（@media），确保在不同设备上都能良好显示。

CSS 部分

Flexbox 布局：使用 Flexbox 技术让页面元素对齐和分布更加灵活。
伪元素：利用 ::before 和 ::after 实现一些装饰性效果，减少图片资源的使用。
过渡动画：使用 transition 属性为按钮和输入框添加了平滑的交互效果。
自定义表单样式：对复选框进行了样式重置，创建了更符合整体设计的视觉效果。

如何运行代码

将上述完整代码复制到一个文本编辑器中，如在线HTML编译器_balnk、Trae、记事本等
保存为 .html 文件（例如 netflix-login-w3cschool.html）
用浏览器打开该文件即可查看效果

扩展建议

添加 JavaScript 功能：目前的表单只是前端展示，可以添加 JavaScript 实现真正的表单验证和提交功能。
连接后端 API：在实际应用中，需要将前端与后端 API 连接，实现真正的用户认证功能。
进一步优化样式：根据实际需求调整颜色、字体和布局等样式细节。

编程狮课程推荐

想更系统地学习 HTML 和 CSS？欢迎访问编程狮 – W3Cschool 网站，我们提供了丰富的课程资源，包括但不限于：

HTML5 与 CSS3 基础实战：从零开始学习网页开发的基础知识。
HTML+CSS响应式网页设计：学习如何创建适应不同设备的网页。
高级 CSS 技术：深入学习 Flexbox、Grid Layout 等现代布局技术。

前端开发：零基础入门到项目实战：小白学前端系列课程

结语

通过创建 Netflix 登录页面，你不仅学习了 HTML 和 CSS 的基本语法，还掌握了网页布局和样式设计的技巧。继续练习和探索，你将能够构建出更加复杂和精美的网页。记住，编程狮始终在这里为你提供支持和指导！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。