如何用 HTML、CSS 和 JS 制作电商网站 - 01 视频教程代码 首页 产品页面 搜索页面 404 页面 您可能觉得有用的文章

2025-05-27

如何使用 HTML、CSS 和 JS 创建电子商务网站 - 01

视频教程

代码

主页

产品页面。

搜索页面

404页面

您可能觉得有用的文章

大家好，今天我们将学习如何使用 HTML、CSS 和 JS 创建一个电商网站。这是全栈电商网站的一部分。在本部分中，我们将只创建前端页面的 UI。本教程将创建 4 个页面：主页、产品页面、搜索页面和 404 页面。

如果您想观看演示或完整的编码教程视频以更好地理解，您可以观看下面的教程。

视频教程

如果您能订阅我的 YouTube 频道来支持我，我将不胜感激。

代码

您可以在下面看到我们项目的文件夹结构。

文件夹结构

下载图片，获取源代码

那么让我们开始编码吧。

主页

在 中编写基本的 HTML 5 模板index.html。并将home.css文件链接到index文件。现在，创建导航栏。



<nav class="navbar">
<div class="nav">
    <img src="img/dark-logo.png" class="brand-logo" alt="">
    <div class="nav-items">
        <div class="search">
            <input type="text" class="search-box" placeholder="search brand, product">
            <button class="search-btn">search</button>
        </div>
        <a href="#"><img src="img/user.png" alt=""></a>
        <a href="#"><img src="img/cart.png" alt=""></a>
    </div>
</div>
</nav>
Enter fullscreen mode Exit fullscreen mode

打开home.css文件，然后在里面开始样式设置。因为我们所有页面的导航栏和页脚都一样。我想把它们的样式放在一个单独的文件中。所以nav.js在里面导入文件home.css。



@import 'nav.css';
Enter fullscreen mode Exit fullscreen mode

并在里面做导航栏相关的样式nav.css。

导航.css


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'roboto', sans-serif;
}

.navbar{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: #f5f5f5;
    z-index: 9;
}

.nav{
    padding: 10px 10vw;
    display: flex;
    justify-content: space-between;
}

.brand-logo{
    height: 60px;
}

.nav-items{
    display: flex;
    align-items: center;
}

.search{
    width: 500px;
    display: flex;
}

.search-box{
    width: 80%;
    height: 40px;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid #d1d1d1;
    text-transform: capitalize;
    background: none;
    color: #a9a9a9;
    outline: none;
}

