项目实战：深铭易购官网首页（第一阶段）

于 2024-09-09 12:13:06 发布
阅读量721 收藏 4
点赞数 28
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71805303/article/details/141603802
版权

目录

第一阶段效果展示：

页面头部需要js实现的功能：

1.页面导航栏的附着与tab栏的切换：

js源码：

2.轮播图（使用插件swiper）：

js源码：

HTML源代码：

CSS源代码：

全部源码及图片资源，在文章顶部自取下载！

 

第一阶段效果展示：

fc9723a40c394356b059ee4fd89ad128.png

cb82d5e6fc4e4eec95e8dc632fc49765.png

页面头部需要js实现的功能：

1.页面导航栏的附着与tab栏的切换：

6681e974bbd04ca38e24ff0841a3fdc0.png

js源码：

// 页面头部附着
const header = document.querySelector('header');

window.addEventListener('scroll', function () {
    let n = this.document.documentElement.scrollTop;
    if (n >= 200) {
        header.style.position = "sticky";
        header.style.top = "-10px";
    } else {
        header.style.position = "relative";
        header.style.top = "0px";
    }

})

// 点击上传文件
const fileBtn = document.querySelector('#fileBtn');
const fileUp = document.querySelector('#fileUp');
fileBtn.addEventListener('click', function () {
    fileUp.click()
})


// tab栏切换
const tab = document.querySelectorAll('.tab span');
const content = document.querySelectorAll('.tab-content');

for (let i = 0; i < tab.length; i++) {
    tab[i].index = i;
    tab[i].addEventListener('click', function () {
        filterFn();
        tab[this.index].classList.add('tab-active');
        content[this.index].classList.add('content-active');
    })
}

function filterFn() {
    for (let i = 0; i < tab.length; i++) {
        tab[i].classList.remove('tab-active');
        content[i].classList.remove('content-active');
    }
}

 

2.轮播图（使用插件swiper）：

js源码：

var swiper = new Swiper(".mySwiper", {
    cssMode: true,
    loop: true,
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        pauseOnMouseEnter: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    mousewheel: true,
    keyboard: true,

});

 

