Powerpoin thiết kế website bằng html css

TRƯỜNG ĐẠI HỌC KIẾN TRÚC HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN  BÀI TẬP LỚN MÔN THỰC TẬP CHUYÊN MÔN I ĐỀ TÀI XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN Thành viên nhóm 16 Nguyễn Văn Đại Bùi Lệ Thu Lớp 19CN2 Khóa 2019 Giảng viên hướng dẫn ThS Nguyễn Hồng Thanh Hà Nội năm 2021 Bài tập lớn môn Thực tập chuyên môn 1 Nhóm 16 – Lớp 19CN2 2 Lời nói đầu Ngày nay internet đã trở nên thông dụng và không thể thiếu trong cuộc sống, gắn liền với sự phát triển của internet là hệ thống hàng triệu website Website có một.

CƠ SỞ LÝ THUYẾT

NGÔN NGỮ SIÊU VĂN BẢN HTML

✓ HTML (HyperText Markup language) là ngôn ngữ đánh dấu siêu văn bản , dung để tạo ra các trang web

✓ HTML bao gồm một số tập hợp các thẻ dùng để :

• Định nghĩa cấu trúc của trang web

• Định nghĩa nội dung của trang web

• Tạo các siêu liên kết để liên kết đến nhưng trang web khác

• Chèn âm thanh, hình ảnh, video ,… vào trang web

2 Tập tin HTML là gì?

✓ Tập tin HTML là một loại tin text có chứa các thẻ HTML(tập tin có phần mở rộng là html hoặc htm)

✓ Tập tin HTML còn được gọi là một trang web

✓ Nếu cú pháp có bị sai thì trình duyệt vẫn không báo lỗi , nó chỉ hiển thị không như ý muốn

3 Cấu trúc cơ bản của HTML:

✓ Một tài liệu HTML luôn được gói trong cặp tag và

✓ Cặp tag và sẽ là nơi mô tả những gì có thể nhìn thấy của trang

Như vậy, một trang web viết bằng html sẽ có cấu trúc cơ bản như sau:

Phần trình bày nội dung

Ngoài phần body còn có phần head, được viết bởi cặp tag Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết

Một trang web cần thêm một cặp thẻ , với tên trang web nằm giữa hai thẻ này Tên trang web sẽ được hiển thị ở phần trên cùng của thanh menu Như vậy, cấu trúc của một trang web sẽ bao gồm thẻ để xác định tiêu đề của nó.

Tiêu đề của trang web

Phần trình bày nội dung

