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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (9.15 MB, 63 trang )

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

Lớp
Khóa
Giảng viên hướng dẫn

Bùi Lệ Thu
: 19CN2
: 2019
: ThS. Nguyễn Hồng Thanh

Hà Nội năm 2021

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2

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 vai trị quan trọng trong việc đưa mọi người tiếp cận thông tin
một cách nhanh nhất. Website là một nguồn thơng tin phong phú, nó giúp rút
ngắn khoảng cách giữa mọi người trên toàn thế giới. Ngày nay website đã trở
thành một phần không thể thiếu trong mọi lĩnh vực của đời sống. Nó được phát
triển với nhiều dạng khác nhau, một trang chia sẻ thơng tin, tin tức giúp mọi
người có thể tiếp cận thông tin một cách rễ ràng, một trang thương mại điện tử
giúp mọi người có thể trao đổi mua hàng mà không cần ra khỏi nhà hay một
trang quảng bá cơng ty giúp các doanh nghiệp có thể rễ ràng tiếp cận hàng triệu
khách hàng với chỉ phi tối ưu nhất... Đến đây ta có thấy được tầm quan trọng
của website nó gắn liền với sự phát triển của mỗi quốc gia.
Website chính là một sản phẩm tốt nhất của internet, mang đến lợi ích vơ
cùng to lớn cũng như đem lại nhiều cơ hội cho chính những người sử dụng.
Website mang lại cho người dùng những thông tin cần thiết, những vấn đề cần
giải đáp trong cuộc sống đều có thể tìm được trên các trang web, trả lời mọi thắc
mắc với thời gian nhanh chóng và hiệu quả. Không những thể với sự phát triển
của các mẫu web ban hàng trực tuyến cho phép người dùng internet tiếp cận
được tất cả những sản phẩm của các doanh nghiệp trên toàn thế giới Đối với
doanh nghiệp website là nơi giới thiệu hình ảnh, thương hiệu sản phẩm của
doanh nghiệp đến với người dùng. Website tạo lợi ích đa chiều từ người mua và
người bản, giúp cho người mua có thể có được mọi thơng tin minh cẩn, tư vấn,
đặt hàng và thanh toán trực tuyến, giúp cho mọi việc trở nên tự độnng hóa mà
khơng phải trở nên q phức tạp. Với lí do đó, em đã chọn đề tài “Xây dựng
website bán hàng trực tuyến” làm đề tài thực tập.
Chúng em xin cảm ơn thầy Nguyễn Hồng Thanh đã động viên, ủng hộ và
tạo những điều kiện thuận lợi nhất để chúng em có thể hồn thành đồ án này.
Tuy nhiên, do chưa có nhiều kinh nghiệm nên sẽ có nhiều sai sót, chúng em
mong thầy thơng cảm và góp ý thêm cho chúng em.

2

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
Hà Nội Tháng
12/2021
Nhóm thực hiện
Nhóm 16

3

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2

MỤC LỤC
Lời nói đầu...................................................................................2
MỤC LỤC......................................................................................4
DANH MỤC HÌNH ẢNH..................................................................6
CHƯƠNG I : CƠ SỞ LÝ THUYẾT...................................................7
I.

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

HTML là gì?......................................................................7

2.

Tập tin HTML là gì?..........................................................7

3.

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

4.

Thẻ trong HTML...............................................................8

II.

NGƠN NGỮ CSS..................................................................9

1.

CSS là gì?.........................................................................9

2.

Tại sao phải học CSS?......................................................9

3.

Cấu trúc CSS..................................................................10

4.

Cách chèn CSS vào HTML..............................................10

III. JAVASCRIP..........................................................................12
1.

JavaScript là gì?.............................................................12

2.

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

3.

Lợi ích khi dùng Javascript:............................................13

4.

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

5.

Làm thế nào để thêm JavaScript trên website của bạn?
14

CHƯƠNG II: THIẾT KẾ TRANG WEB CÁ NHÂN............................15
I.

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

II.

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

III. THIẾT KẾ WEBSITE............................................................16
1.

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

2.

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

3.

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

4.

Bố cục trang web...........................................................16

5.

Viết mã HTML, CSS, JAVASCRIP......................................16
4

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
5.1. Mã HTML..................................................................16
5.1.1.Trang chủ (index.html):........................................17
5.1.2.Trang danh mục sản phẩm (cartegory.html) :......19
5.1.3.Trang sản phẩm (product.html) :..........................22
5.1.4.Trang giỏ hàng (cart.html) :..................................26
5.1.5.Trang giao hàng (delivery.html) :..........................28
5.1.6.Trang thanh toán (payment.html) :......................31
5.2. Mã CSS:....................................................................33

5.3. Mã JS:.......................................................................54
6.

Demo sản phẩm:...........................................................56