HTML源代码：

  <!-- 页面顶部模块 -->
    <div class="page-top">
        <div class="top-content w-1200">
            <div class="top-left">
                <span>您好，欢迎来到深铭易购！ </span>&nbsp;
                请登录 |<a href="#"> 免费注册</a>
            </div>
            <div class="top-right">
                <a href="#"><span class="iconfont icon-dingdandingdanmingxishouzhimingxi"> </span>我的订单</a>|
                <a href="#"><span class="iconfont icon-BOM"> </span>BOM配单</a>|
                <a href="#"><span class="iconfont icon-qq01"> </span>深铭易购-客服</a>
            </div>
        </div>
    </div>

    <!-- 页面头部模块 -->
    <header>
        <div class="page-head w-1200">
            <div class="logo"></div>
            <div class="inp">
                <input type="text" placeholder="请输入型号，品牌，参数信息...">
                <p><b>热门搜索:</b>
                    <a href="#">STM32F103RCT6</a>
                    <a href="#">STM8S003F3P6</a>
                    <a href="#">0402WGF1603TCE</a>
                    <a href="#">N76E003AT20</a>
                    <span>新人专享</span>
                </p>
            </div>
            <div class="buyCar"><span class="iconfont icon-gouwuche"> </span> 我的购物车</div>
        </div>
    </header>

    <!-- 导航栏模块 -->
    <nav>
        <div class="nav w-1200">
            <div><span class="iconfont icon-catalog"></span><span style="font-size: 17px;">产品分类</span></div>
            <ul>
                <li style="color: #2e8fff;">首页</li>
                <li>商品目录</li>
                <li>优质货源</li>
                <li>行业资讯</li>
                <li>优惠券</li>
                <li>供应商入驻</li>
                <li>样品申请</li>
                <li>BOM配单</li>
            </ul>
        </div>
    </nav>
    <!-- 主体模块 -->
    <div class="main w-1200">
        <div class="main-left">
            <ul>
                <li><span class="iconfont icon-dianziyuanqijian"> </span> <a href="#"> 电阻/电容/电感</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-a-faguangerjiguan_led-diode1"> </span> <a href="#"> 二极管/三极管</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-transistor"> </span> <a href="#"> 晶体管/IGBT</a>
                    <div class="nav-box">
                        <h4>电阻></h4>

                        <a href="#">电位器直插排阻</a>|
                        <a href="#">热敏电阻</a>|
                        <a href="#">保险电阻</a>|
                        <a href="#">可调电阻</a>|
                        <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-wangluojiekou"> </span> <a href="#"> 开关/电路/继电器</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-yinpinchuliqi"> </span> <a href="#"> 微处理器/微控制器</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-bianyaqi"> </span> <a href="#"> 电源管理/变压器</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-jiaoliulvboqi"> </span> <a href="#"> 晶振/连接器/滤波器</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-wuxiandianbo"> </span> <a href="#"> 扬声器/蜂鸣器/咪头</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-xinpian"> </span> <a href="#"> LED发光管/光耦/红外</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-chuanganqi"> </span> <a href="#"> 传感器/保险丝/磁珠</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-xiancailei"> </span> <a href="#"> 线材/射频/无线电</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-qudongqi"> </span> <a href="#"> 放大器/驱动器/辅材</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-jichengdianlufengce"> </span> <a href="#"> IC/集成电路/芯片</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-weixiu"> </span> <a href="#"> 开发工具/电子模块</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>
                <li><span class="iconfont icon-dianlu"> </span> <a href="#"> 存储器/电子元器件</a>
                    <div class="nav-box">
                        <h4>电阻></h4>
                        <p>
                            <a href="#">贴片电阻</a>|
                            <a href="#">碳膜电阻</a>|
                            <a href="#">金属膜电阻</a>|
                            <a href="#">压敏电阻</a>|
                            <a href="#">NTC热敏电阻</a>|
                        <p>
                            <a href="#">电位器直插排阻</a>|
                            <a href="#">热敏电阻</a>|
                            <a href="#">保险电阻</a>|
                            <a href="#">可调电阻</a>|
                            <a href="#">光敏电阻</a>|
                        </p>
                        <p>
                            <a href="#">可调电阻</a>|
                            <a href="#">器水泥电阻</a>|
                            <a href="#">绕线电阻</a>|
                            <a href="#">高压电阻</a>|
                        </p>
                        </p>
                        <h4>电容></h4>
                        <p>
                            <a href="#">高压电容</a>|
                            <a href="#">钽电容</a>|
                            <a href="#">独石电容</a>|
                            <a href="#">瓷片电容</a>|
                            <a href="#">电解电容</a>|
                        <p>

                            <a href="#">安规电容</a>|

                            <a href="#">电解电容器</a>|
                            <a href="#">CBB电容</a>|
                            <a href="#">校正电容</a>|
                            <a href="#">陶瓷电容</a>|

                        </p>
                        <p>
                            <a href="#">固态电容</a>|
                            <a href="#">铝电解电容器</a>|
                            <a href="#">陶瓷电容器</a>|
                            <a href="#">超级电容器</a>|
                        </p>
                        </p>
                        <h4>电感></h4>
                        <p>
                            <a href="#">贴片电感</a>|
                            <a href="#">高频电感</a>|
                            <a href="#">绕线电感</a>|
                            <a href="#">色环电感</a>|
                            <a href="#">工字电感</a>|
                        </p>
                    </div>
                    <i></i>
                </li>

                <a href="#">查看全部分类</a>


            </ul>
        </div>
        <div class="main-center">
            <div class="center-top">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./images/bg-1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/bg-2.png" alt=""></div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="center-bottom">
                <h3>智能BOM配单</h3>
                <div class="box-left">
                    <div class="top">
                        BOM智能配单
                        <p>智能配单,极速体验</p>
                    </div>
                    <div class="bottom">
                        BOM智能配单
                        <p>智能配单,极速体验</p>
                    </div>

                </div>
                <div class="box-right">
                    <input type="file" name="" id="fileUp" style="display: none;">
                    <button id="fileBtn">上传BOM</button>
                    <p>将文件 <span>拖拽至此区域</span> 或 <span>点击上传</span> 支持xls/xlsx格式文件,文件不超过2M</p>

                </div>
            </div>
        </div>
        <div class="main-right">
            <div class="user-head">
                <img src="./images/head_pic.jpg" alt="" style="width: 64px; border-radius: 50%;">
                <span>&nbsp;Hi,欢迎来到深铭易购!</span>
            </div>
            <div class="user-login">
                <button class="register">注册</button>
                <button>登录</button>
            </div>
            <div class="tab">
                <span class="tab-active">行业资讯</span>
                <span>商城公告</span>
            </div>
            <div class="tab-content content-active">
                <ul>
                    <li>利润暴跌85%！英特尔裁员1.75万人</li>
                    <li>106亿元！LG显示广州LCD厂将优先售华星光电</li>
                    <li>三星晶圆代工挑战台积电 第二代3纳米量产</li>
                    <li>三星Q2财报：存储芯片需求强劲，利润暴涨1458.2%</li>
                    <li>三星HBM3e芯片今年量产，营收将增长至60%</li>
                    <li>美光量产G9 NAND技术SSD已出货</li>
                    <a href="#">查看更多 ></a>
                </ul>
            </div>
            <div class="tab-content ">
                <ul>
                    <li>2024年端午节放假通知</li>
                    <li>2024年五一劳动节放假通知</li>
                    <li>2024年清明节放假通知</li>
                    <li>开工大吉 | “芯”启程</li>
                    <li>恭贺新春 | 深铭易购全体员工给您拜年啦！</li>
                    <li>喜迎新春 | 2024年春节放假通知</li>
                    <a href="#">查看更多 ></a>
                </ul>
            </div>
            <div class="go">
                <div class="go-box1">
                    <p>供应商入驻</p>
                    <span>GO</span>
                </div>
                <div class="go-box2">
                    <p>供应商入驻</p>
                    <span>GO</span>
                </div>
            </div>
        </div>
    </div>

