首页 前端知识 html5眼镜商城模板源码

html5眼镜商城模板源码

2024-09-09 00:09:36 前端知识 前端哥 122 839 我要收藏

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 主界面弹框
    • 1.3 眼镜列表
    • 1.4 商品列表
    • 1.5 商品列表
    • 1.6 商城推广
    • 1.7 页面底部
  • 2.效果和源码
    • 2.1 源代码
  • 源码下载
  • 万套模板,程序开发,在线开发,在线沟通

         【博主推荐】:前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到学习网站。

         对人工智能感兴趣的,快速入口:人工智能学习教程

在这里插入图片描述


作者:xcLeigh
文章地址:https://blog.csdn.net/weixin_43151418/article/details/141124569


html5眼镜商城模板源码,眼镜商城网站,购物网站,列表,导航,购物车,轮播图,商品展示,滚动,等功能点,各种风格都有,代码上手简单,代码独立,可以直接使用。也可直接预览效果。

1.设计来源

1.1 主界面

在这里插入图片描述

1.2 主界面弹框

在这里插入图片描述

1.3 眼镜列表

在这里插入图片描述

1.4 商品列表

在这里插入图片描述

在这里插入图片描述

1.5 商品列表

在这里插入图片描述

1.6 商城推广

在这里插入图片描述

1.7 页面底部

在这里插入图片描述

2.效果和源码

2.1 源代码

    这里是主界面的代码,其他图片、js、css等代码,见下面的 源码下载 ,里面有所有代码资源和相关说明。

<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <title>眼镜商城模板源码</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
</head>

