Cách thêm Thương mại điện tử vào trang web HTML
|
Kính gửi các lập trình viên. Hãy khám phá cách tạo một trang web thương mại điện tử với mã nguồn đầy đủ bằng HTML, CSS và JavaScript. Chúng tôi sử dụng mã HTML để xây dựng nền tảng của trang web thương mại điện tử và mã CSS để tạo kiểu cho trang web đó. Mỗi mã được thảo luận sâu. Tiếp theo, chúng tôi tận dụng chức năng nhất định từ một trang web thương mại điện tử và để làm điều này, chúng tôi viết mã JavaScript Show
Đã đến lúc chuyển sang trang web thương mại điện tử của bạn nếu bạn cảm thấy mệt mỏi với việc mua hàng trên Amazon, Flipkart hoặc bất kỳ trang web thương mại điện tử nào khác và muốn thử một thứ gì đó khác biệt Hơn 100 Dự án Front-end dành cho nhà phát triển Web (Mã nguồn) Này…. , chờ một chút bạn đã không có trang web của bạn? Video Hướng Dẫn Trang Web Thương Mại Điện Tử Sử Dụng Html CSS Và JavaScriptChúng ta hãy xem giao diện của trang web trước khi đi vào quy trình được sử dụng để tạo ra nó. Bạn có thể duyệt qua cửa hàng trực tuyến thanh lịch của tôi dự án trực tiếp. - Bạn có thể kiểm tra tại đây Xem Thương mại điện tử Pen của Himanshu Singh (@himanishu) trên CodePen. Xem Thương mại điện tử Pen của Himanshu Singh (@himanishu) trên CodePen
Sau khi xem kế hoạch trang web thương mại điện tử đáp ứng của tôi, bạn có thể đã có ý tưởng cho trang web của riêng mình Các kỹ năng sau đây là cần thiết để tạo trang web này. Chúng là những thành phần thiết yếu bạn nên sở hữu để tạo một trang web thương mại điện tử 1. HTML. HTML cho mã trang web thương mại điện tử đáp ứng. -Giống như hệ thống xương (khung/cấu trúc của xương) của cơ thể con người tạo ra cấu trúc/bố cục cho cơ thể con người. Tương tự, mã HTML cũng làm như vậy, nó cung cấp bố cục của các trang web Đừng lo lắng, bạn không cần bất kỳ kiến thức sinh học nào cho trang web này Mỗi trang web đều có ba phần chính. -
1. tiêu đề. -Bên dưới có hình ảnh của thanh điều hướng chứa tên/logo thương hiệu, thanh tìm kiếm và các mục menu, tất cả đều nằm dưới tiêu đề
1. Trong phần tiêu đề, trước tiên hãy tạo ba div. Một cho logo, thứ hai cho thanh tìm kiếm và thứ ba cho danh sách menu Trong lớp thứ hai, tôi đã sử dụng biểu tượng tìm kiếm mà tôi đã nhập thông qua ionicon , đối với bất kỳ loại biểu tượng nào được sử dụng trong quá trình phát triển trang web, bạn có thể .
Chơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây Đầu vào là một thẻ được sử dụng cho nhiều mục đích như hộp kiểm, radio, đầu vào email, ngày, giờ, v.v. Nhưng ở đây chúng tôi đang sử dụng cho thanh tìm kiếm nên gõ là văn bản. Để có thêm ý tưởng, bạn có thể tham khảo các blog khác của chúng tôi
Vì trang web của chúng tôi phải đáp ứng ( Trang web đáp ứng được tự động điều chỉnh cho các kích thước màn hình và chế độ xem khác nhau. ) Ví dụ. -Trang web Blogger cũng phản hồi nhanh, bạn có thể dễ dàng sử dụng thoải mái trên điện thoại (màn hình nhỏ) và PC (màn hình cỡ lớn)
Vì vậy, khi chúng tôi đang sử dụng trang web, có một vấn đề là nó không thể hiển thị tất cả các danh sách menu trên thanh điều hướng. Cuối cùng, chúng tôi quyết định tạo một danh sách menu hoạt động bằng nút bấm. Vì vậy, khi bạn nhấp vào biểu tượng menu Nó sẽ mở ra một danh sách menu mà bạn có thể thấy trong hình ảnh tiếp theo
Bạn đã thấy cách giải quyết vấn đề nhưng bây giờ là lúc viết mã. Thêm một lớp trình đơn trong đó biểu tượng đóng mà bạn có thể nhìn thấy trong hình trên và cũng thêm một biểu tượng trình đơn trong lớp tiêu đề1 Bây giờ, phần tiêu đề đã kết thúc. Hãy chuyển sang phần chính
2. Tiết diện. -Phần chủ yếu chứa nội dung của một trang web được chia phần chủ yếu thành hai phần. - phần1 chứa thanh trượt hình ảnh chứa hình ảnh. Phần 2 chứa lớp container chứa các mục khác nhau
Sử dụng thẻ hình ảnh để thêm các hình ảnh khác nhau vào thanh trượt hình ảnh. Thêm một vùng chứa có tên là “lớp” bên trong Phần 2 để nó chèn những thứ có tên là “lớp” trên trang web của bạn bao nhiêu lần tùy thích. Thêm tên mặt hàng, giá mặt hàng, hình ảnh mặt hàng và các lớp dữ liệu mặt hàng vào mỗi mặt hàng. Bạn cũng có thể thêm một danh mục nữa nếu muốn
Phần này đã kết thúc
Ký hiệu. Này Bạn vẫn đang thắc mắc tại sao chúng tôi lại gán tên lớp cho thẻ này phải không? . Câu trả lời là không nếu bạn muốn tạo kiểu cho nhiều thẻ có cùng kiểu, trong trường hợp đó, bạn cần tạo kiểu riêng cho từng thẻ.
3. chân trang. -Footer là phần cuối cùng của trang web. Trong đó thêm một số chi tiết. Footer của trang web trên được hiển thị bên dưới trong hình
Bây giờ làm thế nào chúng ta sẽ thực hiện nó ??
Hy vọng hình ảnh trên sẽ giúp bạn hiểu làm thế nào để thực hiện nó. Đầu tiên, Chia footer thành 4 lớp chính là footer0, footer1, footer2 và footer3 Bây giờ là lúc để triển khai mã của nó
Bên trong lớp footer1, thêm một lớp cho các biểu tượng mạng xã hội, sau đó bên trong thêm các biểu tượng của chúng Tương tự, thêm nhiều lớp hơn vào footer2 và footer3 như được đưa ra bên dưới trong mã
<—–Bây giờ, mã HTML kết thúc—->
Mã nguồn website thương mại điện tử bằng HTML và CSSBây giờ là lúc thêm các tệp CSS và JAVASCRIPT vào HTML. Vì vậy, vì tôi đang sử dụng tệp bên ngoài cho CSS và JAVASCRIPT nên tôi đã liên kết nó trong mã HTML
vì vậy cấu trúc của trang web của chúng tôi đã sẵn sàng
Code CSS cho website thương mại điện tử. -Cấu trúc của bố cục trang web đã hoàn thành nhưng nó trông không đẹp nếu không có kiểu dáng. Chỉ bộ xương của con người không thể đẹp nếu không có làn da. Vì vậy, ở đây công việc tạo kiểu được thực hiện với sự trợ giúp của CSS Các chủ đề cần biết trước khi hướng dẫn CSS. - Portfolio Website Sử Dụng HTML CSS Và JAVASCRIPT ( Mã Nguồn) 1. Hộp linh hoạt. 1. Đầu tiên tạo kiểu cho tiêu đề. Sử dụng thuộc tính Flex để căn chỉnh mọi mục flex trong tiêu đề thành một dòng. 1: *{ 2: margin: 0; 3: padding: 0; 4: box-sizing: border-box; 5: } 6: header{ 7:
display: flex; 8: justify-content: space-evenly; 9: align-items: center; 10:
height:60px; 11: width:100%; 12: background:black; 13: } 14: .heading ul{ 15:
display:flex; 16: } 17: .logo a{ 18: color:white; 19: transition-duration: 1s;
20: font-weight: 800; 21: } 22: .logo a:hover{ 23: color:rgb(240, 197, 6); 24:
transition-duration: 1s; 25: } 26: .heading ul li{ 27: list-style: none; 28: }
29: .heading ul li a{ 30: margin:5px; 31: text-decoration: none; 32:
color:black; 33: font-weight: 500; 34: position:relative; 35: color:white; 36:
margin:2px 14px; 37: font-size: 18px; 38: transition-duration: 1s; 39: } 40:
.heading ul li a:active{ 41: color:red; 42: } 43: .heading ul li a:hover{ 44:
color:rgb(243, 168, 7); 45: transition-duration: 1s; 46: } 47: .heading ul li
a::before{ 48: content:''; 49: height:2px; 50: width:0px; 51: position:absolute;
52: left:0; 53: bottom:0; 54: background-color: white; 55: transition-duration:
1s; 56: } 57: .heading ul li a:hover::before{ 58: width:100%; 59:
transition-duration: 1s; 60: background-color:rgb(243, 168, 7); 61: } 62:
#input{ 63: height:30px; 64: width:300px; 65: text-decoration: none; 66:
border:0px; 67: padding:5px; 68: } 69: .logo a{ 70: color: white; 71: font-size:
35px; 72: font-weight: 500; 73: text-decoration:none; 74: } 75: ion-icon{ 76:
width:30px; 77: height:30px; 78: background-color: white; 79: color:black; 80: }
81: ion-icon:hover{ 82: cursor: pointer; 83: } 84: .search a{ 85: display:flex;
86: } 87: header a ion-icon{ 88: position:relative; 89: right:3px; 90: } 91:
.img-slider img{ 92: height:720px; 93: width:1080px; 94: } 95: @keyframes slide{
96: 0%{ 97: left:0px; 98: } 99: 15%{ 100: left:0px; 101: } 102: 20%{ 103:
left:-1080px; 104: } 105: 32%{ 106: left:-1080px; 107: } 108: 35%{ 109:
left:-2160px; 110: } 111: 47%{ 112: left:-2160px; 113: } 114: 50%{ 115:
left:-3240px; 116: } 117: 63%{ 118: left:-3240px; 119: } 120: 66%{ 121:
left:-4320px; 122: } 123: 79%{ 124: left:-4320px; 125: } 126: 82%{ 127:
left:-5400px; 128: } 129: 100%{ 130: left:0px; 131: }} 132: .img-slider{ 133:
display:flex; 134: float:left; 135: position:relative; 136: width:1080px; 137:
height:720px; 138: animation-name:slide; 139: animation-duration: 10s; 140:
animation-iteration-count: infinite; 141: transition-duration:2s ; 142: } 143:
.heading1 { 144: opacity:0; 145: } 146: .search{ 147: display:flex; 148:
position: relative; 149: } 150: .section1{ 151: width:1080px; 152:
overflow:hidden; 153: justify-content: center; 154: align-items: center; 155:
margin:0px auto; 156: } 157: .section2 .container{ 158: display:flex; 159:
width:100%; 160: height:max-content; 161: flex-wrap: wrap; 162:
justify-content:center; 163: margin:10px auto; 164: } 165: .section2 .container
.items{ 166: margin: 10px; 167: width:200px; 168: height: 300px; 169:
background-color:white; 170: border:2.5px solid black; 171: border-radius: 12px;
172: } 173: .section2 .container .items .name{ 174: text-align:center; 175:
background-color:rgb(240, 197, 6); 176: height:25px; 177: padding-top:4px; 178:
color:white; 179: margin: 0; 180: } 181: .section2 .container .items .price{
182: float:left; 183: padding-left:10px; 184: display: block; 185: width:100%;
186: color:rgb(255, 0, 0); 187: font-weight: 650; 188: } 189: .section2
.container .items .info{ 190: padding-left:10px; 191: color:rgb(243, 168, 7);
192: } 193: .section2 .container .items .img img{ 194: width:200px; 195:
height:200px; 196: margin: 0; 197: padding: 0; 198: border-radius:12px; 199:
transition-duration:0.8s; 200: } 201: .section2 .container .items .img { 202:
overflow: hidden; 203: margin: 0; 204: } 205: .section2 .container .items:hover
.img img{ 206: transform: scale(1.2); 207: transition-duration:0.8s; 208:
border-radius:12px; 209: } 210: footer{ 211: display:flex; 212: flex-direction:
column; 213: background-color: black; 214: align-items: center; 215:
color:white; 216: } 217: .footer1{ 218: display:flex; 219: flex-direction:
column; 220: align-items: center; 221: color:white; 222: margin-top:15px; 223: }
224: .social-media{ 225: display:flex; 226: justify-content: center; 227:
color:white; 228: flex-wrap: wrap; 229: } 230: .social-media a{ 231:
color:white; 232: margin:20px; 233: border-radius: 5px; 234: margin-top:10px;
235: color:white; 236: } 237: .social-media a ion-icon{ 238: color:white; 239:
background-color: black; 240: } 241: .social-media a:hover ion-icon{ 242:
color:red; 243: transform: translateY(5px); 244: } 245: .footer2{ 246: display:
flex; 247: width:100%; 248: justify-content:space-evenly; 249: align-items:
center; 250: text-decoration: none; 251: flex-wrap: wrap; 252: } 253: .footer0{
254: font-weight:1200; 255: transition-duration: 1s; 256: } 257: .footer0:hover{
258: color:rgb(243, 168, 7); 259: } 260: .footer2 .heading { 261: font-weight:
900; 262: font-size: 18px; 263: } 264: .footer3 { 265: margin-top:60px; 266:
margin-bottom: 20px; 267: display:flex; 268: flex-wrap: wrap; 269:
justify-content: center; 270: } 271: .footer2 .heading:hover{ 272:
color:rgb(243, 168, 7) ; 273: } 274: .footer2 .div:hover{ 275: transform:
scale(1.05); 276: } 277: .footer3 h4{ 278: margin:0 10px; 279: } 280: .footer2
div{ 281: margin:10px; 282: } 283: .menu{ 284: visibility:hidden; 285: } 286:
.heading1 .ham:active{ 287: color: red; 288: } 289: .items{ 290:
overflow:hidden; 291: } 292: .ham,.close{ 293: cursor:pointer; 294: } 295:
@media screen and (max-width:1250px){ 296: .heading ul li{ 297: display:none;
298: } 299: .items{ 300: transform:scale(0.9); 301: } 302: .img-slider img{ 303:
height:60vw; 304: width:80vw; 305: } 306: .ham:active { 307: color:red; 308: }
309: .menu { 310: display:flex; 311: flex-direction: column; 312: align-items:
center; 313: } 314: .menu a ion-icon{ 315: position: absolute; 316: } 317:
@keyframes slide1{ 318: 0%{ 319: left:0vw; 320: } 321: 15%{ 322: left:0vw; 323:
} 324: 20%{ 325: left:-80vw; 326: } 327: 32%{ 328: left:-80vw; 329: } 330: 35%{
331: left:-160vw; 332: } 333: 47%{ 334: left:-160vw; 335: } 336: 50%{ 337:
left:-240vw; 338: } 339: 63%{ 340: left:-240vw; 341: } 342: 66%{ 343:
left:-320vw; 344: } 345: 79%{ 346: left:-320vw; 347: } 348: 82%{ 349:
left:-400vw; 350: } 351: 100%{ 352: left:0vw; 353: }} 354: .menu ul{ 355:
display:flex; 356: flex-direction:column; 357: position: absolute; 358:
width:100vw; 359: height:100vh; 360: background-color: black; 361: left:0; 362:
top:0; 363: z-index:11; 364: align-items: center; 365: justify-content: center;
366: opacity:1; 367: } 368: .close{ 369: z-index:34; 370: color:white; 371:
background-color: black; 372: } 373: .close:active{ 374: color:red; 375: } 376:
.menu ul li{ 377: list-style: none; 378: margin: 20px; 379: border-top:3px solid
white; 380: width:80%; 381: text-align:center; 382: padding-top:10px; 383: }
384: .menu ul li a{ 385: text-decoration: none; 386: padding-top: 10px; 387:
color:white; 388: font-weight: 900; 389: } 390: .menu ul li a:hover{ 391:
color:rgb(240, 197, 6); 392: } 393: .img-slider{ 394: display:flex; 395:
float:left; 396: position:relative; 397: width:80%; 398: height:60%; 399:
animation-name:slide1; 400: animation-duration: 10s; 401:
animation-iteration-count: infinite; 402: transition-duration:2s ; 403: } 404:
.section1{ 405: width:80%; 406: overflow:hidden; 407: justify-content: center;
408: align-items: center; 409: margin:0px auto; 410: } 411: .heading1{ 412:
opacity: 1; 413: position:relative; 414: bottom:8px; 415: } 416: .search a{ 417:
display:flex; 418: flex-wrap: nowrap; 419: } 420: .heading1 .ham{ 421:
background-color: black; 422: color:white; 423: } 424: #input{ 425: width:200px;
426: flex-shrink:2; 427: } 428: header{ 429: height:150px; 430: } 431: } 432:
@media screen and (max-width:550px){ 433: .heading ul li{ 434: display:none;
435: } 436: .heading1{ 437: opacity: 1; 438: bottom:8px; 439: } 440: header{
441: height:250px; 442: flex-wrap: wrap; 443: display: flex; 444:
flex-direction: column; 445: } 446: #input{ 447: width:150px; 448: } 449:
.close{ 450: z-index:34;} 451: .search a{ 452: display:flex; 453: flex-wrap:
nowrap; 454: } 455: }
Nàyyy………đợi chút nữa. những gì bạn nói là trang web của bạn không hoạt động bình thường khi kích thước màn hình nhỏ. Bạn không thể mở danh sách menu. Mã Javascript cho trang web thương mại điện tử đáp ứng. -Một trang web chỉ có cấu trúc và kiểu dáng giống như một người đang ngủ (Nó không thể thực hiện bất kỳ chức năng nào). Vì vậy, để trang web hoạt động tốt, chúng tôi sử dụng Javascript Các chủ đề bạn nên biết trước khi triển khai mã javascript. - 1. Thao tác DOM (Mô hình đối tượng tài liệu). Vì vậy, trước tiên chúng tôi muốn rằng khi chúng tôi nhấp vào biểu tượng menu được hiển thị trong hình ảnh đầu tiên bên dưới thì danh sách menu sẽ được mở như trong hình tiếp theo và khi chúng tôi nhấp vào biểu tượng đóng thì một lần nữa chúng tôi sẽ quay lại trang đầu tiên như được hiển thị
Ý tưởng đã rõ ràng, đã đến lúc triển khai nó trong mã 1: const close=document.querySelector(".close"); 2: const
open=document.querySelector(".ham"); 3: const
menu=document.querySelector(".menu") 4: close.addEventListener("click",()=>{ 5:
menu.style.visibility="hidden"; 6: }) 7: open.addEventListener("click",()=>{ 8:
menu.style.visibility="visible"; 9: })
Đầu tiên, tôi đã chọn các lớp có tên là close, ham và menu bằng cách sử dụng bộ chọn truy vấn sau đó sử dụng addEventListener(hàm cho phép chúng ta chạy các hàm khi sự kiện nào đó được thực hiện)
TẢI CODE NGAY
Tôi đã chọn sự kiện nhấp chuột cho cả lớp đóng và lớp ham để khi bạn nhấp vào biểu tượng đóng và menu, nó sẽ thực hiện mã được viết bên trong chức năng được cho là chạy
Khi chúng tôi nhấp vào biểu tượng đóng, nó sẽ ẩn khả năng hiển thị của lớp menu (điều này làm cho mã được viết bên trong lớp menu bị ẩn có nghĩa là chúng sẽ không chạy nữa. )
Tạo trình tạo trích dẫn ngẫu nhiên bằng HTML, CSS và JavaScript
Khi chúng tôi nhấp vào biểu tượng menu (lớp ham), nó sẽ đặt mức độ hiển thị của danh sách menu thành hiển thị (vì vậy bây giờ chúng tôi có thể thấy đoạn mã đang chạy được viết bên trong lớp menu)
<———Cuối cùng, một trang web thương mại điện tử đơn giản và phản hồi nhanh sử dụng HTML, CSS và Kiến thức cơ bản về Javascript đã hoàn thành— E-commerce website using HTML, CSS, and the Basics of Javascript is completed———>
Tôi hy vọng bạn thích trang web thương mại điện tử của bạn Đợi đã, Bạn vẫn chưa triển khai nó Vậy tại sao bạn còn chờ đợi, hãy triển khai nó ngay bây giờ và tận hưởng mua sắm của bạn
Nếu bạn gặp bất kỳ khó khăn nào, vui lòng bình luận về các vấn đề của bạn và Nếu bạn thực sự thích nó, vui lòng thể hiện tình yêu của bạn trong phần bình luận, điều này thực sự thúc đẩy một blogger cung cấp nhiều nội dung như vậy Tôi có thể tạo trang web Thương mại điện tử bằng HTML không?Người mới bắt đầu tạo Trang web thương mại điện tử bằng HTML và CSS dễ dàng hơn . Bước đầu tiên là tạo bố cục trang web của bạn bằng HTML. Bạn có thể tạo thanh điều hướng, thanh tìm kiếm và các trang có liên quan khác cho trang web của mình bằng HTML.
Thương mại điện tử HTML là gì?HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản. HTML là một loại tài liệu văn bản đặc biệt được trình duyệt Web sử dụng để trình bày văn bản và đồ họa . HTML bao gồm các mã hoặc 'thẻ' được tiêu chuẩn hóa được sử dụng để xác định cấu trúc thông tin trên trang web.
Làm thế nào để tạo một trang web thương mại điện tử?Chọn Hệ thống quản lý nội dung (CMS) của bạn. Tạo một tài khoản (Hoặc Nhận Web Hosting). Chọn Chủ đề hoặc Mẫu thương mại điện tử. . Tùy chỉnh trang web của bạn và xây dựng các trang web. . Tạo danh sách sản phẩm. . Thiết lập cổng thanh toán, khoảng không quảng cáo và công cụ thuế. . Kiểm tra và khởi chạy trang web thương mại điện tử của bạn |
