Làm cách nào để tạo trang đích bằng HTML CSS và JavaScript?

👋 Xin chào, Các nhà phát triển thân mến 👩‍💻👨‍💻, Hôm nay chúng ta sẽ xem cách chúng ta có thể dễ dàng tạo một Trang đích đáp ứng khác bằng HTML, CSS và JS với thư viện GreenSock Animation để tạo các hoạt ảnh đó

Nội dung chính Show

• Hướng dẫn mã
• Phong cách. css
• mục lục. html
• mục lục. html
• Phong cách. css
• Kết quả
• Phong cách. css
• Kịch bản. js
• Kết quả ở định dạng GIF
• mục lục. html
• Phong cách. css
• Kết quả
• mục lục. html
• Phong cách. css
• Kết quả
• Kịch bản. js
• Kịch bản. js
• Làm cách nào để tạo trang đích bằng HTML CSS?
• Làm cách nào để tạo trang chủ bằng HTML CSS và JavaScript?
• Làm cách nào để tạo trang đích đáp ứng bằng HTML và CSS?
• Trang đích trong CSS là gì?

Tạo trang đích bằng HTML & CSS là một công việc khá dễ dàng và đơn giản, nhưng bạn có biết điều gì làm cho bài đăng của chúng tôi thú vị hơn không. Được rồi, sẽ thảo luận về nó

Nhưng trước đó, Đối với bản demo có hướng dẫn mã. Bạn có thể xem đoạn phim dưới đây

Hướng dẫn mã

Nếu bạn muốn xem thêm các hướng dẫn thiết kế web giống như thế này. Vui lòng xem xét đăng ký Kênh Youtube của chúng tôi

Mã nguồn cho bài đăng này có sẵn trên Github với tất cả hình ảnh và hơn thế nữa, vì vậy vui lòng truy cập liên kết được cung cấp bên dưới để lấy mã nguồn

Liên kết mã nguồn

---

Vì vậy, trong bài đăng trên blog mã hóa này, chúng tôi đề cập đến hai hệ thống xây dựng bố cục cơ bản và hiện đại nhất là CSS Flexbox & CSS Grid

Bạn có biết đâu là sự khác biệt chính giữa không?
Nếu có thì bạn quả là một thiên tài nhưng nếu không, hãy để tôi giải thích cho bạn bằng những từ đơn giản rằng CSS Flexbox là .

Được rồi 😆, tạm thời là vậy. Hãy đi vào phần mã hóa mà chúng ta đang ở đây

Trước tiên hãy bắt đầu với cấu trúc thư mục dự án của chúng tôi 👇

 
Thông thường, chúng tôi đã sử dụng 4 thư viện bên ngoài bao gồm 👇

• Remixicon - Một thư viện biểu tượng Nguồn mở
• Google Fonts - thư viện dịch vụ nhúng phông chữ
• Tạo hiệu ứng khi cuộn - Thư viện nhỏ để tạo hiệu ứng cho các phần tử trên trang của bạn khi bạn cuộn
• GSAP của GreenSock - Tạo hoạt hình JavaScript cấp Chuyên nghiệp cho web hiện đại

Vì vậy, từ cấu trúc thư mục dự án ở trên, chúng tôi yêu cầu chỉ mục. html, phong cách. css, kịch bản. js & IMG nơi lưu trữ một tệp hình ảnh duy nhất

Vì vậy, sau khi tạo các tệp đó, hãy chuyển sang trình chỉnh sửa mã yêu thích của bạn

Trước hết, chúng tôi sẽ xem xét thực hiện một số thay đổi cơ bản trong tệp CSS của chúng tôi, bao gồm đặt lại thư mục gốc, HTML & các biến

Phong cách. css