CHƯƠNG III: KẾT LUẬN..............................................................61
TÀI LIỆU THAM KHẢO.................................................................62

5

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2

DANH MỤC HÌNH ẢNH
Hình 1. Giới thiệu CSS..........................................................................................9
Hình 2. JavaScript là một trong các ngơn ngữ lập trình đa nền tảng..................12
Hình 3. JavaScript được ứng dụng rất nhiều trong việc tạo dựng website..........13
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ự..14
Hình 5. />Hình 6. Giao diện trang chủ................................................................................57
Hình 7. Giao diện trang Danh mục sản phẩm.....................................................58
Hình 8. Giao diện trang sản phẩm.......................................................................59
Hình 9. Giao diện trang Giỏ hàng.......................................................................59
Hình 10. Giao diện trang Đặt hàng......................................................................60
Hình 11. Giao diện trang Thanh tốn..................................................................60

6

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2

CHƯƠNG I : CƠ SỞ LÝ THUYẾT
I.

NGÔN NGỮ SIÊU VĂN BẢN HTML.
1. HTML là gì?

 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 ln được gói trong cặp
tag <html> và </html>
 Cặp tag <body> và </body> 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:
<html>
<body>
Phần trình bày nội dung
</body>

</html>

7

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
Ngồi phần body cịn có phần head, được viết bởi cặp
tag <head></head>. Nếu bạn sử dụng cặp tag này, bạn
bắt buộc phải viết thêm một cặp tag nữa, đó
là <title></title>. Giữa <title> và </title> là tên của trang
web được hiển thị phía trên cùng của menubar. Như vậy
một trang web với lúc này sẽ có cấu trúc như sau:
<head>
<title>Tiêu đề của trang web</title>
</head>
<body>
Phần trình bày nội dung
</body>
</html>

4. Thẻ trong HTML.
 Mỗi thẻ là một từ khóa được bao quanh bởi ngoặc nhọn (vd: <html>;
<head> ;<body>).
 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: </html>;</head>;</body>).
 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.
 Có 2 loại thẻ :

 Thẻ đơn : Các thẻ chỉ có 1 thẻ mở ( vd: <img>)
 Thẻ kép là một cặp thẻ đóng và mở ( vd:

;<i></i> ).
 Các thẻ được lồng vào nhau nhưng không chéo nhau.
Vd đúng :

Tôi là <b>sinh</b>viên

Vd sai:

Tôi là <b>sinh

viên</b>
 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ở.
8

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
 Vd:

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

II.

NGƠN NGỮ CSS.
1. CSS là gì?

– CSS là viết tắt của cụm từ “Cascading Style Sheet”, nó là một ngơn ngữ
quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ
đang được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời
đã tạo nên một cuộc cách mạng. Đôi khi các bạn sẽ bối rối khi nhận thấy
rằng các đoạn code mình viết hiển thị khơng giống nhau trên các trình
duyệt khác nhau, CSS sẽ giúp các bạn giải quyết bài toán này.

– 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 gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ
HTML đó. Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các

vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay
nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay
đổi lên vùng chọn đó.

Hình 1. Giới thiệu CSS
9

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
2. Tại sao phải học CSS?
– Css có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn
chỉnh màu nền,đường viền,đổ bóng... cho các thẻ html . Nếu 1 website
mà chỉ làm bằng html khơng sử dụng css thì website đó nhìn sẽ rất thơ
xơ. Bạn có thể tưởng tượng nó như 1 chiếc xe máy mà bỏ hết lớp sơn và
áo bên ngoài chỉ còn lại mỗi bộ khung và máy.
– CSS cung cấp cho bạn hàng trăm thuộc tính trình bày đành cho các đối
tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu
quả.
– Ngồi ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác
nhau.
3. Cấu trúc CSS.
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ị;

}

Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính
và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln
có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong
danh sách có sẵn của CSS.

10

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và
mỗi một dòng khai báo thuộc tính sẽ ln có dấu chấm phẩy ở cuối. Một
vùng chọn có thể sử dụng khơng giới hạn thuộc tính.
VD:
.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ẻ <style></style> trong
phần <head></head> của trang web.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cách chèn CSS vào html</title>
<style>

body{background: red;}
h1{ color:blue;font-size:12px;}
</style>
</head>
<body>

Cách 1

</body>
</html>

– 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:
11

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cách chèn CSS vào html</title>
</head>
<body>

Cách 2

</body>
</html>

– Cách 3: Lưu nội dung CSS ra 1 file riêng có phần mở rộng là .css và
chèn file này vào website thông tin thẻ <link>, thường file css được
chèn trong cặp thẻ <head></head>
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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cách chèn CSS vào html</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

Cách2

</body>
</html>

III.
1.