CSS源代码：

html {
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;

}


body {
    background-color: #f5f5f5;
}

a {
    text-decoration: none;
    color: #333;
}

.iconfont {
    color: #2e8fff;
}

/* 版心 */
.w-1200 {
    width: 1200px;
    margin: auto;
}

/* 顶部模块样式 */
.page-top {
    width: 100%;
    height: 50px;
    background-color: #f4f4f4;
    font-size: 12px;

}

.top-content {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left a:hover {
    color: #2e8fff;
}

.top-right a {
    margin: 0px 15px;
}

.top-right a:hover {
    color: #2e8fff;
}

/* 页面头部模块样式 */
header {
    position: relative;
    top: 0px;
    width: 100%;
    background-color: white;
    z-index: 999;
}

.page-head {
    padding-top: 30px;

    height: 140px;
    display: flex;
    justify-content: space-around;
}

.page-head .logo {
    width: 480px;
    height: 80px;
    background: url(../images/logo_cn.png) no-repeat;
}

.page-head .inp {
    position: relative;
    width: 550px;
    height: 120px;
}

.page-head .inp input {
    width: 400px;
    height: 40px;
    border: none;
    outline: none;
    border: 1px solid blue;
    padding-left: 10px;
    margin-top: 10px;
    border-radius: 5px;
}

.page-head .inp:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 114px;
    width: 40px;
    height: 40px;
    background: url(../images/icon_sousuo.png)no-repeat -4px 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

}