.search-btn{
    width: 20%;
    height: 40px;
    padding: 10px 20px;
    border: none;
    outline: none;
    cursor: pointer;
    background: #383838;
    color: #fff;
    text-transform: capitalize;
    font-size: 15px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.search-box::placeholder{
    color: #a9a9a9;
}

.nav-items a{
    margin-left: 20px;
}

.nav-items a img{
    width: 30px;
}
Enter fullscreen mode Exit fullscreen mode
输出

导航

现在在导航栏下方创建链接。



<ul class="links-container">
    <li class="link-item"><a href="#" class="link">home</a></li>
    <li class="link-item"><a href="#" class="link">women</a></li>
    <li class="link-item"><a href="#" class="link">men</a></li>
    <li class="link-item"><a href="#" class="link">kids</a></li>
    <li class="link-item"><a href="#" class="link">accessories</a></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

上面的代码在navbar元素内部。



.links-container{
    width: 100%;
    display: flex;
    padding: 10px 10vw;
    justify-content: center;
    list-style: none;
    border-top: 1px solid #d1d1d1;
}

.link{
    text-transform: capitalize;
    padding: 0 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #383838;
    opacity: 0.5;
    transition: .5s;
}

.link:hover{
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode
输出

导航-2

太棒了！但是我们想在所有页面都显示导航栏。我不喜欢复制代码。所以，让我们用 JS 动态创建这个导航栏。打开nav.js文件，并createNav在里面创建一个函数。



const createNav = () => {
    let nav = document.querySelector('.navbar');

    nav.innerHTML = `
        <div class="nav">
            <img src="img/dark-logo.png" class="brand-logo" alt="">
            <div class="nav-items">
                <div class="search">
                    <input type="text" class="search-box" placeholder="search brand, product">
                    <button class="search-btn">search</button>
                </div>
                <a href="#"><img src="img/user.png" alt=""></a>
                <a href="#"><img src="img/cart.png" alt=""></a>
            </div>
        </div>
        <ul class="links-container">
            <li class="link-item"><a href="#" class="link">home</a></li>
            <li class="link-item"><a href="#" class="link">women</a></li>
            <li class="link-item"><a href="#" class="link">men</a></li>
            <li class="link-item"><a href="#" class="link">kids</a></li>
            <li class="link-item"><a href="#" class="link">accessories</a></li>
        </ul>
    `;
}

createNav();
Enter fullscreen mode Exit fullscreen mode

如果您看到上面的代码，您会发现在函数内部，我首先nav使用方法选择元素querySelector。然后使用 编写其 HTML。innerHTMLinnerHTML的值与我们在index.html文件中创建的 HTML 元素相同。现在，您可以从那里删除 HTML 元素，然后导入nav.js。



<nav class="navbar"></nav>
<script src="js/nav.js"></script>
Enter fullscreen mode Exit fullscreen mode
输出

导航-2

现在，让我们制作它的标题。



<!-- hero section -->
<header class="hero-section">
    <div class="content">
        <img src="img/light-logo.png" class="logo" alt="">
        <p class="sub-heading">best fashion collection of all time</p>
    </div>
</header>
Enter fullscreen mode Exit fullscreen mode
主页.css


@import 'nav.css';

.hero-section{
    width: 100%;
    height: calc(100vh - 120px);
    background-image: url('../img/header.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-section .logo{
    height: 150px;
    display: block;
    margin: auto;
}

.hero-section .sub-heading{
    margin-top: 10px;
    text-align: center;
    color: #fff;
    text-transform: capitalize;
    font-size: 35px;
    font-weight: 300;
}
Enter fullscreen mode Exit fullscreen mode
输出

标题

现在，我们需要制作产品卡滑块。代码如下。



<section class="product">
    <h2 class="product-category">best selling</h2>
</section>
Enter fullscreen mode Exit fullscreen mode

注意-我们在index.html文件里面。

主页.css


.product{
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.product-category{
    padding: 0 10vw;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 40px;
    text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode
输出

卡片滑块

现在制作产品卡。



// inside product section.
<div class="product-container">
    <div class="product-card">
        <div class="product-image">
            <span class="discount-tag">50% off</span>
            <img src="img/card1.png" class="product-thumb" alt="">
            <button class="card-btn">add to whislist</button>
        </div>
        <div class="product-info">
            <h2 class="product-brand">brand</h2>
            <p class="product-short-des">a short line about the cloth..</p>
            <span class="price">$20</span><span class="actual-price">$40</span>
        </div>
    </div>
    +7 more cards
</div>
Enter fullscreen mode Exit fullscreen mode

我们稍后会用JS和数据库动态制作这些产品卡片。

主页.css


.product-container{
    padding: 0 10vw;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.product-container::-webkit-scrollbar{
    display: none;
}

.product-card{
    flex: 0 0 auto;
    width: 250px;
    height: 450px;
    margin-right: 40px;
}

.product-image{
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.product-thumb{
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.discount-tag{
    position: absolute;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    color: #ff7d7d;
    right: 10px;
    top: 10px;
    text-transform: capitalize;
}

.card-btn{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    width: 90%;
    text-transform: capitalize;
    border: none;
    outline: none;
    background: #fff;
    border-radius: 5px;
    transition: 0.5s;
    cursor: pointer;
    opacity: 0;
}

.product-card:hover .card-btn{
    opacity: 1;
}

.card-btn:hover{
    background: #efefef;
}

.product-info{
    width: 100%;
    height: 100px;
    padding-top: 10px;
}

.product-brand{
    text-transform: uppercase;
}

.product-short-des{
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    opacity: 0.5;
    text-transform: capitalize;
    margin: 5px 0;
}

.price{
    font-weight: 900;
    font-size: 20px;
}

.actual-price{
    margin-left: 20px;
    opacity: 0.5;
    text-decoration: line-through;
}
Enter fullscreen mode Exit fullscreen mode
输出

滑块

现在当然要制作上一个和下一个按钮。



// before product-container element.
<button class="pre-btn"><img src="img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="img/arrow.png" alt=""></button>
Enter fullscreen mode Exit fullscreen mode 


.pre-btn, .nxt-btn{
    border: none;
    width: 10vw;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    cursor: pointer;
    z-index: 8;
}

.pre-btn{
    left: 0;
    transform: rotate(180deg);
}

.nxt-btn{
    right: 0;
}

.pre-btn img, .nxt-btn img{
    opacity: 0.2;
}

.pre-btn:hover img, .nxt-btn:hover img{
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode
输出

滑块 2

现在，让我们让滑块工作起来。打开home.js文件，并编写代码。



const productContainers = [...document.querySelectorAll('.product-container')];
const nxtBtn = [...document.querySelectorAll('.nxt-btn')];
const preBtn = [...document.querySelectorAll('.pre-btn')];

productContainers.forEach((item, i) => {
    let containerDimenstions = item.getBoundingClientRect();
    let containerWidth = containerDimenstions.width;

    nxtBtn[i].addEventListener('click', () => {
        item.scrollLeft += containerWidth;
    })

    preBtn[i].addEventListener('click', () => {
        item.scrollLeft -= containerWidth;
    })
})
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，我只是使用querySelectorAll方法选中了所有产品容器、“下一步”按钮和“上一步”按钮。然后循环遍历每个容器。并为“下一步”按钮和“上一步”按钮添加了点击事件。

导入home.js里面的文件index.html。



<script src="js/home.js"></script>
Enter fullscreen mode Exit fullscreen mode

产品卡片也制作完成了。现在我们来制作收藏部分。



<!-- collections -->
<section class="collection-container">
    <a href="#" class="collection">
        <img src="img/women-collection.png" alt="">
        <p class="collection-title">women <br> apparels</p>
    </a>
    <a href="#" class="collection">
        <img src="img/men-collection.png" alt="">
        <p class="collection-title">men <br> apparels</p>
    </a>
    <a href="#" class="collection">
        <img src="img/accessories-collection.png" alt="">
        <p class="collection-title">accessories</p>
    </a>
</section>
Enter fullscreen mode Exit fullscreen mode 


.collection-container{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.collection{
    position: relative;
}

.collection img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-size: 50px;
    text-transform: capitalize;
}

.collection:nth-child(3){
    grid-column: span 2;
    margin-bottom: 10px;
}
Enter fullscreen mode Exit fullscreen mode
输出

收藏

现在，您可以在产品系列元素后再复制两次产品部分。您还可以更改图片和数据。不用担心，我们将来会使用数据库动态制作卡片。

复制完产品部分后，页面就只剩下页脚了。那就开始制作吧。



<footer>
    <div class="footer-content">
        <img src="img/light-logo.png" class="logo" alt="">
        <div class="footer-ul-container">
            <ul class="category">
                <li class="category-title">men</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
            <ul class="category">
                <li class="category-title">women</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
        </div>
    </div>
</footer>
Enter fullscreen mode Exit fullscreen mode

就像我们对导航栏所做的那样。导入文件footer.css内部home.css。

主页.css


@import 'nav.css';
@import 'footer.css';
Enter fullscreen mode Exit fullscreen mode
页脚.css


footer{
    position: relative;
    width: 100%;
    padding: 40px 10vw;
    padding-bottom: 80px;
    background: #383838;
}

.footer-content{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.footer-content .logo{
    height: 160px;
}

.footer-ul-container{
    width: 45%;
    display: flex;
    justify-content: space-between;
}

.category{
    width: 200px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    list-style: none;
}

.category-title{
    grid-column: span 2;
    text-transform: capitalize;
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}

.category .footer-link{
    text-decoration: none;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.75);
}

.footer-link:hover{
    color: #fff;
}
Enter fullscreen mode Exit fullscreen mode
输出

页脚

在页脚内制作信息元素。



<footer>
    // previous elements
    <p class="footer-title">about company</p>
    <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore ad suscipit, eos eius quisquam sed optio nisi quaerat fugiat ratione et vero maxime praesentium, architecto minima reiciendis iste quo deserunt assumenda alias ducimus. Ullam odit maxime id voluptates rerum tenetur corporis laboriosam! Cum error ipsum laborum tempore in rerum necessitatibus nostrum nobis modi! Debitis adipisci illum nemo aperiam sed, et accusamus ut officiis. Laborum illo exercitationem quo culpa reprehenderit excepturi distinctio tempore cupiditate praesentium nisi ut iusto, assumenda perferendis facilis voluptas autem fuga sunt ab debitis voluptatum harum eum. Asperiores, natus! Est deserunt incidunt quasi placeat omnis, itaque harum?</p>
    <p class="info">support emails - help@clothing.com, customersupport@clothing.com</p>
    <p class="info">telephone - 180 00 00 001, 180 00 00 002</p>
    <div class="footer-social-container">
        <div>
            <a href="#" class="social-link">terms & services</a>
            <a href="#" class="social-link">privacy page</a>
        </div>
        <div>
            <a href="#" class="social-link">instagram</a>
            <a href="#" class="social-link">facebook</a>
            <a href="#" class="social-link">twitter</a>
        </div>
    </div>
    <p class="footer-credit">Clothing, Best apparels online store</p>
</footer>
Enter fullscreen mode Exit fullscreen mode
页脚.css


.footer-title, .info{
    color: rgba(255, 255, 255, 0.75);
    margin: 20px 0;
    text-transform: capitalize;
}

.footer-title{
    margin-top: 80px;
    color: #fff;
}

.footer-social-container{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.social-link{
    color: #fff;
    margin-left: 20px;
    text-transform: capitalize;
}

.social-link:nth-child(1){
    margin-left: 0;
}

.footer-credit{
    width: 100%;
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
}
Enter fullscreen mode Exit fullscreen mode
输出

页脚2

干得好！就像我们之前在导航栏上做的一样。让我们也用 JS 动态地制作一下这个页脚。打开footer.js文件，然后像之前在导航栏上做的那样操作。



const createFooter = () => {
    let footer = document.querySelector('footer');

    footer.innerHTML = `
    <div class="footer-content">
        <img src="img/light-logo.png" class="logo" alt="">
        <div class="footer-ul-container">
            <ul class="category">
                <li class="category-title">men</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
            <ul class="category">
                <li class="category-title">women</li>
                <li><a href="#" class="footer-link">t-shirts</a></li>
                <li><a href="#" class="footer-link">sweatshirts</a></li>
                <li><a href="#" class="footer-link">shirts</a></li>
                <li><a href="#" class="footer-link">jeans</a></li>
                <li><a href="#" class="footer-link">trousers</a></li>
                <li><a href="#" class="footer-link">shoes</a></li>
                <li><a href="#" class="footer-link">casuals</a></li>
                <li><a href="#" class="footer-link">formals</a></li>
                <li><a href="#" class="footer-link">sports</a></li>
                <li><a href="#" class="footer-link">watch</a></li>
            </ul>
        </div>
    </div>
    <p class="footer-title">about company</p>
    <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore ad suscipit, eos eius quisquam sed optio nisi quaerat fugiat ratione et vero maxime praesentium, architecto minima reiciendis iste quo deserunt assumenda alias ducimus. Ullam odit maxime id voluptates rerum tenetur corporis laboriosam! Cum error ipsum laborum tempore in rerum necessitatibus nostrum nobis modi! Debitis adipisci illum nemo aperiam sed, et accusamus ut officiis. Laborum illo exercitationem quo culpa reprehenderit excepturi distinctio tempore cupiditate praesentium nisi ut iusto, assumenda perferendis facilis voluptas autem fuga sunt ab debitis voluptatum harum eum. Asperiores, natus! Est deserunt incidunt quasi placeat omnis, itaque harum?</p>
    <p class="info">support emails - help@clothing.com, customersupport@clothing.com</p>
    <p class="info">telephone - 180 00 00 001, 180 00 00 002</p>
    <div class="footer-social-container">
        <div>
            <a href="#" class="social-link">terms & services</a>
            <a href="#" class="social-link">privacy page</a>
        </div>
        <div>
            <a href="#" class="social-link">instagram</a>
            <a href="#" class="social-link">facebook</a>
            <a href="#" class="social-link">twitter</a>
        </div>
    </div>
    <p class="footer-credit">Clothing, Best apparels online store</p>
    `;
}

createFooter();
Enter fullscreen mode Exit fullscreen mode

现在，您可以从索引文件中删除页脚元素。然后导入该footer.js文件。

索引.html


<footer></footer>

<script src="js/footer.js"></script>
Enter fullscreen mode Exit fullscreen mode
输出

页脚2

太棒了！主页设计完成了。现在，我们来创建产品页面。

产品页面。

在产品页面中，编写 HTML 5 模板，以及链接home.css和product.css文件。



<head>
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/product.css">
</head>
Enter fullscreen mode Exit fullscreen mode

并导入这些JS文件。



<script src="js/nav.js"></script>
<script src="js/footer.js"></script>
<script src="js/home.js"></script>
<script src="js/product.js"></script>
Enter fullscreen mode Exit fullscreen mode

现在您只需在里面添加元素即可制作导航栏nav和footer页脚body。



<nav class="navbar"></nav>
<footer></footer>
Enter fullscreen mode Exit fullscreen mode
输出

捕获

是不是很简单？你也可以把产品容器元素从首页复制到这里。复制卡片后，我们来制作产品详情部分。之后再制作navbar。



<section class="product-details">
    <div class="image-slider">
        <div class="product-images">
            <img src="img/product image 1.png" class="active" alt="">
            <img src="img/product image 2.png" alt="">
            <img src="img/product image 3.png" alt="">
            <img src="img/product image 4.png" alt="">
        </div>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode
产品.css


.product-details{
    width: 100%;
    padding: 60px 10vw;
    display: flex;
    justify-content: space-between;
}

.image-slider{
    width: 500px;
    height: 500px;
    position: relative;
    background-image: url('../img/product\ image\ 1.png');
    background-size: cover;
}

.product-images{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: #fff;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100px;
    grid-gap: 10px;
    padding: 10px;
}

.product-images img{
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
}

.product-images img.active{
    opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode
输出

图像滑块

立即制作详细信息部分。



<section>
   // image slider
   <div class="details">
        <h2 class="product-brand">calvin klein</h2>
        <p class="product-short-des">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
        <span class="product-price">$99</span>
        <span class="product-actual-price">$200</span>
        <span class="product-discount">( 50% off )</span>

        <p class="product-sub-heading">select size</p>

        <input type="radio" name="size" value="s" checked hidden id="s-size">
        <label for="s-size" class="size-radio-btn check">s</label>
        <input type="radio" name="size" value="m" hidden id="m-size">
        <label for="m-size" class="size-radio-btn">m</label>
        <input type="radio" name="size" value="l" hidden id="l-size">
        <label for="l-size" class="size-radio-btn">l</label>
        <input type="radio" name="size" value="xl" hidden id="xl-size">
        <label for="xl-size" class="size-radio-btn">xl</label>
        <input type="radio" name="size" value="xxl" hidden id="xxl-size">
        <label for="xxl-size" class="size-radio-btn">xxl</label>

        <button class="btn cart-btn">add to cart</button>
        <button class="btn">add to wishlist</button>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode 


.details{
    width: 50%;
}

.details .product-brand{
    text-transform: capitalize;
    font-size: 30px;
}

.details .product-short-des{
    font-size: 25px;
    line-height: 30px;
    height: auto;
    margin: 15px 0 30px;
}

.product-price{
    font-weight: 700;
    font-size: 30px;
}

.product-actual-price{
    font-size: 30px;
    opacity: 0.5;
    text-decoration: line-through;
    margin: 0 20px;
    font-weight: 300;
}

.product-discount{
    color: #ff7d7d;
    font-size: 20px;
}

.product-sub-heading{
    font-size: 30px;
    text-transform: uppercase;
    margin: 60px 0 10px;
    font-weight: 300;
}

.size-radio-btn{
    display: inline-block;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #383838;
    border-radius: 50%;
    margin: 10px;
    margin-left: 0;
    line-height: 80px;
    text-transform: uppercase;
    color: #383838;
    cursor: pointer;
}

.size-radio-btn.check{
    background: #383838;
    color: #fff;
}

.btn{
    width: 48%;
    padding: 20px;
    border-radius: 5px;
    background: none;
    border: 1px solid #383838;
    color: #383838;
    font-size: 20px;
    cursor: pointer;
    margin: 20px 0;
    text-transform: capitalize;
}

.cart-btn{
    margin-right: 2%;
    background: #383838;
    color: #fff;
}
Enter fullscreen mode Exit fullscreen mode
输出

细节

现在我们只需要制作一个简单的部分。一个详细描述部分。制作在外面product-details



<section class="detail-des">
    <h2 class="heading">description</h2>
    <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, ......</p>
</section>
Enter fullscreen mode Exit fullscreen mode 


.detail-des{
    padding: 0 10vw;
    text-transform: capitalize;
}

.heading{
    font-size: 30px;
    margin-bottom: 30px;
}

.des{
    color: #383838;
    line-height: 25px;
}
Enter fullscreen mode Exit fullscreen mode
输出

细节

现在让图像滑块可以正常工作，并且尺寸按钮可以切换。打开product.js文件。



const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element

let activeImageSlide = 0; // default slider image

productImages.forEach((item, i) => { // loopinh through each image thumb
    item.addEventListener('click', () => { // adding click event to each image thumbnail
        productImages[activeImageSlide].classList.remove('active'); // removing active class from current image thumb
        item.classList.add('active'); // adding active class to the current or clicked image thumb
        productImageSlide.style.backgroundImage = `url('${item.src}')`; // setting up image slider's background image
        activeImageSlide = i; // updating the image slider variable to track current thumb
    })
})
Enter fullscreen mode Exit fullscreen mode

然后编写代码。



// toggle size buttons

const sizeBtns = document.querySelectorAll('.size-radio-btn'); // selecting size buttons
let checkedBtn = 0; // current selected button

sizeBtns.forEach((item, i) => { // looping through each button
    item.addEventListener('click', () => { // adding click event to each 
        sizeBtns[checkedBtn].classList.remove('check'); // removing check class from the current button
        item.classList.add('check'); // adding check class to clicked button
        checkedBtn = i; // upading the variable
    })
})
Enter fullscreen mode Exit fullscreen mode

太棒了！产品页面也完成了。现在我们要制作搜索页面，很简单。

搜索页面

就像我们在产品页面中制作导航栏和页脚一样，也对此页面执行相同的操作。将这些文件链接到此页面。



<head>
   <link rel="stylesheet" href="css/home.css">
   <link rel="stylesheet" href="css/search.css">
</head>
<body>
    <nav class="navbar"></nav>
    <footer></footer>

    <script src="js/nav.js"></script>
    <script src="js/footer.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

现在制作产品卡片。首先制作标题。




<section class="search-results">

    <h2 class="heading">search results for <span>product</span></h2>

</section>
Enter fullscreen mode Exit fullscreen mode



搜索.css




.search-results{

    width: 100%;

    padding: 60px 0;

}



.heading{

    font-size: 20px;

    text-transform: capitalize;

    font-weight: 400;

    margin-bottom: 40px;

    padding: 0 10vw;

}



.heading span{

    font-weight: 700;

}
Enter fullscreen mode Exit fullscreen mode



输出

标题
对于卡片，我们将使用为主页制作的相同卡片。只需product-container从主页复制元素并将其粘贴到里面即可search-results。

但是我们使用了弹性框，这会导致卡片并排排列。但我们不希望在搜索页面中出现这种情况。所以只需覆盖product-containerelements 属性即可。

产品.css



.product-container{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    height: auto;

    grid-row-gap: 40px;

}
Enter fullscreen mode Exit fullscreen mode



输出

网格

现在，我们快完成了。我们唯一需要创建的页面是 404 页面。

404页面

对此页面也执行相同的操作以创建导航栏。我没有为此页面创建页脚，但如果您愿意，也可以创建。创建导航栏后。链接404.css文件。然后我们来编写页面代码。




<img src="img/404.png" class="four-0-four-image" alt="">

<p class="four-0-four-msg">look like you are lost. Head to beack to our <a href="#">homepage</a></p>
Enter fullscreen mode Exit fullscreen mode



页脚.css




.four-0-four-image{

    display: block;

    margin: 60px auto;

}



.four-0-four-msg{

    text-align: center;

    text-transform: capitalize;

    color: #383838;

}



.four-0-four-msg a{

    color: #383838;

}
Enter fullscreen mode Exit fullscreen mode



输出

404

今天就到这里。干得好！我知道内容有点多。但电商网站没那么简单。如果你不想错过本系列的下一篇，别忘了在 YouTube 和 dev.to 上关注我。

希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区告诉我。

您可能觉得有用的文章

  1. 最佳 CSS 效果
  2. 无限 CSS 加载器
  3. Disney+ 克隆版
  4. Youtube API - Youtube 克隆
  5. TMDB - Netflix 克隆

如果您能订阅我的YouTube频道，我将不胜感激。我创作了非常棒的网络内容。

源代码，通过 Paypal 捐赠给我

您的捐赠真的激励我创作更多类似的精彩教程。请在Patreon上支持我，请我喝杯咖啡，或在 PayPal 上捐款。

感谢您的阅读。

文章来源：https://dev.to/themodernweb/how-to-make-an-e-commerce-website-with-html-css-and-js-3aon
Devto 翻译
PREV
CSS 媒体查询：如何让网站响应式？什么是响应式网站？媒体查询语法
NEXT
如何使用 HTML、CSS 和 JS 创建电子商务网站第 2 部分视频教程代码 NPM Init 服务器注册页面