JAVASCRIP.
JavaScript là gì?
12

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
– JS (viết tắt của Javascript) là một nền tảng (crossplatform), ngôn ngữ kịch bản hướng đối tượng (objectoriented). Nó là một ngơn ngữ nhỏ và nhẹ. Chạy trong
mơi trường máy chủ lưu trữ (ví dụ: trình duyệt web),
JavaScript có thể được kết nối với các đối tượng của mơi
trường để cung cấp kiểm sốt chương trình đối với
chúng.
– JavaScript là ngơn ngữ lập trình dựa trên logic. Nó có thể

được sử dụng để sửa đổi nội dung trang web. Và khiến
nó hoạt động theo nhiều cách khác nhau để đáp ứng với
hành động của người dùng. Các cách sử dụng phổ biến
cho JavaScript bao gồm các hộp xác nhận, kêu gọi hành
động và thêm các danh tính mới vào thơng tin hiện có.

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ì:
13

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
– JavaScript có thể được ứng dụng trong rất nhiều lĩnh
vực:
 Lập trình web
 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:
Là một ngơn ngữ lập trình phổ biến sử dụng trên 92%
nền tảng website hiện nay, JavaScript đã thể hiện vai trò
quan trọng với lĩnh vực này. Tầm quan trọng của nó thể
hiện qua các thao tác, công dụng như:
– Triển khai tập lệnh phía máy khách
– Viết mã phía máy chủ
– Thiết kế web responsive
– Google AMP
– Nhiều bộ chuyển đổi

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:
14

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
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
<script></script>. Ví dụ như sau:
<script type="text/javascript">
Your JavaScript code
</script>

Với quy tắc cơ bản, bạn nên gắn JavaScript trong tag <header> cho
website của bạn trừ khi bạn muốn nó thực thi tại một thời điểm nhất định
15

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
hoặc một yếu tố nhất định của trang web. Bạn cũng có thể lưu code
JavaScript dưới file riêng và gọi nó lên mỗi khi cần trên website.

16

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2

CHƯƠNG II: THIẾT KẾ TRANG WEB CÁ NHÂN
I.

THẾ NÀO LÀ MỘT WEBSITE ?
Website còn gọi là trang web, trang mạng, là một tập hợp trang web,
thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide
Web của Internet. Một tran veb là tập tin HTML hoặc XHTML có thể truy
nhập dùng giao thức HTTP. Website có thể được xây dựng các tệp tin
HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ
(website động). Website có thể được xây dựng bằng nhiều ngơn ngữ lập
trình khác nhau (PHP,.NET, Java, Ruby on Rails...)
 Nghĩa đen:
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)

II.

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

17

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
III.

THIẾT KẾ WEBSITE.
1. Thiết kế website giao diện có trước.
Giao diện trang web này của nhóm em được tham khảo từ TRANG
WEB IVYMODA và được chỉnh sửa lại để phù hợp
với mơn học hơn.

Hình 5. />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.
4. Bố cục trang web.
Về bố cục của trang chủ và các trang con cơ bản là giống nhau. Và
được định dang bởi file CSS. Từ kích thước cách trình bày , font chữ ..
của pagge , head , ngang , và footer. Chỉ có phần center tùy thuộc vào nội
dung của mỗi trang nên sẽ khác nhau.
5. Viết mã HTML, CSS, JAVASCRIP.

5.1.