.page-head .inp p {

    margin-top: 10px;
    font-size: 14px;
}

.page-head .inp p a {
    margin: 0px 3px;
    font-size: 12px;
}

.page-head .inp p a:hover {
    color: #2e8fff;
}

.page-head .inp p span {
    color: red;
    cursor: pointer;
}

.page-head .inp p span:hover {
    color: #2e8fff;
}

.page-head .buyCar {
    position: relative;
    width: 140px;
    height: 40px;
    border: 1px solid #2e8fff;
    padding: 10px;
    text-align: center;
    color: #2e8fff;
    border-radius: 5px;
    margin-top: 10px;
}

.page-head .buyCar::after {
    content: "8";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 15px;
    height: 15px;
    background-color: red;
    font-size: 12px;
    color: white;
    border-radius: 50%;
    padding: 2px;
    line-height: 15px;

}

/* 导航模块样式 */
nav {
    width: 100%;
    background-color: white;
}

.nav {
    position: relative;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding-right: 70px;
    line-height: 50px;
}

.nav>div {
    width: 240px;
    background-color: #2e8fff;
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 13px;
}


.nav>div span {
    color: white;
    font-size: 20px;
    line-height: 50px;
    margin-right: 5px;
}

.nav li {
    float: left;
    margin: 0px 20px;
    font-weight: 800;
    font-size: 18px;
}

.nav ul::after {
    content: "";
    width: 30px;
    height: 20px;
    background-color: pink;
    position: absolute;
    top: 0;
    left: 536px;
    background: url(../images/green-new1.png)no-repeat;

}

.nav ul::before {
    content: "";
    width: 30px;
    height: 20px;
    background-color: pink;
    position: absolute;
    top: 0;
    right: 65px;
    background: url(../images/new.png)no-repeat;

}


.nav li:hover {
    color: #2e8fff;
    cursor: pointer;
}

/* 主体模块样式 */
.main {
    height: 576px;
    display: flex;
}

.main-left {
    width: 240px;
    background-color: white;

}

.main-left ul>a {
    display: inline-block;
    height: 30px;
    font-size: 12px;
    color: #888;
    margin: 15px 75px;
}

.main-left ul>a:hover {
    text-decoration: underline;

}

.main-left li {
    position: relative;
    width: 100%;
    height: 35px;
    background-size: 12px;
    padding: 0px 15px;
    line-height: 35px;
    cursor: pointer;
    font-size: 14px;
}

.main-left li:hover i {
    transform: translateX(30px);
}


.main-left>ul i {
    display: inline-block;
    position: absolute;
    top: 13px;
    right: 10px;
    width: 12px;
    height: 12px;
    transition: all .3s;
    background: url(../images/classify-right.png)no-repeat;
    background-size: cover;
}

.main-left li .nav-box {
    position: absolute;
    top: -5px;
    left: 240px;
    width: 500px;
    background-color: white;
    display: none;
    padding: 10px;
    font-size: 12px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .3);
    z-index: 9;
}

.main-left li .nav-box h4 {
    color: #2e8fff;
    padding-top: 10px;
    border-bottom: 1px solid #ccc;
}

.main-left li .nav-box a {
    margin: 15px;
}

.main-left li:hover {
    background-color: #e6f6ff;
    color: #2e8fff;
}

.main-left a:hover {
    color: #2e8fff;
}

.main-left a {
    margin-left: 10px;
}

.main-left li:hover .nav-box {
    display: block;
}

.main-center {
    width: 720px;
    padding: 10px;

}

.center-top {
    position: relative;
    height: 356px;
    overflow: hidden;
    border-radius: 5px;
}

.swiper {
    position: absolute;
    top: 0;
    left: -395px;
    height: 356px;
    width: 1500px;
    z-index: -1;
}

