資料結構
網路
關係型資料庫管理系統
作業系統
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.tw/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.tw/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 次瀏覽
廣告