数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML 和 CSS 创建 Netflix 登录页面？
Netflix 采用用户友好的布局和界面设计，对于有抱负的 Web 开发人员来说是一个很好的学习案例。创建类似 Netflix 的登录页面是一个很好的实践。本文将指导您使用 HTML 和 CSS 创建 Netflix 登录页面。
为什么要创建 Netflix 登录页面？
使用 HTML 和 CSS 创建 Netflix 登录页面可以帮助 Web 开发人员以多种方式提升技能。
- 它有助于学习 Web 开发中的各种概念，例如如何在 HTML 中创建不同的布局，以及如何在 HTML 中设计登录表单。
- 它可以用来在求职时突出您对 Web 开发的了解。
Netflix 登录页面的基本布局
Netflix 登录页面包含我们需要创建的以下元素。
- Netflix 徽标：网站顶部左上角包含 Netflix 徽标。
- 背景：Netflix 登录页面使用 Netflix 上提供的多部电影的图像作为背景。
- 登录表单：登录表单是 Netflix 登录页面的主要元素。它包括输入用户名和密码的空间以及提交按钮。
- 页脚：页脚元素包含一些选项，例如“帮助”、“常见问题解答”、“使用条款”等，整齐地排列开来。
使用 HTML 创建 Netflix 登录页面布局
- 为 Netflix 徽标和网页主体创建两个 div 元素。最后，为页脚创建一个页脚元素。
- 在第一个 div 中添加 Netflix 徽标，并在主体中创建登录表单。
- 在登录表单中，添加用于“用户名”、“密码”和“提交”按钮的输入字段。
- 还在 div 中添加其他元素，例如“忘记密码”、“使用登录代码”、“记住我”复选框，以及登录表单内的“Netflix 新用户”注册链接。
- 在页脚中添加指向“常见问题解答”、“帮助中心”、“使用条款”等的链接。
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="banner">
<!-- Structure for Netflix logo on top-->
<div class="logo">
<img src="https://i.ibb.co/SNKRx9w/Netflixlogo.png">
</div>
<div class="main">
<div class="form1">
<!-- Create login form -->
<form>
<h1>Sign In</h1>
<div class="input-field">
<input class="text-input" type="email" required placeholder=" ">
<span >Email or mobile number</span> <br>
<p class="error-message">Please enter a valid e-mail address</p>
</div>
<div class="input-field">
<input class="text-input" type="password" required placeholder=" ">
<span >Password</span>
</div>
<div class="button">
<button class="button1" type="submit">Sign In</button>
</div>
<div class="or">
<p>OR</p>
</div>
<div class="button">
<button class="button2" type="button"
onclick="document.location.href='#'">
Use a sign-in code
</button>
</div>
<div class="fp"><a href="#">Forgot Password?</a></div>
<div class="checkbox">
<label class="container">Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="signup">
<p>New to Netflix ?</p>
<a href="https://www.netflix.com/">Sign up now</a>
</div>
<div class="more">
<p>
This page is protected by Google reCAPTCHA to
ensure you're not a bot.
<a href="#">Learn more.</a>
</p>
</div>
</form>
</div>
</div>
<!-- Create Netflix footer -->
<footer>
<div class="ftr-content">
<div class="contact">
Questions? Call <a href="tel:000-800-919-1694">000-800-919-1694</a>
</div>
<div class="ftr">
<a href="#">FAQ</a>
<a href="#">Help Centre</a>
<a href="#">Terms of Use</a>
<a href="#">Privacy</a>
<a href="#">Cookie Preferences</a>
<a href="#">Corporate Information</a>
</div>
<div class="language">
<select>
<option>English</option>
<option>हिन्दी</option>
<option>العربية</option>
<option>Français</option>
</select>
</div>
</div>
</footer>
</header>
</body>
</html>
使用 CSS 样式化 Netflix 登录页面
- 登录页面的背景使用 CSS 中的 background 设置为图像。
- 每个元素都通过提供 背景颜色、高度、宽度、足够的 边距和 填充（分别使用 background、height、width、padding 和 margin）进行样式化。
- 我们使用了 focus 来在输入元素处于焦点和未处于焦点时应用两种不同的样式。
- 此外，hover 用于在鼠标指针悬停时更改提交按钮和链接属性的颜色。
- transition-duration 用于使悬停时的动画平滑。
- 伪类 not(:focus) 用于识别输入是否未处于焦点状态，以便在处于焦点和未处于焦点状态时设置占位符文本的样式。
- 字体颜色和大小使用 CSS 中的 font-size 和 color 设置为所需值。
CSS 代码
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,h2,h3,h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
/* Style the backgorund of Netflix */
img {
width: 100%;
}
.banner {
width: 100%;
height: 100vh;
position: relative;
background: url('https://tutorialspoint.com/assets/questions/media/1039321-1731037718.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.65);
box-shadow: inset 30px 10px 150px #000000;
}
/* Style the Netflix logo */
.logo {
position: relative;
z-index: 2;
height: 90px;
}
.logo img {
margin-left: 7%;
padding-top: 10px;
width: 170px;
position: absolute;
top: 20px;
left: 40px;
}
/* Style login form container */
.main {
position: relative;
z-index: 2;
width: 450px;
height: 750px;
background: rgb(0, 0, 0, 0.65);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
padding: 60px 65px;
}
/* Style login form heading */
.form1 h1 {
margin-bottom: 20px;
}
/* Style login form */
.form1 {
width: 100%;
margin-bottom: 10px;
}
/* Style text input */
.form1 .input-field {
padding: 5px 0;
position: relative;
}
.form1 .input-field .text-input {
margin-bottom: 10px;
width: 100%;
height: 56px;
color: white;
border: 1px solid rgba(128, 128, 128, 0.7);
border-radius: 5px;
padding: 20px 10px 5px 14px;
font-size: 15.5px;
}
.input-field input {
display: inline-block;
padding: 10px;
}
.input-field span {
color: #aaa;
position: absolute;
pointer-events: none;
left: 15px;
top: 21px;
transition: 0.3s;
}
.input-field input:focus+span,
.input-field input:not(:placeholder-shown)+span{
top: 15px;
left: 15px;
font-size: 11px;
}
.input-field input:not(:focus):not(:placeholder-shown):invalid{
border:1px solid rgba(255, 24, 24, 0.821);
}
.input-field input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
.input-field input:not(:focus):not(:placeholder-shown):valid {
border-color: var(--color-valid);
}
input[type=email],input[type=password] {
background: #3434343f;
}
input[type=email]:focus, input[type=password]:focus{
outline:2px solid #f5f5f5;
outline-offset: 1px;
}
/* Style error message */
.error-message {
display: none;
font-size: small;
padding-left: 5px;
margin-top:0px;
color: rgba(255, 23, 23, 0.796);
}
/* Style signin button */
.form1 .button {
margin-bottom: 10px;
width: 100%;
}
button{
width: 100%;
height: 40px;
border-radius: 5px;
font-size: inherit;
font-weight: bold;
border: none;
cursor: pointer;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
transition-duration: 0.4s;
color: #fff;
}
.button1{
background: red;
}
.button1:hover{
background: rgb(171, 0, 0);
}
/* Style OR */
.or{
padding: 1px;
text-align: center;
}
/* Style Use sign-in code button */
.button2{
background: rgb(66, 56, 56);
}
.button2:hover{
background: rgba(66, 56, 56, 0.688);
}
/* Style forgot password */
.fp{
text-align: center;
height: 40px;
padding: 10px;
margin-bottom: 10px;
text-decoration: none;
width: 100%;
}
.fp a:hover{
text-decoration: underline;
color: #999;
}
/* Style Remember me and checkbox */
.checkbox {
display: flex;
margin-top: 10px;
vertical-align: middle;
justify-content: flex-start;
font-size: 1rem;
}
.checkbox label{
color: #fff;
text-decoration: none;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
border-radius: 3px;
border: 1px solid #939393;
width: 18px;
background-color: #2828288a;
transition-duration: 0.4s;
}
.container:hover input ~ .checkmark {
border: 1px solid #f1f1f1;
}
.container input:checked ~ .checkmark {
background-color: #ffffff;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 5.5px;
top: 2px;
width: 3px;
height: 9px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Style bottom of login form */
.signup {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 10px;
}
.signup p {
margin-right: 5px;
}
.more {
font-size: 0.8em;
line-height: 1.1em;
padding-top: 10px;
}
.more a {
color: rgb(17, 108, 228);
}
.more a:hover,
.signup a:hover {
text-decoration: underline;
}
/* Style Netflix footer */
footer {
position: absolute;
margin-top: 50px;
z-index: 2;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 200px;
}
.ftr-content {
margin-left: 10%;
padding-top: 50px;
padding-bottom: 100px;
font-size: 1em;
}
.ftr-content a {
color: #999;
}
.contact {
margin-bottom: 30px;
}
.contact a:hover {
text-decoration: underline;
}
.ftr a{
margin-bottom: 30px;
min-width: 200px;
width: 24%;
font-size: 14px;
text-decoration: underline;
display: inline-block;
justify-content: space-between;
}
.language select{
color: #fff;
width: 120px;
height: 40px;
border-radius: 5px;
font-size: inherit;
padding-left: 10px;
background: #2828288a;
}
Netflix 登录页面的完整代码
以下是使用 HTML 和 CSS 创建 Netflix 登录页面的最终代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,h2,h3,h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
/* Style the backgorund of Netflix */
img {
width: 100%;
}
.banner {
width: 100%;
height: 100vh;
position: relative;
background: url(
'https://tutorialspoint.com/assets/questions/media/1039321-1731037718.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.65);
box-shadow: inset 30px 10px 150px #000000;
}
/* Style the Netflix logo */
.logo {
position: relative;
z-index: 2;
height: 90px;
}
.logo img {
margin-left: 7%;
padding-top: 10px;
width: 170px;
position: absolute;
top: 20px;
left: 40px;
}
/* Style login form container */
.main {
position: relative;
z-index: 2;
width: 450px;
height: 750px;
background: rgb(0, 0, 0, 0.65);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
padding: 60px 65px;
}
/* Style login form heading */
.form1 h1 {
margin-bottom: 20px;
}
/* Style login form */
.form1 {
width: 100%;
margin-bottom: 10px;
}
/* Style text input */
.form1 .input-field {
padding: 5px 0;
position: relative;
}
.form1 .input-field .text-input {
margin-bottom: 10px;
width: 100%;
height: 56px;
color: white;
border: 1px solid rgba(128, 128, 128, 0.7);
border-radius: 5px;
padding: 20px 10px 5px 14px;
font-size: 15.5px;
}
.input-field input {
display: inline-block;
padding: 10px;
}
.input-field span {
color: #aaa;
position: absolute;
pointer-events: none;
left: 15px;
top: 21px;
transition: 0.3s;
}
.input-field input:focus+span, .input-field input:not(:placeholder-shown)+span{
top: 15px;
left: 15px;
font-size: 11px;
}
.input-field input:not(:focus):not(:placeholder-shown):invalid{
border:1px solid rgba(255, 24, 24, 0.821);
}
.input-field input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
.input-field input:not(:focus):not(:placeholder-shown):valid {
border-color: var(--color-valid);
}
input[type=email],input[type=password] {
background: #3434343f;
}
input[type=email]:focus, input[type=password]:focus{
outline:2px solid #f5f5f5;
outline-offset: 1px;
}
/* Style error message */
.error-message {
display: none;
font-size: small;
padding-left: 5px;
margin-top:0px;
color: rgba(255, 23, 23, 0.796);
}
/* Style signin button */
.form1 .button {
margin-bottom: 10px;
width: 100%;
}
button{
width: 100%;
height: 40px;
border-radius: 5px;
font-size: inherit;
font-weight: bold;
border: none;
cursor: pointer;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
transition-duration: 0.4s;
color: #fff;
}
.button1{
background: red;
}
.button1:hover{
background: rgb(171, 0, 0);
}
/* Style OR */
.or{
padding: 1px;
text-align: center;
}
/* Style Use sign-in code button */
.button2{
background: rgb(66, 56, 56);
}
.button2:hover{
background: rgba(66, 56, 56, 0.688);
}
/* Style forgot password */
.fp{
text-align: center;
height: 40px;
padding: 10px;
margin-bottom: 10px;
text-decoration: none;
width: 100%;
}
.fp a:hover{
text-decoration: underline;
color: #999;
}
/* Style Remember me and checkbox */
.checkbox {
display: flex;
margin-top: 10px;
vertical-align: middle;
justify-content: flex-start;
font-size: 1rem;
}
.checkbox label{
color: #fff;
text-decoration: none;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
border-radius: 3px;
border: 1px solid #939393;
width: 18px;
background-color: #2828288a;
transition-duration: 0.4s;
}
.container:hover input ~ .checkmark {
border: 1px solid #f1f1f1;
}
.container input:checked ~ .checkmark {
background-color: #ffffff;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 5.5px;
top: 2px;
width: 3px;
height: 9px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Style bottom of login form */
.signup {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 10px;
}
.signup p {
margin-right: 5px;
}
.more {
font-size: 0.8em;
line-height: 1.1em;
padding-top: 10px;
}
.more a {
color: rgb(17, 108, 228);
}
.more a:hover, .signup a:hover {
text-decoration: underline;
}
/* Style Netflix footer */
footer {
position: absolute;
margin-top: 50px;
z-index: 2;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 200px;
}
.ftr-content {
margin-left: 10%;
padding-top: 50px;
padding-bottom: 100px;
font-size: 1em;
}
.ftr-content a {
color: #999;
}
.contact {
margin-bottom: 30px;
}
.contact a:hover {
text-decoration: underline;
}
.ftr a{
margin-bottom: 30px;
min-width: 200px;
width: 24%;
font-size: 14px;
text-decoration: underline;
display: inline-block;
justify-content: space-between;
}
.language select{
color: #fff;
width: 120px;
height: 40px;
border-radius: 5px;
font-size: inherit;
padding-left: 10px;
background: #2828288a;
}
</style>
</head>
<body>
<header class="banner">
<!-- Structure for Netflix logo on top-->
<div class="logo">
<img src="https://i.ibb.co/SNKRx9w/Netflixlogo.png">
</div>
<div class="main">
<div class="form1">
<!-- Create login form -->
<form>
<h1>Sign In</h1>
<div class="input-field">
<input class="text-input" type="email" required placeholder=" ">
<span >Email or mobile number</span> <br>
<p class="error-message">Please enter a valid e-mail address</p>
</div>
<div class="input-field">
<input class="text-input" type="password" required placeholder=" ">
<span >Password</span>
</div>
<div class="button">
<button class="button1" type="submit">Sign In</button>
</div>
<div class="or">
<p>OR</p>
</div>
<div class="button"></div>
<button class="button2" type="button"
onclick="document.location.href='#'">
Use a sign-in code
</button>
<div class="fp"><a href="#">Forgot Password?</a></div>
<div class="checkbox">
<label class="container">Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="signup">
<p>New to Netflix ?</p>
<a href="https://www.netflix.com/">Sign up now</a>
</div>
<div class="more">
<p>
This page is protected by Google reCAPTCHA
to ensure you're not a bot.
<a href="#">Learn more.</a>
</p>
</div>
</form>
</div>
</div>
<!-- Create Netflix footer -->
<footer>
<div class="ftr-content">
<div class="contact">
Questions? Call <a href="tel:000-800-919-1694">000-800-919-1694</a>
</div>
<div class="ftr">
<a href="#">FAQ</a>
<a href="#">Help Centre</a>
<a href="#">Terms of Use</a>
<a href="#">Privacy</a>
<a href="#">Cookie Preferences</a>
<a href="#">Corporate Information</a>
</div>
<div class="language">
<select>
<option>English</option>
<option>हिन्दी</option>
<option>العربية</option>
<option>Français</option>
</select>
</div>
</div>
</footer>
</header>
</body>
</html>
输出
以下是使用 HTML 和 CSS 创建的 Netflix 登录页面的最终输出。
在这篇文章中，我们成功地使用 HTML 和 CSS 创建了一个 Netflix 登录页面。我希望创建 Netflix 登录页面能够增强您的 Web 开发知识，并更好地了解 HTML 和 CSS 的工作原理。如果您想了解更多关于 Web 开发和其他相关内容的信息，可以查看 Tutorialspoint 上的其他文章。
更新于： 2024年11月8日
26 次浏览
广告