.swiper-css-mode>.swiper-wrapper {
    overflow: hidden !important;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-next {
    right: 410px !important;
    /* 右侧按钮向右移动 */
}

.swiper-button-prev {
    left: 410px !important;
    /* 左侧按钮向左移动 */
}

.center-top img {
    height: 100%;
}

.center-bottom {
    padding: 15px;
    height: 200px;
    border-radius: 5px;
    margin-top: 10px;
    background-color: white;
}

.center-bottom h3 {
    padding: 0px 15px;
    border-left: 4px solid #2e8fff;
    margin-bottom: 10px;
}

.center-bottom .box-left {
    position: relative;
    padding: 10px 0px 0px 70px;
    float: left;
    width: 200px;
    height: 145px;
}

.center-bottom .box-left .top {
    margin-bottom: 20px;
}

.center-bottom .box-left .top::before {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: 65px;
    left: 20px;
    background: url(../images/bom_pay.png)no-repeat;
}

.center-bottom .box-left .bottom::before {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: 8px;
    left: 20px;
    background: url(../images/bom.png)no-repeat;
}

.box-left p {
    font-size: 12px;
    color: #666;
}

.center-bottom .box-right {
    cursor: pointer;
    float: left;
    width: 465px;
    height: 120px;
    border: 1px dashed #ccc;
    padding: 40px;
    font-size: 12px;
    background-color: #fafafc;
    border-radius: 3px;
}

.center-bottom .box-right:hover {
    border: 1px dashed #2e8fff;
}

.center-bottom .box-right button {
    border: none;
    margin: 0px 0px 15px 150px;
    background-color: #2e8fff;
    padding: 10px 20px;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}

.center-bottom .box-right span {
    color: #f79119;
}

.main-right {
    margin-top: 10px;
    width: 240px;
    height: 100%;
    background: url(../images/banner-right-grid.jpg)no-repeat;
    background-size: 279px;
    border-radius: 5px;
    padding: 10px;

}

.user-head {
    margin-top: 30px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.user-login {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.user-login button {
    width: 85px;
    height: 30px;
    background-color: #2e8fff;
    border: 1px solid #2e8fff;
    color: white;
    border-radius: 5px;
}

.user-login .register {
    position: relative;
    background-color: white;
    color: #2e8fff;
}

.user-login .register::after {
    content: "有惊喜";
    position: absolute;
    top: -10px;
    right: 0;
    background-color: red;
    color: white;
    font-size: 12px;
    padding: 0px 5px;
    border-radius: 3px;
}

.tab {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.tab span {
    padding: 10px 25px;
    font-size: 14px;
}

.tab-active {
    border-bottom: 3px solid #2e8fff;
    color: #2e8fff;

}

.tab-content {
    display: none;
}

.tab-content li {
    cursor: pointer;
    position: relative;
    font-size: 12px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 0px 10px 20px;
}

.tab-content li:hover {
    color: #2e8fff;
}

.content-active {
    display: block;
}

.tab-content li::after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #2e8fff;
    border-radius: 5px;
    position: absolute;
    top: 16px;
    left: 7px;
}

.tab-content a {
    color: #888;
    font-size: 12px;
    margin-left: 150px;
}

.tab-content a:hover {
    color: #2e8fff;
}

.go-box1,
.go-box2 {
    width: 225px;
    height: 70px;
    background-color: gold;
    padding: 10px;
    background: url(../images/consign_bg.png)no-repeat;
    margin: 7px;
    cursor: pointer;
}

.go-box2 {
    background: url(../images/sample_bg.png)no-repeat;
}

.go-box1 span,
.go-box2 span {
    padding: 0px 10px;
    background-color: #ffa500;
    border-radius: 70px;
    font-size: 12px;
    color: white;

}

.go-box2 span {
    background-color: #2e8fff;
}

全部源码及图片资源，在文章顶部自取下载！

 

星河路漫漫
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星河路漫漫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值