Products
Sell your Products
Advertise
Pricing
Product Buisness
Services
Return
Cash Back
Affiliate Marketing
Others
Company
Complaint
Careers
Affiliate Marketing
Support
Get Help
Help Center
Privacy Policy
Terms
Login
Copyright ©
ShoPperZ
2021-2028
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.
2. Khái niệm cơ bản về CSS [bộ chọn, màu, hộp viền, v.v.].
3. hiệu ứng giả [di chuột, hoạt động] và các phần tử giả [trước].
4. truy vấn phương tiện [đáp ứng] và khung hình chính [hoạt ảnh].
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.
sau đó sử dụng tương tự cho menu tìm kiếm và danh sách tiêu đề dưới dạng flexbox. sau đó căn chỉnh chúng theo một đường ngang bằng các thuộc tính.
2. đặt chế độ hiển thị của lớp menu và lớp tiêu đề bị ẩn vì nó sẽ xuất hiện khi kích thước của màn hình nhỏ hơn. [khi chúng tôi đang sử dụng nó trên điện thoại hoặc tab].
3. Áp dụng các thuộc tính và hiệu ứng di chuột khác [hiệu ứng HOVER hoạt động khi con trỏ di chuyển qua thẻ mà nó được áp dụng] cho các tệp tiêu đề như minh họa bên dưới.
4. Sử dụng thuộc tính khung hình chính được sử dụng cho hình ảnh động [tôi sử dụng nó cho thanh trượt hình ảnh].
5. Áp dụng kiểu dáng cho các mặt hàng/sản phẩm và các lớp của chúng [flex và một số thuộc tính khác].
6. Tương tự, áp dụng một số kiểu trên Footer như hình bên dưới.
7. Cuối cùng, khi trang web của bạn đã sẵn sàng, đã đến lúc làm cho trang web phản hồi nhanh để trang web cũng hoạt động tốt trên màn hình nhỏ [điện thoại].
8. Sử dụng thuộc tính truy vấn phương tiện để làm cho nó phản hồi nhanh và bên trong nó đề cập đến các thuộc tính bạn muốn xem khi kích thước màn hình nhỏ.
cuối cùng, hãy kiểm tra xem trang web của bạn đã sẵn sàng chưa.
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.
chúng ta sẽ giải quyết vấn đề này bằng Javascript. Vì vậy, hãy chuyển sang phần Javascript.
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].
2. Khái niệm cơ bản về Javascript.
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ị
Trang web thương mại điện tử sử dụng Html Css và Javascript
Trang web thương mại điện tử sử dụng Html Css và Javascript
Ý 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]
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