<body>
  <div class="loder"></div>
  <div class="wrapper">
    <div id="subscribe-me" class="modal animated fade in" role="dialog" data-keyboard="true" tabindex="-1">
      <div class="newsletter-popup">
        <img class="offer" src="images/newsbg.jpg" alt="offer">
        <div class="newsletter-popup-static newsletter-popup-top">
          <div class="popup-text">
            <div class="popup-title">50% <span>半价</span></div>
            <div class="popup-desc">
              <div>注册并获得50%的折扣,您的下一个订单</div>
            </div>
          </div>
          <form onsubmit="return  validatpopupemail();" method="post">
            <div class="form-group required">
              <input type="email" name="email-popup" id="email-popup" placeholder="请输入您的邮箱" class="form-control input-lg" required />
              <button type="submit" class="btn btn-default btn-lg" id="email-popup-submit">订阅</button>
              <label class="checkme">
                <input type="checkbox" value="" id="checkme" />别再出现了</label>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- =====  HEADER START  ===== -->
    <header id="header">
      <div class="header-top">
        <div class="container">
          <div class="row">
            <div class="col-sm-6">
              <ul class="header-top-left">
                <li class="language dropdown"> <span class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">  English <span class="caret"></span> </span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="https://www.captainbed.cn/xcs/"> English</a></li>
                    <li><a href="https://www.captainbed.cn/xcs/"> French</a></li>
                    <li><a href="https://www.captainbed.cn/xcs/"> German</a></li>
                  </ul>
                </li>
                <li class="currency dropdown"> <span class="dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button"> USD <span class="caret"></span> </span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu12">
                    <li><a href="https://www.captainbed.cn/xcs/">USD</a></li>
                    <li><a href="https://www.captainbed.cn/xcs/">EUR</a></li>
                    <li><a href="https://www.captainbed.cn/xcs/">AUD</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="col-sm-6">
              <ul class="header-top-right text-right">
                <li class="account"><a href="https://www.captainbed.cn/xcs/">我的账号</a></li>
                <li class="sitemap"><a href="https://www.captainbed.cn/xcs/">网站地图</a></li>
                <li class="cart"><a href="https://www.captainbed.cn/xcs/">我的购物车</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="header">
        <div class="container">
          <nav class="navbar">
            <div class="navbar-header mtb_20"> <a class="navbar-brand" href="index.html"> <img alt="Coolsd" src="images/logo.png"> </a> </div>
            <div class="header-right pull-right mtb_50">
              <button class="navbar-toggle pull-left" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="i-bar"><i class="fa fa-bars"></i></span></button>
              <div class="shopping-icon">
                <div class="cart-item " data-target="#cart-dropdown" data-toggle="collapse" aria-expanded="true" role="button">购物车 : <span class="cart-qty">02</span></div>
                <div id="cart-dropdown" class="cart-menu collapse">
                  <ul>
                    <li>
                      <table class="table table-striped">
                        <tbody>
                          <tr>
                            <td class="text-center"><a href="https://www.captainbed.cn/xcs/"><img src="images/product/70x84.jpg" alt="iPod Classic" title="iPod Classic"></a></td>
                            <td class="text-left product-name"><a href="https://www.captainbed.cn/xcs/">MacBook Pro</a>
                              <span class="text-left price">¥20.00</span>
                              <input class="cart-qty" name="product_quantity" min="1" value="1" type="number">
                            </td>
                            <td class="text-center"><a class="close-cart"><i class="fa fa-times-circle"></i></a></td>
                          </tr>
                          <tr>
                            <td class="text-center"><a href="https://www.captainbed.cn/xcs/"><img src="images/product/70x84.jpg" alt="iPod Classic" title="iPod Classic"></a></td>
                            <td class="text-left product-name"><a href="https://www.captainbed.cn/xcs/">MacBook Pro</a>
                              <span class="text-left price">¥20.00</span>
                              <input class="cart-qty" name="product_quantity" min="1" value="1" type="number">
                            </td>
                            <td class="text-center"><a class="close-cart"><i class="fa fa-times-circle"></i></a></td>
                          </tr>
                        </tbody>
                      </table>
                    </li>
                    <li>
                      <table class="table">
                        <tbody>
                          <tr>
                            <td class="text-right"><strong>价钱</strong></td>
                            <td class="text-right">¥2,100.00</td>
                          </tr>
                          <tr>
                            <td class="text-right"><strong>优惠 (-2.00)</strong></td>
                            <td class="text-right">¥2.00</td>
                          </tr>
                          <tr>
                            <td class="text-right"><strong>增值税 (20%)</strong></td>
                            <td class="text-right">¥20.00</td>
                          </tr>
                          <tr>
                            <td class="text-right"><strong>总计</strong></td>
                            <td class="text-right">¥2,122.00</td>
                          </tr>
                        </tbody>
                      </table>
                    </li>
                    <li>
                      <form action="#">
                        <input class="btn pull-left mt_10" value="查看购物车" type="submit">
                      </form>
                      <form action="#">
                        <input class="btn pull-right mt_10" value="结算" type="submit">
                      </form>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="main-search pull-right">
                <div class="search-overlay">
                  <!-- Close Icon -->
                  <a href="javascript:void(0)" class="search-overlay-close"></a>
                  <!-- End Close Icon -->
                  <div class="container">
                    <!-- Search Form -->
                    <form role="search" id="searchform" action="search" method="get">
                      <label class="h5 normal search-input-label">输入搜索整个商店的关键字</label>
                      <input value="" name="q" placeholder="在这里搜索…" type="search">
                      <button type="submit"></button>
                    </form>
                    <!-- End Search Form -->
                  </div>
                </div>
                <div class="header-search"> <a id="search-overlay-btn"></a> </div>
              </div>
            </div>
            <div class="collapse navbar-collapse js-navbar-collapse pull-right">
              <ul id="menu" class="nav navbar-nav">
                <li> <a href="index.html">眼镜商城</a></li>
                <li> <a href="https://www.captainbed.cn/xcs/">购物</a></li>
                <li> <a href="https://www.captainbed.cn/xcs/">博客</a></li>
                <li class="dropdown mega-dropdown"> <a href="https://www.captainbed.cn/xcs/" class="dropdown-toggle" data-toggle="dropdown">商城集合 </a>
                  <ul class="dropdown-menu mega-dropdown-menu row">
                    <li class="col-md-3">
                      <ul>
                        <li class="dropdown-header">女性的</li>
                        <li><a href="https://www.captainbed.cn/xcs/">独特的功能</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">图像响应</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">自动旋转木马</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">简报的形式</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Four columns</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Four columns</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Good Typography</a></li>
                      </ul>
                    </li>
                    <li class="col-md-3">
                      <ul>
                        <li class="dropdown-header">男人的</li>
                        <li><a href="https://www.captainbed.cn/xcs/">独特的功能</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">图像响应</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">自动旋转木马</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">简报的形式</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Newsletter Form</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Four columns</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Good Typography</a></li>
                      </ul>
                    </li>
                    <li class="col-md-3">
                      <ul>
                        <li class="dropdown-header">孩子们的</li>
                        <li><a href="https://www.captainbed.cn/xcs/">独特的功能</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">图像响应</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">自动旋转木马</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">简报的形式</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Newsletter Form</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Four columns</a></li>
                        <li><a href="https://www.captainbed.cn/xcs/">Good Typography</a></li>
                      </ul>
                    </li>
                    <li class="col-md-3">
                      <ul>
                        <li id="myCarousel" class="carousel slide" data-ride="carousel">
                          <div class="carousel-inner">
                            <div class="item active"> <a href="https://www.captainbed.cn/xcs/"><img src="images/menu-banner1.jpg" class="img-responsive" alt="Banner1"></a></div>
                            <!-- End Item -->
                            <div class="item"> <a href="https://www.captainbed.cn/xcs/"><img src="images/menu-banner2.jpg" class="img-responsive" alt="Banner1"></a></div>
                            <!-- End Item -->
                            <div class="item"> <a href="https://www.captainbed.cn/xcs/"><img src="images/menu-banner3.jpg" class="img-responsive" alt="Banner1"></a></div>
                            <!-- End Item -->
                          </div>
                          <!-- End Carousel Inner -->
                        </li>
                        <!-- /.carousel -->
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="dropdown"> <a href="https://www.captainbed.cn/xcs/" class="dropdown-toggle" data-toggle="dropdown">更多功能 </a>
                  <ul class="dropdown-menu">
                    <li> <a href="https://www.captainbed.cn/xcs/">联系我们</a></li>
                    <li> <a href="https://www.captainbed.cn/xcs/">购物车</a></li>
                    <li> <a href="https://www.captainbed.cn/xcs/">结算</a></li>
                    <li> <a href="https://www.captainbed.cn/xcs/">商品详细页面</a></li>
                    <li> <a href="https://www.captainbed.cn/xcs/">单一帖子</a></li>
                  </ul>
                </li>
                <li> <a href="https://www.captainbed.cn/xcs/">关于我们</a></li>
              </ul>
            </div>
            <!-- /.nav-collapse -->
          </nav>
        </div>
      </div>
    </header>
  <script src="js/jquery.firstVisitPopup.js"></script>
  <script src="js/custom.js"></script>
</body>

</html>


源码下载

html5眼镜商城模板源码(源码) 点击下载
在这里插入图片描述

万套模板,程序开发,在线开发,在线沟通

  • 专业后端大佬在线沟通需求开发
  • 专业前端大佬在线沟通需求开发
  • 专业网站整套大佬在线沟通需求开发
  • 专业毕业设计大佬在线沟通需求开发
  • 专业大作业大佬在线沟通需求开发
  • 【优惠活动】专属定制,程序在线开发

--------------- 业精于勤,荒于嬉 ---------------
 

请添加图片描述

--------------- 行成于思,毁于随 ---------------

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA,体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请


     ① 🉑提供云服务部署(有自己的阿里云);
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务;
     如🈶合作请联系我,期待您的联系。
    :本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。


     亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请 留言(评论),博主看见后一定及时给您答复,💌💌💌


原文地址:https://blog.csdn.net/weixin_43151418/article/details/141124569(防止抄袭,原文地址不可删除)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18021.html
标签
评论
发布的文章

JSON简介

2024-09-30 23:09:25

Node.js和npm的安装及配置

2024-09-30 23:09:02

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!