bài tập lớn thiết kế website bán hàng html css

Bài tập lớn môn Thực tập chuyên môn 1 Nhóm 16 – Lớp 19CN2 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 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 v.

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, một trang web còn có phần head, được xác định bởi cặp tag Khi sử dụng cặp tag này, bạn cần thêm một cặp tag , trong đó chứa tên trang web hiển thị trên thanh menu Do đó, cấu trúc của một trang web sẽ bao gồm cả phần head và body.

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, viết tắt của "Cascading Style Sheet", là ngôn ngữ quy định cách trình bày các thẻ HTML trên trang web và đóng vai trò quan trọng trong lập trình web Sự ra đời của CSS đã tạo nên một cuộc cách mạng trong thiết kế web Nó giúp giải quyết vấn đề hiển thị khác nhau của mã code trên các trình duyệt khác nhau, mang lại sự nhất quán trong trải nghiệm người dùng.

CSS xác định cách hiển thị nội dung của thẻ HTML trên các trình duyệt, đảm bảo sự đồng nhất bằng cách quy định các thuộc tính cho từng thẻ CSS 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 các kiểu khác, và sau đó áp dụng các thuộc tính cần thiết lên những 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ị nội dung, màu sắc, 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ơ Bạn có thể hình dung nó 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 và á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 được hiệu quả tối ưu.

– 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 một thuộc tính trong CSS, bạn cần sử dụng vùng chọn, và các thuộc tính cùng giá trị sẽ được đặt trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính sẽ có 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.

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

.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 website, bạn có thể lưu nội dung CSS vào một tệp riêng với phần mở rộng css và chèn tệp này vào trang web thông qua thẻ Thông thường, tệp CSS sẽ được chèn 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 (viết tắt là JS) là một ngôn ngữ kịch bản hướng đối tượng, nhẹ và đa nền tảng Chạy trong môi trường máy chủ lưu trữ như trình duyệt web, JavaScript cho phép kết nối với các đối tượng trong môi trường đó, từ đó cung cấp khả năng kiểm soát chương trình một cách linh hoạt.

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à thêm thông tin mới vào nội dung hiện có, giúp trang web hoạt động linh hoạt hơn.

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 nó tại một thời điểm hoặc yếu tố cụ thể Ngoài ra, bạn có thể lưu mã JavaScript vào file riêng và gọi nó khi cần thiết trên trang web.

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 tạo ra 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ể được phân loại thành website tĩnh, được xây dựng từ các tệp tin HTML, hoặc website động, được vận hành bởi các hệ thống quản lý nội dung (CMS) trên máy chủ Ngoài ra, website 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ừ trang web 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 và được định dạng thông qua file CSS Các yếu tố như kích thước, cách trình bày, font chữ của phần header, footer và các thành phần khác đều được quy định rõ ràng Tuy nhiên, phần trung tâm sẽ thay đổi tùy thuộc vào nội dung cụ thể 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

∨

BST Hoàng Cúc mang đến vẻ đẹp mộc mạc của áo dài, nhưng điều khiến người xem cảm thấy hào hứng chính là sự tinh tế và ngẫu hứng đầy cuốn hút trong từng thiết kế.

BST nổi bật với những đường nét mềm mại nhưng dứt khoát, cùng với sự cách điệu ở cổ áo và tay, tạo nên sự hài hòa trong từng chi tiết Điểm nhấn là sự 'chơi màu' tinh tế từ áo, quần đến các phụ kiện, mang lại vẻ đẹp sắc sảo và âm hưởng riêng Ý Niên được lựa chọn làm dresscode cho 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, hạn chế giặt bằng máy giặt vì 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 Tránh giặt chung với đồ sáng màu để không bị dính màu.

Để bảo quản sản phẩm tốt nhất, cần giặt ngay mà không ngâm để tránh loang màu, đồng thời phân biệt rõ màu sắc và loại vải nhằm ngăn ngừa tình trạng 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 khi giặt.

Khi giặt các sản phẩm có thể giặt bằng máy, hãy chọn chế độ giặt nhẹ và vắt ở mức trung bình Đồng thời, nên 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 IVY)

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 code for the top menu items defines a flexbox layout that centers the content both vertically and horizontally, using a bold, uppercase font style set at 12px Each list item has a padding of 0 12px and occupies the full height of the menu, enhancing user interaction with a cursor pointer effect.

.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;

.sliders{ 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; 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; font-size: 12px;

.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; border-radius: 50%;

.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 { 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 product content features a circular button with a diameter of 30px, designed with a 1px solid border in a light gray color It is centered both horizontally and vertically, with a white background that enhances visibility Positioned absolutely, the button sits 15px above its designated area and is horizontally centered on the page Its rounded shape and cursor pointer functionality ensure an interactive user experience.

.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;

.product-related-item p { font-size: 14px;

.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 { 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-item i { color: #dddddd;

.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; text-align: center;

.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%; 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)

} 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")

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

The product display features a large image alongside several smaller images When a user clicks on any of the smaller images, the large image updates to reflect the selected thumbnail, enhancing the visual experience and allowing for easy navigation through product options.

The JavaScript code snippet adds an event listener to the "baoquan" element, which, when clicked, hides the "chitiet" content and displays the "baoquan" content This functionality enhances user interaction by allowing users to toggle between different sections of product information seamlessly.

} 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ủ

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
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	63
Dung lượng	5,82 MB