Здравствуйте, Coder! В этой статье мы собираемся создать Веб-сайт электронной коммерции, используя HTML, CSS и JavaScript с кодом. Это простой веб-сайт электронной коммерции, на котором есть слайдер продукта с изображениями, раздел продукта с карточкой продукта и все необходимые функции, которые есть на веб-сайтах электронной коммерции.
веб-сайт электронной коммерции с использованием html, css и javascript[/caption]
Уважаемые программисты! Давайте рассмотрим, как создать исходный код веб-сайта электронной коммерции с помощью HTML, CSS и JavaScript. Мы используем код HTML для создания основы веб-сайта электронной коммерции и код CSS для его оформления. Каждый код подробно обсуждается. Затем мы используем определенные функции веб-сайта электронной коммерции, и для этого мы пишем код JavaScript.
Пришло время перейти на ваш сайт электронной коммерции, если вы устали от покупок на Amazon, Flipkart или любом другом сайте электронной коммерции и хотите попробовать что-то другое.
Эй….., подождите секунду, у вас нет своего веб-сайта? Не расстраивайтесь, я здесь, чтобы помочь вам узнать, как создать веб-сайт электронной коммерции, так что оставайтесь на связи с блогом до конца, в конце у вас есть веб-сайт электронной коммерции, а затем делайте покупки, чтобы вы хотите.
Давайте посмотрим на внешний вид веб-сайта, прежде чем переходить к процессу его создания. Вы можете просмотреть мой элегантный интернет-магазин.
После просмотра моего плана адаптивного веб-сайта электронной коммерции у вас, вероятно, уже есть идея для собственного веб-сайта.
Используемый язык кодирования Название языка кодирования 1 HTML 2 CSS 3 JAVASCRIPT
Код веб-сайта электронной торговли
Следующие навыки необходимы для создания этой веб-страницы. Это основные компоненты, которыми вы должны обладать для создания веб-сайта электронной коммерции:
1. HTML.
2. CSS.
3. Javascript (основы).
Html-код для веб-сайта интернет-магазинов: -
Система Скелтона (каркас/структура костей) человеческого тела дает структуру/макет человеческого тела. Точно так же HTML-код делает то же самое, что и макет веб-сайтов.
Не волнуйтесь, вам не нужны никакие биологические знания для этого сайта.
Каждая веб-страница состоит из трех основных разделов: -
1. Заголовок (панель навигации/меню/логотип и т. д.)
2. Основной раздел (основное содержание).
3. Нижний колонтитул.
1. Заголовок: -
Ниже приведено изображение панели навигации, которая содержит название бренда/логотип, панель поиска и пункты меню, все это находится под заголовком.
1. В шапке сперва сделал три дива. Один для логотипа, второй для строки поиска и третий для списков меню.
Во втором классе я использовал значок поиска, который я импортировал через ionicon, для любого типа значка, используемого при разработке веб-сайта, вы можете использовать его.
Вход — это тег, используемый для многих целей, таких как флажки, радио, ввод электронной почты, дата, время и другие. Но здесь мы используем панель поиска, поэтому тип текста. Дополнительные идеи вы можете найти в других наших блогах.
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="search">
<a href=""
><input type="text" placeholder="search products" id="input" />
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
</header>
Поскольку наш веб-сайт должен быть адаптивным (адаптивный веб-сайт автоматически настраивается для разных размеров экрана и видовых экранов.)
Например: веб-сайт Blogger также отзывчив, вы можете легко использовать его на телефоне (маленькие экраны) и ПК (экраны большого размера).
Поэтому, когда мы используем веб-сайт, возникает проблема, заключающаяся в том, что он не может отображать все списки меню на панели навигации. Наконец, мы решили сделать список меню, управляемый кнопками. Поэтому, когда вы нажимаете на значок меню, он открывается в списке меню, который вы можете увидеть на следующем изображении.
Вы видели, как решит проблему, но теперь пришло время кодировать. Добавьте класс меню, в котором значок закрытия вы можете увидеть на изображении выше, а также добавьте значок меню в класс heading1.
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href=""><ion-icon name="close" class="close"></ion-icon></a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">
<a href=""
><input type="text" placeholder="search products" id="input" />
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1"><ion-icon name="menu" class="ham"></ion-icon></div>
</header>
Теперь раздел заголовка закончен. Давайте перейдем к основному разделу.
2. Раздел: -
Часть раздела, которая в основном содержит контент веб-сайта, делится на две части:
section1, который содержит слайдер изображений, содержит изображения. Раздел 2, который содержит класс контейнера, содержит разные элементы.
Используйте тег изображения, чтобы добавить различные изображения в слайдер изображений. Добавьте контейнер с именем «класс» внутри Раздела 2, чтобы он вставлял элементы с именем «классы» на ваш веб-сайт столько раз, сколько вам нужно. Добавьте имя элемента, цену элемента, изображение элемента и классы данных элемента для каждого элемента. Вы также можете добавить еще одну категорию, если хотите.
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img
src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
</div>
</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">SHOES</div>
<div class="price">$5</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur.
</div>
</div>
<div class="items">
<div class="img img2">
<img
src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">$6.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3">
<img
src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280"
alt=""
/>
</div>
<div class="name">JEANS</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">WATCH</div>
<div class="price">$9.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">SMART PHONE</div>
<div class="price">$20</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">TELEVISION</div>
<div class="price">$18</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">HOODIES</div>
<div class="price">$6.7</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070"
alt=""
/>
</div>
<div class="name">DINNER SET</div>
<div class="price">$10</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">BLANKETS</div>
<div class="price">$9.9</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur adipisicing.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">LAPTOP</div>
<div class="price">$99</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519"
alt=""
/>
</div>
<div class="name">MICROWAVE</div>
<div class="price">$30</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id177395430"
alt=""
/>
</div>
<div class="name">COFFEE MAKER</div>
<div class="price">$29.7</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">BED</div>
<div class="price">$100</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905"
alt=""
/>
</div>
<div class="name">AIR CONDITIONER</div>
<div class="price">$78</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">BOOK</div>
<div class="price">$9</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">BAG</div>
<div class="price">$36.5</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530"
alt=""
/>
</div>
<div class="name">SAREES</div>
<div class="price">$25.6</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">WASHING MACHINE</div>
<div class="price">$56</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
</div>
</div>
</div>
</div>
</section>
Раздел завершен.
Обозначение: Эй, вы все еще задаетесь вопросом, почему мы присвоили этому тегу имя класса? Правильный ответ заключается в том, что это поможет вам в его стилизации. Если вы хотите использовать один и тот же стиль для нескольких тегов, ответ будет отрицательным. В этом случае вам потребуется задать стиль для каждого тега отдельно.
Простое присвоение каждому тегу одного и того же имени приведет к тому, что все теги с таким именем будут стилизованы, когда стиль применяется к одному классу.
3. Нижний колонтитул: -
Нижний колонтитул — последний раздел сайта. В котором добавить некоторые детали. Нижний колонтитул вышеуказанного веб-сайта показан ниже на картинке.
Теперь, как мы собираемся это реализовать??
Надеюсь, приведенная выше картинка поможет вам понять, как это реализовать. Во-первых, разделите нижний колонтитул на 4 основных класса, а именно: нижний колонтитул0, нижний колонтитул1, нижний колонтитул2 и нижний колонтитул3.
Теперь пришло время реализовать его код.
Внутри класса footer1 добавьте один класс для значков социальных сетей, а затем внутри добавьте их значки.
Точно так же добавьте дополнительные классы в footer2 и footer3, как показано ниже в коде.
<footer>
<div class="footer0"><h1>ShoPperZ</h1></div>
<div class="footer1">
Connect with us at
<div class="social-media">
<a href="#"> <ion-icon name="logo-facebook"></ion-icon> </a>
<a href="#"> <ion-icon name="logo-linkedin"></ion-icon> </a>
<a href="#"> <ion-icon name="logo-youtube"></ion-icon> </a>
<a href="#"> <ion-icon name="logo-instagram"></ion-icon> </a>
<a href="#"> <ion-icon name="logo-twitter"></ion-icon> </a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>
</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">
Copyright ©
<h4>ShoPperZ</h4>
2021-2028
</div>
</footer>
← — — Теперь HTML-код заканчивается — →
Исходный код веб-сайта электронной коммерции
Теперь пришло время добавить файлы CSS и JAVASCRIPT в HTML. Поскольку я использую внешний файл для CSS и JAVASCRIPT, я связал его в коде 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" />
<title>Document</title>
<link rel="stylesheet" href="./ecommerce.css" />
<link
href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href=""><ion-icon name="close" class="close"></ion-icon></a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">
<a href=""
><input
type="text"
placeholder="search products"
id="input"
/>
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img
src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
</div>
</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">SHOES</div>
<div class="price">$5</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur.
</div>
</div>
<div class="items">
<div class="img img2">
<img
src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">$6.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3">
<img
src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280"
alt=""
/>
</div>
<div class="name">JEANS</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">WATCH</div>
<div class="price">$9.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">SMART PHONE</div>
<div class="price">$20</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">TELEVISION</div>
<div class="price">$18</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">HOODIES</div>
<div class="price">$6.7</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070"
alt=""
/>
</div>
<div class="name">DINNER SET</div>
<div class="price">$10</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">BLANKETS</div>
<div class="price">$9.9</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur
adipisicing.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">LAPTOP</div>
<div class="price">$99</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519"
alt=""
/>
</div>
<div class="name">MICROWAVE</div>
<div class="price">$30</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id177395430"
alt=""
/>
</div>
<div class="name">COFFEE MAKER</div>
<div class="price">$29.7</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt=""
/>
</div>
<div class="name">BED</div>
<div class="price">$100</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905"
alt=""
/>
</div>
<div class="name">AIR CONDITIONER</div>
<div class="price">$78</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">BOOK</div>
<div class="price">$9</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">BAG</div>
<div class="price">$36.5</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530"
alt=""
/>
</div>
<div class="name">SAREES</div>
<div class="price">$25.6</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
<div class="items">
<div class="img img1">
<img
src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt=""
/>
</div>
<div class="name">WASHING MACHINE</div>
<div class="price">$56</div>
<div class="info">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="footer0"><h1>ShoPperZ</h1></div>
<div class="footer1">
Connect with us at
<div class="social-media">
<a href="#"> <ion-icon name="logo-facebook"></ion-icon> </a>
<a href="#"> <ion-icon name="logo-linkedin"></ion-icon> </a>
<a href="#"> <ion-icon name="logo-youtube"></ion-icon> </a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="#"> <ion-icon name="logo-twitter"></ion-icon> </a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>
</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">
Copyright ©
<h4>ShoPperZ</h4>
2021-2028
</div>
</footer>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src="./ecommerce.js"></script>
</body>
</html>
Итак, структура нашего сайта готова.
Код CSS для веб-сайта интернет-магазинов: -
Структура макета сайта завершена, но без стилизации выглядит не очень хорошо. Скелет человека сам по себе не может хорошо выглядеть без кожи. Итак, здесь работа по стилизации выполняется с помощью CSS.
Темы, которые необходимо знать перед учебником по CSS:
1. Flexbox.
2.Основы CSS (селекторы, цвет, рамка и т. д.).
3.pseduo эффекты (наведение, активация) и псевдоэлементы (до).
4.медиа-запросы (отзывчивые) и ключевые кадры (анимация).
1. Сначала настройте заголовок. Используйте свойство Flex для выравнивания каждого гибкого элемента в заголовке в строке.
затем используйте то же самое для меню поиска и списков заголовков, что и flexbox. затем выровняйте их по горизонтали с помощью свойств.
2. установите видимость класса меню и класса заголовка, чтобы они были скрыты, потому что они должны появляться, когда размер экрана меньше. (когда мы используем его на телефонах или планшетах).
3. Примените другие свойства и эффекты наведения (эффект HOVER работает, когда курсор проходит над тегом, к которому он применяется) к файлам заголовков, как показано ниже.
4. Используя свойство ключевого кадра, которое используется для анимации (Я использую его для слайдера изображений).
5. Примените стили к элементам/продуктам и их классам (flex и некоторые другие свойства).
6. Аналогичным образом примените стили к нижнему колонтитулу, как показано на рисунке. ниже.
7. Наконец, когда ваша веб-страница готова, пришло время сделать ее адаптивной, чтобы она также нормально работала на небольших экранах (телефонах).
8. Используйте свойство медиа-запросов, чтобы сделать ее адаптивной, и внутри нее укажите свойства, которые вы хотите видеть, когда размер экрана мал.
наконец, проверьте, готов ли ваш веб-сайт.
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:
}
Эй……… подожди еще секунду! вы сказали, что ваш сайт не работает должным образом, когда размер экрана мал. Вы не можете открыть список меню.
мы решим эту проблему с помощью Javascript. Итак, давайте перейдем к части Javascript.
Код JavaScript для веб-сайта электронной коммерции: -
Веб-сайт, имеющий только структуру и стиль, подобен спящему человеку (он не может выполнять никаких функций). Поэтому для нормального функционирования сайта мы используем Javascript.
Темы, которые вы должны знать перед внедрением кода javascript: -
1. Управление DOM (объектной моделью документа).
2. Основы JavaScript.
Итак, во-первых, мы хотим, чтобы при нажатии на значок меню, показанный на первом изображении ниже, список меню открывался, как показано на следующем рисунке, а когда мы нажимаем значок закрытия, мы снова возвращаемся на первую страницу, как показано. на первом рисунке.
Веб-сайт электронной коммерции с использованием HTML, Css и Javascript[/caption]
Веб-сайт электронной коммерции с использованием HTML, Css и Javascript[/caption]
Идея ясна, теперь пришло время реализовать ее в коде.
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: })
Сначала я выбрал классы close, ham и menu с помощью селектора запросов.
затем используйте addEventListener (функция, которая позволяет нам запускать функции при выполнении определенных событий).
Я выбрал событие щелчка как для класса закрытия, так и для класса ветчины, поэтому, когда вы нажимаете на значки закрытия и меню, он выполняет код, написанный внутри этой функции, которая должна работать.
Когда мы щелкаем значок закрытия, видимость класса меню становится скрытой (это делает код, написанный внутри класса меню, скрытым, что означает, что они больше не будут выполняться).
Когда мы нажимаем на значок меню (класс ветчины), он устанавливает видимость списка меню как видимую (так что теперь мы можем видеть работающий фрагмент кода, написанный внутри класса меню).
← — — — -Наконец-то завершен простой и отзывчивый веб-сайт электронной коммерции с использованием HTML, CSS и основ Javascript — — — — -›
Я надеюсь, вам понравился ваш код Веб-сайт электронной коммерции. Подождите, вы все еще не внедрили его? Так почему же вы ждете, идите и внедрите его сейчас и наслаждайтесь покупками.
Если вы столкнулись с какими-либо трудностями, не стесняйтесь комментировать свои проблемы, и если вам это действительно понравилось, пожалуйста, покажите свою любовь в разделе комментариев, это действительно мотивирует блоггера предоставлять больше такого контента.
Вы можете подписаться на меня в Instagram.
Автор Химаншу Сингх.
Часто задаваемые вопросы о веб-сайте электронной коммерции
Это только внешний код сайта электронной коммерции?
Да, это только внешний код, а не внутренний код, написанный для этого проекта веб-сайта электронной коммерции.
Какой редактор кода вы используете для этого проекта веб-сайта электронной коммерции?
Я лично рекомендую использовать VS Code Studio. это очень просто и легко использовать
Спасибо, что посетили!!!