✓ Mỗi thẻ là một từ khóa được bao quanh bởi ngoặc nhọn (vd: ;

✓ Mỗi thẻ HTML thường bao gồm 1 cặp :thẻ mở (bắt đầu định dạng), thẻ đóng (kết thúc định dạng)

✓ Thẻ đóng giống thẻ mở , nhưng ở thẻ đóng thì có thêm dấu gạch chéo

“/”trước tên thẻ (vd: ;;)

✓ Văn bản cần định dạng được đặt giữa thẻ đóng và thẻ mở:

✓ Các khoảng trắng dư thừa và ký tự xuống dòng sẽ bị bỏ qua

• Thẻ đơn : Các thẻ chỉ có 1 thẻ mở ( vd: )

• Thẻ kép là một cặp thẻ đóng và mở ( vd:

• Các thẻ được lồng vào nhau nhưng không chéo nhau

Vd đúng :

Tôi là sinhviên

Vd sai:

Tôi là sinh

viên

✓ Một số thẻ có thêm các thuộc tính

• Dùng để chỉ định một số thuộc tính khác liên quan đến thẻ

• Nếu có , sẽ được khai báo trong thẻ mở

• Vd:

(color là một thuộc tính dùng chỉ màu sắc văn bản.)

NGÔN NGỮ CSS

CSS, hay còn gọi là "Cascading Style Sheet", là ngôn ngữ quy định cách trình bày các thẻ HTML trên trang web Được sử dụng rộng rãi trong lập trình web, CSS đã tạo ra một cuộc cách mạng trong việc thiết kế giao diện Nó giúp giải quyết vấn đề hiển thị khác nhau của đoạn code trên các trình duyệt khác nhau, mang lại sự đồng nhất cho trang web.

CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt, đảm bảo sự nhất quán trong cách trình bày Nó hoạt động bằng cách tìm kiếm các vùng chọn, có thể là tên thẻ HTML, ID, class hoặc nhiều kiểu khác, và áp dụng các thuộc tính cần thay đổi lên các vùng chọn đó.

2 Tại sao phải học CSS?

CSS cho phép tùy chỉnh bố cục, định dạng hiển thị, màu sắc, căn chỉnh, màu nền, đường viền và đổ bóng cho các thẻ HTML Nếu một website chỉ sử dụng HTML mà không có CSS, nó sẽ trông rất thô sơ, giống như một chiếc xe máy chỉ còn lại bộ khung và máy mà không có lớp sơn hay áo bên ngoài.

CSS cung cấp hàng trăm thuộc tính trình bày cho các đối tượng, cho phép người dùng sáng tạo và kết hợp các thuộc tính một cách linh hoạt, từ đó mang lại hiệu quả cao trong thiết kế.

– Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau

Một đoạn CSS bao gồm 4 phần như thế này: vùng chọn { thuộc tính: giá trị; thuộc tính:giá trị;

Khi khai báo CSS, các thuộc tính và giá trị được đặt trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính sẽ luôn đi kèm với một giá trị riêng, có thể là số hoặc tên giá trị từ danh sách có sẵn trong CSS.

Các thuộc tính và giá trị trong CSS cần được phân cách bằng dấu hai chấm, và mỗi dòng khai báo thuộc tính phải kết thúc bằng dấu chấm phẩy Một vùng chọn có thể chứa nhiều thuộc tính mà không bị giới hạn.

.product-related-title p { font-family: var( main-text-font); font-size: 14px; font-weight: bold; color: #333333;

4 Cách chèn CSS vào HTML

Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn css vào website:

– Cách 1: Chèn nội dung CSS vào trong cặp thẻ trong phần của trang web

Cách chèn CSS vào html

body{background: red;} h1{ color:blue;font-size:12px;}

– Cách 2 :Chèn nội dung CSS vào trực tiếp thẻ mở thông qua thuộc tính style:

Cách 2

Để tối ưu hóa nội dung CSS, bạn nên lưu trữ nó trong một file riêng với phần mở rộng css Sau đó, chèn file này vào website thông qua thẻ , thường được đặt trong cặp thẻ .

Sau khi tao file có tên style.css vs nội dung như sau: body { backgroud:red;} h1{font-size: 12px;color: blue;}

Lúc này chúng ta sẽ chèn file này vào website như sau:

JAVASCRIP

JavaScript (JS) là một ngôn ngữ kịch bản hướng đối tượng, nhẹ và nhỏ gọn, hoạt động trên nền tảng đa dạng (cross-platform) Chạy trong môi trường máy chủ như trình duyệt web, JavaScript cho phép kết nối và kiểm soát các đối tượng trong môi trường đó, mang lại khả năng lập trình linh hoạt và mạnh mẽ.

JavaScript là ngôn ngữ lập trình dựa trên logic, cho phép sửa đổi nội dung trang web và tương tác với người dùng Nó được sử dụng phổ biến để tạo ra các hộp xác nhận, kêu gọi hành động và bổ sung thông tin mới vào dữ liệu hiện có, giúp cải thiện trải nghiệm người dùng.

Hình 2 JavaScript là một trong các ngôn ngữ lập trình đa nền tảng

2 Javascript dùng để làm gì:

– JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực:

• Xây dựng ứng dụng cho website máy chủ

• Ứng dụng di động, app, trò chơi…

3 Lợi ích khi dùng Javascript:

JavaScript là một ngôn ngữ lập trình phổ biến, được sử dụng trên 92% nền tảng website hiện nay, và đóng vai trò quan trọng trong lĩnh vực phát triển web Tầm quan trọng của JavaScript được thể hiện qua nhiều thao tác và công dụng đa dạng mà nó mang lại.

– Triển khai tập lệnh phía máy khách

– Viết mã phía máy chủ

Hình 3 JavaScript được ứng dụng rất nhiều trong việc tạo dựng website

4 Các thư viện Javascript phổ biến:

Hiện nay có rất nhiều thư viện và khung được viết từ Javascript như:

• jQuery: Chuyên về hiệu ứng

• js: Chuyên xây dựng ứng dụng thời gian thực

• AngularJS: Chuyên xây dựng ứng dụng trang cá nhân

• ReactJS: Chuyên viết ứng dụng mobile

• Một số thư viện khác như ExtJS, Sencha Touch,…

Hình 4 Ngôn ngữ Javascript có thể được viết bởi những lập trình viên tập sự

5 Làm thế nào để thêm JavaScript trên website của bạn? Để thêm chuỗi code JavaScript vào trang web, bạn sẽ cần gắn tag

Ví dụ như sau:

Để tối ưu hóa website của bạn, hãy gắn JavaScript trong thẻ , trừ khi bạn cần thực thi mã tại một thời điểm hoặc yếu tố cụ thể Ngoài ra, bạn cũng có thể lưu mã JavaScript trong file riêng và gọi nó khi cần thiết trên website.

THIẾT KẾ TRANG WEB CÁ NHÂN

THẾ NÀO LÀ MỘT WEBSITE ?

Website, hay còn gọi là trang web, là một tập hợp các trang web thường nằm trong một tên miền hoặc tên miền phụ trên Internet Một trang web được xây dựng từ các tệp tin HTML hoặc XHTML và có thể truy cập thông qua giao thức HTTP Các website có thể là tĩnh, được tạo ra từ các tệp tin HTML, hoặc động, vận hành bằng các hệ quản trị nội dung (CMS) trên máy chủ Ngoài ra, website cũng có thể được phát triển bằng nhiều ngôn ngữ lập trình khác nhau như PHP, NET, Java, và Ruby on Rails.

Hãy hình dung website như một tòa nhà nơi bạn đang ở Nó sẽ bao gồm các thành phần sau:

+ Địa chỉ : là 1 cái tên miền ,vd : www.facebook.com

+ Một chỗ với đủ không gian (Hosting -không gian lưu trữ website) + Các căn phòng khác nhau như phòng ngủ , phòng bếp ( các trang web khác nhau)

+ Một cái cửa lớn cho mọi người ra vào( Bandwidth- băng thông) + Một người cai quản ( nhà thiết kế , quản lí trang web)

CÁC BƯỚC THIẾT KẾ MỘT TRANG WEB

✓ Chọn một mẫu thiết kế

✓ Chuyển mẫu thiết kế sang trang web html

✓ Chuẩn bị ảnh , tài liệu website

✓ Chuẩn bị bố cục trang web

✓ Viết code html,css, javascrip

THIẾT KẾ WEBSITE

1 Thiết kế website giao diện có trước

Giao diện trang web mà nhóm em thiết kế được lấy cảm hứng từ IVYMODA (https://ivymoda.com/) và đã được điều chỉnh để phù hợp hơn với nội dung môn học.

2 Chuyển mẫu thiết kế sang trang web html

Sử dụng visual studio code để chuyển hình ảnh giao diện có sẵn sang mã html ,css, javascrip

3 Chuẩn bị hình ảnh ,tài liệu cho trang website

Tài liệu , hình ảnh được lấy trực tiếp từ trang web chính nó giúp bài làm thêm đẹp và hoàn thiện hơn hơn

Bố cục của trang chủ và các trang con đều tương đồng, được định dạng bởi file CSS Các yếu tố như kích thước, cách trình bày, và font chữ cho phần header, body, và footer đều nhất quán Tuy nhiên, phần trung tâm sẽ khác nhau tùy thuộc vào nội dung của từng trang.

5 Viết mã HTML, CSS, JAVASCRIP

Hàng nữ mới về

Hoàng Cúc Collection

Hàng Nam mới về

Bộ sưu tập

Tải ứng dụng IVY moda

Nhận bản tin IVY moda

Liên hệ

Tuyển dụng

Giới thiệu

Công ty Cổ phần Dự Kim với số đăng ký kinh doanh:

0105777650 Địa chỉ đăng ký: Tổ dân phố Tháp, P.Đại Mỗ, Q.Nam Từ Liêm, TP.Hà Nội, Việt Nam - 0243 205 2222 Đặt hàng online : 0246 662 3434

5.1.2 Trang danh mục sản phẩm (cartegory.html) :

Trang chủ

⟶

Nữ

⟶

NỮ
- HÀNG NỮ MỚI VỀ
- BEYOND TRENDY
- JEANS FOR JOY
- JEANS FOR JOY
NAM
- HÀNG NAM MỚI VỀ
- BEYOND TRENDY
- JEANS FOR JOY
- JEANS FOR JOY
TRẺ EM

BỘ SƯU TẬP

ĐỒ BẢO HỘ

Bộ lọc

Sắp xếp

Giá cao đến thấp

Giá thấp đến cao

SET ÁO DÀI Ý NIÊN MS 86M7107

Hiện thị 2 | 4 sản phẩm

ô1 2 3 4 5ằTrang cuối

5.1.3 Trang sản phẩm (product.html) :

⟶

1.743.000đ

Màu sắc:Đỏ *

Size:

Số lượng:

Vui lòng chọn size

∨

Bộ sưu tập Hoàng Cúc mang đến vẻ đẹp mộc mạc của áo dài, kết hợp với những chi tiết ngẫu hứng tinh tế, tạo nên sức hút đặc biệt trong từng thiết kế.

BST mang đến những đường nét mềm mại nhưng dứt khoát, với sự cách điệu ở cổ áo và tay, cùng sự phối màu tinh tế từ áo, quần đến khánh, tạo nên sự hài hòa giữa sắc và âm Ý Niên được chọn làm dresscode cho những ngày Tết, với sắc đỏ biểu trưng cho may mắn, sung túc và tình yêu nồng nàn.

Kiểu dáng: áo dài thiết kế cổ truyền thống, dáng suông, tay dài kiểu giắc lăng

Phù hợp: lễ tết, cưới hỏi, đi sự kiện, tạo vẻ trẻ trung, duyên dáng cho người mặc

Màu sắc: Cam - Đỏ - Xanh Lime - Đỏ Hồng

Chi tiết bảo quản sản phẩm :

* Vải dệt kim : sau khi giặt sản phẩm phải được phơi ngang tránh bai dãn

* Vải voan , lụa , chiffon nên giặt bằng tay.

* Vải thô , tuytsy , kaki không có phối hay trang trí đá cườm thì có thể giặt máy.

* Vải thô , tuytsy, kaki có phối màu tường phản hay trang trí voan , lụa , đá cườm thì cần giặt tay.

Để bảo quản đồ jeans, bạn nên hạn chế giặt bằng máy giặt vì điều này có thể làm phai màu Nếu cần giặt, hãy lộn trái sản phẩm, đóng khuy và kéo khóa, đồng thời tránh giặt chung với đồ sáng màu để không làm dính màu vào các sản phẩm khác.

Để bảo quản sản phẩm, cần giặt ngay mà không ngâm để tránh tình trạng loang màu và phân biệt màu sắc cũng như loại vải nhằm ngăn ngừa phai màu Nên sử dụng xà phòng pha loãng thay vì xà phòng có chất tẩy mạnh để giặt sản phẩm.

Khi giặt các sản phẩm có thể giặt bằng máy, bạn nên chọn chế độ giặt nhẹ và vắt ở mức trung bình Đồng thời, hãy phân loại các sản phẩm theo màu sắc và loại vải để đảm bảo hiệu quả giặt sạch và bảo vệ chất liệu.

ÁO THUN CỔ TRÒN MS 57E2969

5.1.4 Trang giỏ hàng (cart.html) :

Tên sản phẩm

TỔNG TIỀN GIỎ HÀNG

TỔNG SẢN PHẨM

TỔNG TIỀN HÀNG

1.743.000 đ

Bạn sẽ được miễn phí ship khi đơn hàng của bạn có tổng giá trị trên 2.000.000 đ

Mua thêm 257.000đ để được miễn phí SHIP

TIẾP TỤC MUA SẮM

THANH

Hãy Đăng nhập tài khoản của bạn để tích điểm thành viên

5.1.5 Trang giao hàng (delivery.html) :

Vui lòng chọn địa chỉ giao hàng

Đăng nhập (Nếu bạn đã có tài khoản của

Khách lẻ (Nếu bạn không muốn lưu lại thông tin)

Đăng ký (Tạo mới tài khoản với thông tin bên dưới)

Họ tên *

Điện thoại *

Tỉnh/Tp *

Quận/Huyện *

Địa chỉ *

ô

THANH TOÁN

Tên sản phẩm

Set áo dài Ý Niên MS 86M7107

Tổng

Thuế VAT

Tổng tiền hàng

5.1.6 Trang thanh toán (payment.html) :

Phương thức giao hàng

Giao hàng chuyển phát nhanh

Phương thức thanh toán

Mọi giao dịch đều được bảo mật và mã hóa Thông tin thẻ tín dụng sẽ không bao giờ được lưu lại.

Thanh toán bằng thẻ tín dụng(OnePay)

Thanh toán bằng thẻ

Thanh toán Momo

Thu tiền tận nơi

Chọn mã nhân viên thân thiết

TIẾP TỤC THANH TOÁN

main-text-font: Arial, Helvetica, sans-serif;

* { margin: 0; padding: 0; box-sizing: border-box; outline: none;

.space-between { justify-content: space-between;

.container { max-width: 1200px; margin: auto;

.row{ display: flex; flex-wrap: wrap;

.top { padding: 12px 0; align-items: center; display: block; position: fixed; width: 100%; z-index: 999; background-color: rgba(255, 255, 255, 0.3); transition: all 0.3s ease;

.top.active { background-color: rgba(255, 255, 255, 1);

.top:hover { background-color: rgba(255, 255, 255, 1);

.top-menu-items >ul{ height: 100%; display: flex;

The CSS style for the top menu items includes a font family set to the main text font, with padding of 0 12px and a height of 100% The items are displayed using a flex layout that centers content both horizontally and vertically The font size is 12px, with text transformed to uppercase and displayed in bold Additionally, the items have a cursor set to pointer and a relative positioning for better layout control.

.top-menu-items ul li::before { position: absolute; content: ""; display: block; width: 100%; height: 50px; bottom: -50%;

.top-menu-items ul li:nth-child(4) { color: red;

.top-menu-items ul li:nth-child(5) { color: red;

.top-menu-item { position: absolute; width: 200px; top: 100px; display: none; opacity: 0; transition: all 0.5s ease; background-color: #ffff; height: auto!important; padding: 6px; border: 1px solid #dddddd;

.top-menu-items ul li:hover top-menu-item { display: block; top: 60px; opacity: 1;

.top-menu-item li { line-height: 25px; display: flex; justify-content: left!important;

.top-menu-item li a { font-size: 12px; text-align: left; text-transform: capitalize; color: #333; font-family: var( main-text-font);

.top-menu-icons ul { display: flex; height: 100%;

.top-menu-icons ul li { display: flex; justify-content: center; align-items: center; padding: 6px 12px;

.top-menu-icons ul li { position: relative;

.top-menu-icons ul li::before { content: ""; display: block; position: absolute; height: 15px; width: 1px; background-color: #333; right: 0;

.top-menu-icons ul li:last-child::before { display: none;

.top-menu-icons ul li:first-child input { width: 150px; border: none; background-color: transparent; border-bottom: 1px solid #333; padding: 0 0 4px 6px

.top-menu-icons ul li:first-child i { position: absolute; font-size: 12px; right: 12px;

.top-menu-icons ul i { cursor: pointer;

37 padding-bottom: 20px; overflow: hidden; width: 100vw;

.aspect-ratio-169 { display: block; position: relative; padding-top: 56.25%; transition: all 0.3s ease;

.aspect-ratio-169 img { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;

/* position: absolute; */ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 6px;

.dot { width: 15px; height: 15px; background-color: #cccccc; border-radius: 50%; margin-right: 12px; cursor: pointer;

.footer { padding: 100px 0 0; border-top: 2px solid black;

.footer-container { display: flex; justify-content: center;

38 align-items: center; flex-direction: column;

.footer-container p { font-weight: bold; font-size: 18px; font-family: var( main-text-font);

.app-google img { width: 150px; cursor: p;

.input-email { position: relative; width: 300px; margin: auto; margin-top: 30px ;

.input-email input { width: 100%; border: none; padding-bottom: 12px; border-bottom: 1px solid black; text-align: center;

.input-email i { position: absolute; right: 12px; bottom: 6px; cursor: pointer;

.footer-items { display: flex; justify-content: center; align-items: center; margin: 30px 0;

.footer-items li { padding: 12px; position: relative;

.footer-items li a { color: #333; font-family: var( main-text-font); font-weight: bold;

.footer-items li::after { position: absolute; content: ""; width: 1px; height: 50%; background-color: #cccccc; right: 0;

.footer-items li:last-child::after { display: none;

.footer-items li:last-child i { font-size: 12px; margin-right: 12px; color: #333333;

.footer-items li:last-child i:hover { color: black;

.footer-items img { width: 100px;

.footer-text { text-align: center; font-size: 12px; font-family: var( main-text-font);

.footer-bottom { padding: 10px 0; font-size: 12px; font-family: var( main-text-font); background-color: #dddddd; width: 100%; text-align: center; margin-top: 30px;

.cartegory-top { margin-bottom: 50px;

.cartegory-top p { font-family: var( main-text-font); margin: 0 12px; font-size: 12px;

.cartegory-right-top-item:first-child { flex: 2; font-size: 16px; font-family: var( main-text-font); font-weight: bold;

.cartegory-right-top-item{ flex: 1; padding: 0 12px;

.cartegory-right-top-item button { width: 100%; padding: 10px 15px; display: flex; justify-content: space-between; background-color: #ffff; border: 1px solid #dddddd; cursor: pointer;

.cartegory-right-top-item select { width: 100%; padding: 10px 15px; display: flex; justify-content: space-between; background-color: #ffff; border: 1px solid #dddddd; cursor: pointer;

.cartegory-right-content { margin-top: 20px; justify-content: space-between;

.cartegory-right-content-item { width: calc(25% - 12px); text-align: center; padding: 12px 0;

.cartegory-right-content-item h1 { font-size: 11px; font-family: var( main-text-font); margin-top: 6px; color: #333333;

.cartegory-right-content-item img{ width: 100%;

.cartegory-right-content-item p { font-size: 12px;

.cartegory-right-bottom { justify-content: space-between; margin: 30px 0 20px; width: 100%;

.cartegory-right-bottom p { font-family: var( main-text-font); font-size: 11px;

.cartegory-left ul li { padding: 12px 0;

.cartegory-left ul li>a { color: black; font-size: 16px; font-weight: bold; font-family: var( main-text-font);

.cartegory-left ul li ul li { padding-left: 10px;

.cartegory-left-li ul{ display: none;

.cartegory-left-li.block ul { display: block;

.cartegory-left ul li ul li a { color: #333333; font-size: 12px;

.product-top { margin-bottom: 30px;

.product-top p { font-family: var( main-text-font); margin: 0 12px; font-size: 12px;

.product-content-left-big-img{ width: 80%; padding-right: 20px;

.product-content-left-big-img img { width: 100%;

.product-content-left-small-img { width: 20%;

.product-content-left-small-img img { width: 100%; cursor: pointer;

.product-content-right { width: 50%; padding-left: 20px;

.product-content-right-product-name h1 { font-family: var( main-text-font); font-size: 16px;

.product-content-right-product-name p { color: #cccccc; font-size: 12px;

.product-content-right-product-price { margin: 12px 0; font-size: 20px; font-weight: bold; font-family: var( main-text-font);

.product-content-right-product-color img{ width: 30px; height: 30px;

.product-content-right-product-color-img { height: 40px; width: 40px; border: 1px solid #333; display: flex; align-items: center; justify-content: center; margin: 12px 0;

.size span { display: inline-block; padding: 3px 6px; border: 1px solid #dddddd; margin: 12px 10px 12px 0; font-size: 12px; cursor: pointer;

.quantity { display: flex; margin-bottom: 20px;

.quantity input { width: 35px; padding-left: 3px;

.product-content-right-product-button button { width: 150px; height: 40px; display: block; margin: 20px 0 12px; transition: all 0.3s ease;

.product-content-right-product-button button:first-child { display: flex; justify-content: space-evenly; align-items: center; background-color: #ffff; border: 2px solid black; cursor: pointer;

.product-content-right-product-button button:first-child:hover { background-color: black; color: #ffff;

.product-content-right-product-button button:last-child {

44 border: 2px solid #BF8A49; color:#BF8A49 ; background-color: #ffff; cursor: pointer;

.product-content-right-product-icon { display: flex;

.product-content-right-product-icon-item { display: flex; margin-right: 12px; justify-content: center; align-items: center;

.product-content-right-product-icon-item i { font-size: 12px; margin-right: 6px;

.product-content-right-product-QR { margin: 20px 0;

.product-content-right-bottom { padding-top: 40px; border-top: 1px solid #dddddd; position: relative;

The CSS class ".product-content-right-bottom-top" is designed to create a circular button with a diameter of 30px, featuring a 1px solid border and a white background Positioned absolutely, it is centered horizontally at the top of its parent element with a negative top offset of 15px The button utilizes flexbox for centering its contents and includes a cursor pointer to indicate interactivity.

.product-content-right-bottom-content-title { border-bottom: 2px solid #dddddd;

.product-content-right-bottom-content-title-item { padding: 6px; cursor: pointer; margin-right: 6px;

.product-content-right-bottom-content-title-item p { font-family: var( main-text-font); font-size: 12px;

.product-content-right-bottom-content { padding-top: 30px;

.product-content-right-bottom-content { font-family: var( main-text-font); font-size: 12px;

.product-content-right-bottom-content-baoquan { display: none;

/* -Product-Relate - */ product-related { margin-bottom: 50px;

.product-related-title { margin: 20px 0;

.product-related-title p { font-family: var( main-text-font); font-size: 14px; font-weight: bold; color: #333333;

.product-related-item { width: 20%; text-align: center; padding: 0 6px;

.product-related-item img { width: 100%;

.product-related-item h1 { font-family: var( main-text-font); font-size: 11px; color: #333333; margin-top: 6px;

.cart-top-wrap { display: flex; justify-content: center; align-items: center;

.cart-top { height: 2px; width: 70%; background-color: #dddddd; display: flex; justify-content: space-between; align-items: center; margin: 50px 0 100px;

.cart-top-item { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dddddd; display: flex; align-items: center; justify-content: center; background-color: #fff;

.cart-top-item i { color: #dddddd;

.cart-top-cart { border: 1px solid #0DB7EA;

.cart-top-cart i { color: #0DB7EA;

.cart-content-left { flex: 2; padding-right: 12px;

.cart-content-left table { width: 100%; text-align: center;

.cart-content-left table th { padding-bottom: 30px; font-family: var( main-text-font); font-size: 12px; text-transform: uppercase; color: #333; border-collapse: collapse; border-bottom: 2px solid #dddddd;

.cart-content-left table p { font-family: var( main-text-font); font-size: 12px; color: #333;

.cart-content-left table input { width: 30px;

.cart-content-left table span { display: block; width: 20px; height: 20px; border: 1px solid #dddddd; cursor: pointer;

.cart-content-left table td { padding: 20px 0; border-bottom: 2px solid #dddddd;

.cart-content-left td:first-child img { width: 130px;

.cart-content-left td:nth-child(2){ max-width: 130px;

.cart-content-left td:nth-child(3) img{ width: 30px;

.cart-content-right { flex: 1; padding-left: 12px; border-left: 2px solid #dddddd;

.cart-content-right table { width: 100%;

.cart-content-right table th {

48 padding-bottom: 30px; font-family: var( main-text-font); font-size: 12px; color: #333; border-collapse: collapse; border-bottom: 2px solid #dddddd;

.cart-content-right table td { font-family: var( main-text-font); font-size: 12px; color: #333; padding: 6px 0;

.cart-content-right tr:nth-child(4) td { border-bottom: 2px solid #dddddd;

.cart-content-right tr td:last-child { text-align: right;

.cart-content-right-text { margin: 20px 0; text-align: center;

.cart-content-right-text p { font-family: var( main-text-font); font-size: 12px; color: #333;

.cart-content-right-button { text-align: center; align-items: center;

.cart-content-right-button button { padding: 0 18px; height: 35px; cursor: pointer;

.cart-content-right-button button:first-child { background-color: #fff; border: 1px solid black; margin-right: 20px;

.cart-content-right-button button:first-child:hover { background-color: #ddd;

.cart-content-right-button button:last-child { background-color: black; color: #fff; border: none; border: 1px solid black;

.cart-content-right-button button:last-child:hover { background-color: #dddddd; color: black;

.cart-content-right-dangnhap { margin-top: 20px;

.cart-content-right-dangnhap p { font-family: var( main-text-font); font-size: 12px; color: #333;

.delivery-top-wrap { display: flex; justify-content: center; align-items: center;

.delivery-top { height: 2px; width: 70%; background-color: #dddddd; display: flex; justify-content: space-between; align-items: center; margin: 50px 0 100px;

.delivery-top-item { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dddddd; display: flex; align-items: center; justify-content: center; background-color: #fff;

.delivery-top-adress { border: 1px solid #0DB7EA;

.delivery-top-adress i { color: #0DB7EA;

.delivery-content-left { width: 60%; padding-right: 12px;

.delivery-content-left p { font-family: var( main-text-font); font-size: 12px;

.delivery-content-left label { font-family: var( main-text-font); font-size: 12px; margin-bottom: 6px; display: block;

.delivery-content-left> p { font-weight: bold;

.delivery-content-left-dangnhap { margin-top: 12px;

.delivery-content-left-dangnhap i { font-size: 12px; margin-right: 12px;

.delivery-content-left-khachle { margin: 12px 0;

.delivery-content-left-khachle input { margin-right: 12px;

.delivery-content-left-dangky { margin-bottom: 30px;

.delivery-content-left-dangky input { margin-right: 12px;

.delivery-content-left-input-top { justify-content: space-between;

.delivery-content-left-input-top-item { width: calc(50% - 12px);

.delivery-content-left-input-top-item input { width: 100%; height: 35px; border: 1px solid #dddddd; padding-left: 6px;

.delivery-content-left-input-bottom input { width: 100%; height: 35px; border: 1px solid #dddddd; padding-left: 6px;

.delivery-content-left-button p { display: inline-block; font-family: var( main-text-font); font-size: 12px;

.delivery-content-left-button span { margin-right: 12px;

.delivery-content-left-button { justify-content: space-between; padding-top: 20px;

.delivery-content-left-button button { height: 35px; border: 2px solid black; padding: 6px 12px; cursor: pointer; transition: all 0.3s ease;

.delivery-content-left-button button:hover { background-color: black; color: #fff;

.delivery-content-right { width: 40%; padding-left: 12px; border-left: 2px solid #dddddd; height: auto;

.delivery-content-right table { width: 100%; font-family: var( main-text-font); font-size: 12px;

.delivery-content-right table tr th:first-child{ text-align: left;

.delivery-content-right table tr th { padding-bottom: 12px; border-bottom: 2px solid #dddddd;

.delivery-content-right table tr th:last-child{ text-align: right;

.delivery-content-right table tr td { padding: 6px 0;

.delivery-content-right table tr:nth-child(4) { border-top: 2px solid #dddddd;

.delivery-content-right table tr td:last-child { text-align: right;

.delivery-content-right table tr td:first-child { text-align: left;

.payment-top-wrap { display: flex; justify-content: center; align-items: center;

.payment-top { height: 2px; width: 70%; background-color: #dddddd; display: flex; justify-content: space-between; align-items: center; margin: 50px 0 100px;

.payment-top-item { width: 40px; height: 40px; border-radius: 50%;

53 border: 1px solid #dddddd; display: flex; align-items: center; justify-content: center; background-color: #fff;

.payment-top-item i { color: #dddddd;

.payment-top-payment { border: 1px solid #0DB7EA;

.payment-top-payment i { color: #0DB7EA;

.payment-content-right { width: 40%; border-left: 2px solid #ddd; padding-left: 12px;

.payment-content-left p,label { font-size: 12px; font-family: var( main-text-font);

.payment-content-right-button { display: flex; padding: 12px 0; border-bottom: 1px dashed #dddddd;

.payment-content-right-button input { height: 30px; width: 200px; margin-right: 100px; padding-left: 12px;

.payment-content-right-button button { height: 30px; width: 100px; background-color: black; color: white; border: none; cursor: pointer;

.payment-content-right-mnv { margin-top: 20px;

.payment-content-right-mnv select { height: 30px; width: 100%; color: #75758A; padding-left: 12px;

.payment-content-right-payment { margin-top: 50px; align-items: center; text-align: center;

.payment-content-right-payment button { height: 35px; padding: 0 20px; font-size: 12px; color: black; cursor: pointer; transition: all 0.3s ease; border: 2px solid black

.payment-content-right-payment button:hover { background-color: black; color: #fff;

5.3 Mã JS: const imgItem = document.querySelectorAll(".aspect-ratio-169 img") const imgItemContainer = document.querySelector(".aspect-ratio-169") const dotItem = document.querySelectorAll(".dot") let index = 0; let imgLeng = imgItem.length imgItem.forEach(function (image, index) { image.style.left = index * 100 + "%" dotItem[index].addEventListener("click", function () { slideRun(index)

}) function slider() { index++; if (index >= imgLeng) { index = 0 } slideRun(index)

55 function slideRun(index) { imgItemContainer.style.left = "-" + index * 100 + "%" const dotActive = document.querySelector(".active") dotActive.classList.remove("active") dotItem[index].classList.add("active");

} setInterval(slider, 5000) const toP = document.querySelector(".top") window.addEventListener("scroll", function () { const X = this.pageYOffset; if (X > 1) { toP.classList.add("active") } else { toP.classList.remove("active")

// -Menu-SLIDEBAR-CARTEGORY - - const itemsliderbar = document.querySelectorAll(".cartegory-left-li") itemsliderbar.forEach(function (menu, index) { menu.addEventListener("click", function () { menu.classList.toggle("block")

The product image display features a large image on the left, which updates dynamically when a user clicks on any of the smaller thumbnail images This interactive functionality enhances the shopping experience by allowing customers to view product details more clearly.

}) const baoquan = document.querySelector(".baoquan") const chitiet = document.querySelector(".chitiet") if (baoquan) { baoquan.addEventListener("click", function () { document.querySelector(".product-content-right-bottom-content- chitiet").style.display = "none"

56 document.querySelector(".product-content-right-bottom-content- baoquan").style.display = "block"

} if (chitiet) { chitiet.addEventListener("click", function () { document.querySelector(".product-content-right-bottom-content- chitiet").style.display = "block" document.querySelector(".product-content-right-bottom-content- baoquan").style.display = "none"

} const butTon = document.querySelector(".product-content-right-bottom- top") if (butTon) { butTon.addEventListener("click", function () { document.querySelector(".product-content-right-bottom-content- big").classList.toggle("activeB")

Hình 6 Giao diện trang chủ

58 Hình 7 Giao diện trang Danh mục sản phẩm

Hình 8 Giao diện trang sản phẩm

Hình 9 Giao diện trang Giỏ hàng

Hình 10 Giao diện trang Đặt hàng

Hình 11 Giao diện trang Thanh toán

Tiêu đề	Xây Dựng Website Bán Hàng Trực Tuyến
Tác giả	Nguyễn Văn Đại, Bùi Lệ Thu
Người hướng dẫn	ThS. Nguyễn Hồng Thanh
Trường học	Trường Đại Học Kiến Trúc Hà Nội
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	bài tập lớn
Năm xuất bản	2021
Thành phố	Hà Nội

Định dạng
Số trang	62
Dung lượng	1,5 MB