文章目录
- 1.设计来源
-
- [1.1 主界面](#1.1 主界面)
- [1.2 主界面弹框](#1.2 主界面弹框)
- [1.3 眼镜列表](#1.3 眼镜列表)
- [1.4 商品列表](#1.4 商品列表)
- [1.5 商品列表](#1.5 商品列表)
- [1.6 商城推广](#1.6 商城推广)
- [1.7 页面底部](#1.7 页面底部)
- 2.效果和源码
-
- [2.1 源代码](#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>
源码下载
万套模板，程序开发，在线开发，在线沟通
--------------- 业精于勤，荒于嬉 ---------------
--------------- 行成于思，毁于随 ---------------
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署 （有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/141124569（防止抄袭，原文地址不可删除）