/* ==== "Inter" FONT-FAMILY FROM FONTS.GOOGLE.COM ==== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
/* ==== ROOT RESET ==== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Inter", sans-serif;
}
*,
*::before,
*::after {
 box-sizing: border-box;
}
/* ==== CSS VARIABLES ==== */
:root {
 - primary-color: #335eea;
 - link-color: #506690;
 - btn-hover-color: #2b50c7;
 - lg-heading: #161c2d;
 - text-content: #869ab8;
 - fixed-header-height: 4.5rem;
}
/* ==== RESET HTML ==== */
body {
 width: 100%;
 height: 100vh;
 overflow-x: hidden;
 background-color: #fafbfb;
}
ul li {
 list-style-type: none;
}
a {
 text-decoration: none;
}
button {
 background-color: transparent;
 border: none;
 outline: none;
 cursor: pointer;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Được, tuyệt lắm. chúng tôi đang tiến xa hơn để thêm bộ xương đó là thêm HTML.
vì vậy hãy vào bên trong chỉ mục của chúng tôi. tệp html để tạo thêm đánh dấu cơ bản.

mục lục. html

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js">
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js">
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer>
 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

OK Tuyệt vời. Bây giờ, hãy di chuyển xa hơn một chút để tạo thanh điều hướng của chúng ta, 
Bạn có biết điều đó không? .

 
Được rồi 😆, Bây giờ, hãy thêm đánh dấu cho thanh điều hướng bên trong chỉ mục. tệp html

mục lục. html

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link
 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== HEADER ==== →
 <header class="container header">
 <! - ==== NAVBAR ==== →
 <nav class="nav">
  class="logo">
 
Devkit.
 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Phong cách. css

/* ==== CONTAINER ==== */
.container {
 width: 100%;
}
@media screen and (min-width: 1040px) {
 .container {
 width: 1040px;
 margin: 0 auto;
 }
}
/* ==== HEADER ==== */
.header {
 height: var( - fixed-header-height);
 padding: 0 1.7rem;
}
/* ==== NAV ==== */
.nav {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
/* ==== LOGO ==== */
.logo h2 {
 font-size: 28px;
 color: var( - primary-color);
}
/* ==== NAV-MENU ==== */
.nav_menu_list {
 display: flex;
 align-items: center;
}
.nav_menu_list .nav_menu_item {
 margin: 0 2rem;
}
.nav_menu_item .nav_menu_link {
 font-size: 16.5px;
 line-height: 27px;
 color: var( - link-color);
 text-transform: capitalize;
 letter-spacing: 0.5px;
}
.nav_menu_link:hover {
 color: var( - primary-color);
}
.toggle_btn {
 font-size: 20px;
 font-weight: 600;
 color: var( - lg-heading);
 z-index: 4;
}
.nav_menu,
.close_btn {
 display: none;
}
.show {
 right: 3% !important;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Kết quả

Phong cách. css

/* ==== MEDIA QURIES FOR RESPONSIVE DESIGN ==== */
@media screen and (min-width: 768px) {
 .toggle_btn {
 display: none;
 }
 .nav_menu {
 display: block;
 }
}
@media screen and (max-width: 768px) {
 .logo h2 {
 font-size: 23px;
 }
 .nav_menu {
 position: fixed;
 width: 93%;
 height: 100%;
 display: block;
 top: 2.5%;
 right: -100%;
 background-color: #fff;
 padding: 3rem;
 border-radius: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
 z-index: 50;
 transition: 0.4s;
 }
 .nav_menu_list {
 flex-direction: column;
 align-items: flex-start;
 margin-top: 4rem;
 }
 .nav_menu_list .nav_menu_item {
 margin: 1rem 0;
 }
 .nav_menu_item .nav_menu_link {
 font-size: 18px;
 }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Kịch bản. js

const navId = document.getElementById("nav_menu"),
 ToggleBtnId = document.getElementById("toggle_btn"),
 CloseBtnId = document.getElementById("close_btn");
// ==== SHOW MENU ==== //
ToggleBtnId.addEventListener("click", () => {
 navId.classList.add("show");
});
// ==== HIDE MENU ==== //
CloseBtnId.addEventListener("click", () => {
 navId.classList.remove("show");
});

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Kết quả ở định dạng GIF

Di chuyển xa hơn để tạo phần anh hùng xác định cái nhìn thoáng qua về công ty và ưu đãi của bạn

mục lục. html

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link
 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
 rel="stylesheet"
 />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== HEADER ==== →
 <header class="container header">
 <! - ==== NAVBAR ==== →
 <nav class="nav">
  class="logo">
 
Devkit.
 
 class="nav_menu" id="nav_menu">
  class="close_btn" id="close_btn">
  class="ri-close-fill">
 
 class="nav_menu_list">
  class="nav_menu_item">
  href="#" class="nav_menu_link">account
 
  class="nav_menu_item">
  href="#" class="nav_menu_link">about
 
  class="nav_menu_item">
  href="#" class="nav_menu_link">service
 
  class="nav_menu_item">
  href="#" class="nav_menu_link">contact
 
 
 
 class="toggle_btn" id="toggle_btn">
  class="ri-menu-line">
 
 
 
<! - ==== HERO ==== →
 <section class="wrapper">
  class="container">
  class="grid-cols-2">
  class="grid-item-1">
  class="main-heading">
 Welcome to Devkit.
  />
 Develop anything.
 
  class="info-text">
 Build a beautiful, modern website with flexible components built
 from scratch.
 

 class="btn_wrapper">
  class="btn view_more_btn">
 view all pages  class="ri-arrow-right-line">
 
 class="btn documentation_btn">documentation
 
 
  class="grid-item-2">
  class="team_img_wrapper">
 


Tốt Chúng tôi đang đạt được tiến bộ lớn Bây giờ hãy chuyển sang các thành phần cuối cùng là thông tin nổi bật và chân trang
mục lục. html
________số 8
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Phong cách. css
/* ==== RESET CSS ==== */
/* ==== Navbar ==== */
/* ==== Hero Section ==== */
/*
.
.
.
.
.
*/
.grid-cols-3 {
 width: 100%;
 height: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 3rem;
 row-gap: 2rem;
 padding: 1rem;
}
.grid-col-item {
 height: 100%;
}
.icon {
 width: 100%;
 line-height: 40px;
}
.icon svg {
 width: 30px;
 height: 30px;
 color: #6b85d8;
}
.featured_info {
 width: 100%;
}
.featured_info span {
 width: 100%;
 display: block;
 font-size: 21px;
 line-height: 33px;
 color: var( - lg-heading);
}
.featured_info p {
 display: block;
 width: 100%;
 margin-top: 7px;
 font-weight: 400;
 color: #334157;
 line-height: 25px;
 font-size: 15.5px;
}
footer {
 width: 100%;
 background-color: var( - primary-color);
 height: 12px;
 margin-top: 8rem;
}
@media screen and (max-width: 768px) {
 .grid-cols-3 {
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 .featured_info p {
 line-height: 23px;
 font-size: 14px;
 }
}
@media screen and (max-width: 991px) {
 .featured_info span {
 font-size: 19px;
 }
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Kết quả

Bây giờ chúng ta đã kết thúc bài đăng này, Bây giờ, hãy thêm Animate trên các thuộc tính cuộn, để thêm chúng trước tiên chúng ta phải thêm chúng bằng thuộc tính 

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js">
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js">
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer>
 

3 trong tệp HTML của mình và cuối cùng chúng ta đã khởi tạo chúng bên trong . 
Hãy thực hiện thay đổi nhỏ tại phần nổi bật của chúng tôi đó là 👇

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js">
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js">
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer>
 

0
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Kịch bản. js

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js">
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js">
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer>
 

1
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
bằng cách thêm data- thuộc tính & khởi tạo AOS trong tệp js của chúng tôi, nó mang lại cho chúng tôi hiệu ứng mờ dần nhỏ
Hoàn hảo. Bây giờ đã kết thúc dự án của chúng tôi bằng cách thêm hoạt ảnh GSAP bằng javascript
Kịch bản. js

 lang="en">
 
  charset="UTF-8" />
  http-equiv="X-UA-Compatible" content="IE=edge" />
  name="viewport" content="width=device-width, initial-scale=1.0" />
 
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 
 
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js">
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js">
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer>
 

2
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
 
Và thế là xong, chúng ta kết thúc dự án của mình ở đây. Cảm ơn bạn rất nhiều vì đã đọc bài viết cho đến cuối. Vui lòng đảm bảo rằng bạn đã xem Kênh Youtube của tôi nơi tôi đăng loại hướng dẫn viết mã này
 

Làm cách nào để tạo trang đích bằng HTML CSS?
Điều đầu tiên bạn cần để tạo trang đích bằng HTML là trình soạn thảo văn bản, vì cả HTML và CSS đều được viết bằng văn bản thuần túy.  . 
 
Tạo cấu trúc cơ bản
 
Tạo thanh điều hướng
 
Dán thanh điều hướng lên trên cùng của màn hình
 
Tạo một nền tảng tuyệt vời
 
Thêm một số phong cách
 
Làm cách nào để tạo trang chủ bằng HTML CSS và JavaScript?
Mục tiêu học tập . 
 
Tạo một trang web cơ bản bằng HTML
 
Áp dụng kiểu cho các phần tử trang bằng CSS
 
Tạo chủ đề bằng CSS
 
Thêm hỗ trợ để chuyển đổi giữa các chủ đề bằng JavaScript
 
Kiểm tra trang web bằng các công cụ dành cho nhà phát triển trình duyệt
 
Làm cách nào để tạo trang đích đáp ứng bằng HTML và CSS?
Dưới đây là HTML, CSS và JavaScript cần có để tạo trang đích đáp ứng trên thiết bị di động của bạn.  . 
 
Bước 1 - Thêm HTML bên dưới vào giữa các thẻ đầu trang và chân trang của bạn. . 
 
Bước 2 - Thêm CSS bên dưới vào biểu định kiểu chính của trang web của bạn. . 
 
Bước 3 - Thêm các mục bên dưới vào trang đích của bạn
 
Trang đích trong CSS là gì?
CSS trang đích (biểu định kiểu xếp tầng) là một hệ thống mã được viết để xác định cách tài liệu HTML được hiển thị trên web . 

Đọc tiếp