Mã HTML.
18

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
5.1.1. Trang chủ (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
href=" />integrity="sha384DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChig
m" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Website - Ivy</title>
</head>
<body>
<secsion class="top">
<div class="container">
<div class="row">
<div class="top-logo">
<a href="index.html"><img src="image/logo.png" alt=""></a>
</div>
<div class="top-menu-items">
<ul>
<li>Nữ

<ul class="top-menu-item">
<li>
<a href="cartegory.html">Hàng nữ mới về</a>
</li>
<li>
<a href="">Hoàng Cúc Collection</a>
</li>
<li>
<a href="">Áo nữ</a>
</li>
<li>
<a href="">Váy nữ</a>
</li>
</ul>
</li>
<li>Nam
<ul class="top-menu-item">
<li>
<a href="">Hàng Nam mới về</a>
</li>
<li>
<a href="">Áo nam</a>
</li>

19

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
<li>
<a href="">Váy nam</a>

</li>
<li>
<a href="">Quần nam</a>
</li>
</ul>
</li>
<li>Trẻ em</li>
<li>Flast sale</li>
<li>Hot items</li>
<li>Bộ sưu tập</li>
<li>Tin tức</li>
<li>Thơng tin</li>
</ul>
</div>
<div class="top-menu-icons">
<ul>
<li>
<input type="text" placeholder="tìm kiếm">
<i class="fas fa-search"></i>
</li>
<li>
<i class="fas fa-user-secret"></i>
</li>
<li>
<i class="fas fa-shopping-cart"></i>
</li>
</ul>
</div>
</div>
</div>

</secsion>

<section class="sliders">
<div class="aspect-ratio-169">
<img src="image/slide1.jpg">
<img src="image/slide2.jpg">
<img src="image/slide3.jpg">
</div>
<div class="dot-container">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>

<section class="footer">

20

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
<div class="footer-container">

Tải ứng dụng IVY moda

Nhận bản tin IVY moda

alt=""></a></li>
<li><a href="">Liên hệ</a></li>
<li><a href="">Tuyển dụng</a></li>
<li><a href="">Giới thiệu</a></li>
<li><a href=""><i class="fab fa-facebook-f"></i></a>href=""><i class="fab fa-youtube"></i></a></li>
</div>
<div class="footer-text">
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 .
</div>
<div class="footer-bottom">
©Ivymoda All rights reserved
</div>
</div>
</section>

<script src="script.js"></script>

</body>
</html>

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

Trang chủ

Nữ

Hàng nữ mới về

21

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
</div>
</div>
<div class="container">
<div class="row">
<div class="cartegory-left">
<ul>
<li class="cartegory-left-li "><a href="#">NỮ</a>
<ul>
<li><a href="">HÀNG NỮ MỚI VỀ</a></li>
<li><a href="">BEYOND TRENDY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
</ul>
</li>
<li class="cartegory-left-li"><a href="#">NAM</a>
<ul>
<li><a href="">HÀNG NAM MỚI VỀ</a></li>
<li><a href="">BEYOND TRENDY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
<li><a href="">JEANS FOR JOY</a></li>

</ul>
</li>
<li class="cartegory-left-li"><a href="">TRẺ EM</a></li>
<li class="cartegory-left-li"><a href="">BỘ SƯU TẬP</a></li>
<li class="cartegory-left-li"><a href="">ĐỒ BẢO HỘ</a></li>
</ul>
</div>
<div class="cartegory-right row">
<div class="cartegory-right-top-item">

HÀNG NỮ MỚI VỀ

</div>
<div class="cartegory-right-top-item">
<button><span>Bộ lọc</span> <i class="fas fa-sortdown"></i></button>
</div>
<div class="cartegory-right-top-item">
<select name="" id="">
<option value="">Sắp xếp</option>
<option value="">Giá cao đến thấp</option>
<option value="">Giá thấp đến cao</option>
</select>
</div>
<div class="cartegory-right-content row">
<div class="cartegory-right-content-item">
<a href="product.html">
<img src="image/sp1.jpg" alt="">

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

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
</a>

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp2.jpg" alt="">

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

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp3.jpg" alt="">

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

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp4.jpg" alt="">

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

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp5.jpg" alt="">

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

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp6.jpg" alt="">

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

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">

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

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp8.jpg" alt="">

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

1.743.000<sup>đ</sup>

</div>
</div>

<div class="cartegory-right-bottom row">
<div class="cartegory-right-bottom-items">

Hiện thị 2 <span>|</span> 4 sản phẩm

</div>
<div class="cartegory-right-bottom-items">

<span>«</span>1 2 3 4 5<span>»</span>Trang cuối

</div>
</div>

23

Bài tập lớn mơn: Thực tập chun mơn 1 Nhóm 16 – Lớp 19CN2
</div>
</div>
</div>
</section>

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

Trang chủ

Nữ

Hàng nữ mới về

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

</div>
<div class="product-content row">
<div class="product-content-left row">
<div class="product-content-left-big-img">
<img src="image/sp1.1.jpg" alt="">
</div>
<div class="product-content-left-small-img">
<img src="image/sp1.1.jpg" alt="">
<img src="image/sp1.2.jpg" alt="">
<img src="image/sp1.3.jpg" alt="">
</div>
</div>
<div class="product-content-right">
<div class="product-content-right-product-name">

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

MSP: 86M7107

</div>
<div class="product-content-right-product-price">

1.743.000<sup>đ</sup>

</div>
<div class="product-content-right-product-color">

Size:

Số lượng:

Vui lòng chọn size

MUA HÀNG

</button></a>
<button>

TÌM TẠI CỬA HÀNG

</button>
</div>
<div class="product-content-right-product-icon">
<div class="product-content-right-product-icon-item">
<i class="fas fa-phone-alt"></i>

Hotline

</div>
<div class="product-content-right-product-icon-item">
<i class="far fa-comments"></i>

Chat

</div>
<div class="product-content-right-product-icon-item">
<i class="far fa-envelope"></i>

Mail

</div>
</div>
<div class="product-content-right-product-QR">
<img src="image/qrcode2.png" alt="">
</div>
<div class="product-content-right-bottom">
<div class="product-content-right-bottom-top">
∨
</div>
<div class="product-content-right-bottom-content-big">
<div class="product-content-right-bottom-content-title row">
<div class="product-content-right-bottom-content-titleitem chitiet">

Chi tiết

</div>