Nội phân chính
- Dự án trực tiếp:- Ở đây bạn có thể kiểm tra nó.
- HTML cho mã trang web thương mại điện tử phản hồi:-
- 1. Tiêu đề:-
- 2. Phần:-
- 3. Footer:-
- Mã nguồn cho trang web E Commerce trong HTML và CSS
- Trang web thương mại điện tử mã CSS:-
- Mã JavaScript cho trang web Thương mại điện tử đáp ứng:-
- Chúng ta có thể tạo trang web thương mại điện tử bằng HTML và CSS không?
- Làm cách nào để làm cho trang web thương mại điện tử của tôi đáp ứng?
- CSS trong E là gì
Này các lập trình viên! Hãy cùng học cách tạo một trang web thương mại điện tử bằng cách sử dụng HTML, CSS và JavaScript với mã nguồn đầy đủ. Chúng tôi giải thích mọi mã từng bước. Chúng tôi tạo cấu trúc cơ bản của trang web thương mại điện tử bằng mã HTML, sau đó tạo kiểu trang web thương mại điện tử của chúng tôi bằng mã CSS. Sau đó, chúng tôi sử dụng một số chức năng trong một trang web thương mại điện tử để chúng tôi sử dụng mã JavaScript cho việc này. & NBSP;
Trải cảm mua sắm tại Amazon, Flipkart hoặc bất kỳ trang web thương mại điện tử nào khác muốn làm một cái gì đó mới, sau đó là thời gian để chuyển sang trang web thương mại điện tử của bạn.
Học CSS miễn phí
Heyy… .., đợi một giây bạn không có trang web của bạn? Đừng cảm thấy tồi tệ, tôi ở đây để giúp bạn làm cho bạn học & nbsp; Cách xây dựng một trang web thương mại điện tử & nbsp; vì vậy hãy kết nối với blog cho đến cuối cùng và cuối cùng, bạn có trang web thương mại điện tử của bạn sau đó mua sắm Như bạn muốn.
Trước khi thảo luận về quy trình để làm cho trang web, hãy để Lôi xem xét nó trông như thế nào. Bạn có thể nhìn vào trang web thương mại điện tử tuyệt đẹp của tôi.
Dự án trực tiếp:- Ở đây bạn có thể kiểm tra nó.
Xem Pen Thương mại điện tử của Himanshu Singh [@Him Biếnu] trên Codepen.
Bạn đã thấy bố cục trang web thương mại điện tử đáp ứng của tôi và bạn bắt đầu tưởng tượng trang web của mình.
Các thành phần quan trọng bạn nên có để xây dựng một trang web thương mại điện tử. Sau đây là một số kỹ năng cần thiết để xây dựng trang web này:-.
1. HTML.2. CSS.3. JavaScript [cơ bản].
2. CSS.
3. Javascript[Basics].
HTML cho mã trang web thương mại điện tử phản hồi:-
Giống như hệ thống Skelton [khung/cấu trúc của xương] của cơ thể con người cho cấu trúc/bố cục cho cơ thể con người. Tương tự, mã HTML thực hiện cùng một bố cục của các trang web.
Don Tiết 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 có ba phần chính:- 1.header [thanh điều hướng/menu/logo, v.v.] 2. Phần [nội dung chính]. 3. Chân trang.
1.Header[Navigation bar/menu/logo,etc.]
2.Main section[main content].
3. Footer.
1. Tiêu đề:-
2. Phần:-
3. Footer:-
Mã nguồn cho trang web E Commerce trong HTML và CSSionicon , for any type of icons used in website development you can use it.
Trang web thương mại điện tử mã CSS:-
ShoPperZ
- HOME
- SHOP
- OUR PRODUCTS
- CONTACT US
- ABOUT US
Mã JavaScript cho trang web Thương mại điện tử đáp ứng:-A Responsive website is automatically adjusted for different screen sizes and viewports.]
For Example:-Blogger website is also responsive you can easily use comfortably it on a phone[small screens] and PC[big-sized screens].
Chúng ta có thể tạo trang web thương mại điện tử bằng HTML và CSS không?
Làm cách nào để làm cho trang web thương mại điện tử của tôi đáp ứng?
ShoPperZ
- HOME
- SHOP
- OUR PRODUCTS
- CONTACT US
- ABOUT US
- HOME
- SHOP
- OUR PRODUCTS
- CONTACT US
- ABOUT US
CSS trong E là gì.
2. Phần:-
3. Footer:-
Mã nguồn cho trang web E Commerce trong HTML và CSS
Trang web thương mại điện tử mã CSS:-img tag. In section2 add a container named class inside that add items named classes as many items you want on your website. In every item add item name, item price, item image and item info classes. If you want you can also add one more class for categories.
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
Mã nguồn cho trang web E Commerce trong HTML và CSS
Bây giờ, thời gian để thêm các tệp CSS và JavaScript vào HTML.
Document
ShoPperZ
- HOME
- SHOP
- OUR PRODUCTS
- CONTACT US
- ABOUT US
- HOME
- SHOP
- OUR PRODUCTS
- CONTACT US
- ABOUT US
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.
Trang web thương mại điện tử mã CSS:-
Cấu trúc của bố cục trang web được hoàn thành nhưng nó trông không đẹp mà không có kiểu dáng. Vì bộ xương người một mình có thể trông đẹp mà không cần da. Vì vậy, ở đây công việc của kiểu dáng được thực hiện với sự trợ giúp của & nbsp; CSS.
Các chủ đề được biết đến trước hướng dẫn CSS:-
50+ mã dự án Frontend - Nhấp vào ME & NBSP;
1.Flexbox.2.css Basics [bộ chọn, màu, hộp biên giới, v.v.] .3. ; & nbsp;
2.CSS basics[selectors,color,border-box,etc].
3.pseduo effects[hover, active] and pseudo
elements[before].
4.media queries[responsive] and keyframes[animation].
1. Đầu tiên là phong cách tiêu đề. Sử dụng thuộc tính Flex để sắp xếp mọi mục Flex trong tiêu đề trong một dòng. Sau đó sử dụng cùng một menu tìm kiếm và danh sách tiêu đề là Flexbox. sau đó căn chỉnh chúng theo A & NBSP; Đường ngang bằng cách sử dụng các thuộc tính. 2. Đặt khả năng hiển thị của lớp menu và lớp tiêu đề được ẩn vì nó sẽ xuất hiện khi kích thước của màn hình ít hơn. [Khi chúng tôi đang sử dụng nó trong điện thoại hoặc tab]. 3. Áp dụng các thuộc tính khác và hiệu ứng di chuột [& NBSP; hiệu ứng di chuột hoạt động khi con trỏ đi qua thẻ mà nó được áp dụng] cho các tệp tiêu đề như hiển thị bên dưới. 4. Sử dụng thuộc tính KeyFrame được sử dụng cho hình ảnh động [tôi sử dụng cho thanh trượt hình ảnh]. 5. Áp dụng kiểu dáng trên 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 dáng trên chân trang như hình dưới đây. 7. Cuối cùng, khi trang web của bạn đã sẵn sàng bây giờ, thời gian để làm cho nó phản hồi để nó cũng hoạt động tốt trên các 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 và bên trong nó đề cập đến các thuộc tính bạn muốn xem khi kích thước của màn hình nhỏ. Cuối cùng, kiểm tra trang web của bạn đã sẵn sàng.
then use the same for search menu and heading lists as flexbox. then align them in a horizontal line using properties.
2. set visibility of the menu class and heading class to be hidden because it should appear when the size of the screen is less. [when we are using it
in phones or tab].
3. Apply other properties and hover effects[ HOVER effect works when the cursor goes over the tag on which it is applied] to the header files as shown below.
4. Using the keyframe property which is used for the animation [I use for the image slider].
5. Apply styling on the items/products and their classes [flex and some other properties].
6. Similarly, apply some styling on Footer as shown below.
7. Finally when your webpage is ready now it’s time to
make it responsive so that it also works fine on small screens[phones].
8. Use media queries property to make it responsive and inside it mention the properties you want to see when the size of a screen is small.
finally, check your website is ready.
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: }
Heyyy ……… đợi thêm một giây! 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 của màn hình nhỏ. Bạn không thể mở danh sách menu. Chúng tôi sẽ giải quyết vấn đề này bằng cách sử dụng JavaScript. Vì vậy, hãy để Lừa chuyển sang phần JavaScript.
we will solve this problem using Javascript. So, Let’s move
on to the Javascript portion.
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ó có thể thực hiện bất kỳ chức năng nào]. Vì vậy, đối với hoạt động tốt của trang web, 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. DOM [Mô hình đối tượng tài liệu] Thao tác.2. JavaScript cơ bản.
2. Javascript basics.
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 dưới đây 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 lại quay lại trang đầu tiên như được hiển thị Trong hình đầu tiên.
Ý tưởng bây giờ rõ ràng là thời gian để thực hiện 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 Đóng, Ham và Menu được đặt tên bằng bộ chọn truy vấn.
Sau đó, sử dụng AddEventListener [một hàm cho phép chúng tôi chạy các chức năng khi một số sự kiện nhất định được thực hiện].
Tôi đã chọn sự kiện nhấp chuột cho cả Class Class và Ham Class, vì vậy khi bạn nhấp vào các biểu tượng của Đó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 ĐÓ
Trong khi chúng tôi nhấp vào biểu tượng menu [lớp HAM], nó sẽ đặt khả năng 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ã chạy được viết bên trong lớp menu].
Mã nguồn cho trang web E Commerce trong HTML và CSS😎.
Bây giờ, thời gian để thêm các tệp CSS và JavaScript vào HTML.
Vì vậy, cấu trúc của trang web của chúng tôi đã sẵn sàng.Himanshu Singh.
Trang web thương mại điện tử mã CSS:-
Người mới bắt đầu dễ dàng tạo ra một trang web thương mại điện tử với HTML và CSS.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 một thanh điều hướng, thanh tìm kiếm và các trang có liên quan khác nhau cho trang web của bạn bằng HTML.. The first step is to create the layout of your website using HTML. You can create a navigation bar, search bar, and different relevant pages for your website using HTML.
Làm cách nào để làm cho trang web thương mại điện tử của tôi đáp ứng?
Làm thế nào để tạo ra một thiết kế web đáp ứng cho Thương mại điện tử..
Đặt điểm dừng thích hợp.....
Bắt đầu với một lưới chất lỏng.....
Xem xét sử dụng màn hình cảm ứng.....
Sử dụng hình ảnh đáp ứng.....
Thực hiện kiểu chữ đáp ứng.....
Sử dụng một chủ đề đáp ứng trước.....
Kiểm tra khả năng đáp ứng web ..
CSS trong E là gì
CSS là viết tắt của các bảng phong cách xếp tầng.Đó là ngôn ngữ mã hóa cung cấp cho một trang web giao diện và bố cục của nó.Cùng với HTML, CSS là nền tảng cho thiết kế web.Không có nó, các trang web vẫn sẽ là văn bản đơn giản trên nền trắng.Cascading Style Sheets. It is the coding language that gives a website its look and layout. Along with HTML, CSS is fundamental to web design.
Without it, websites would still be plain text on white backgrounds.
Chủ Đề