热门标签
热门文章
- 1三子棋的设计以及设计思路_让三子如何布局
- 2BetterZip v5.3.4 注册码密钥下载_betterzip注册码
- 3ubuntu服务器更换系统python3版本并安装numpy/pandas等计算库_ubantu pthon安装pandas教程
- 4Yearning做SQL审核_yarning alter table
- 5Java线程池ThreadPoolExecutor详解（一篇就够了）
- 6python网络爬虫之爬取静态网页_静态网页爬取数据python代码
- 7RF4463F30半双工模组，伪全双工透传方案（STM32平台）（第一章，环境搭建）
- 8【微信小程序知识点】手机号验证组件_微信小程序手机号快速验证组件
- 9python中的selenium安装的步骤（浏览器自动化测试框架）_python 如何安装selenium
- 10FOLANNIC FD31 UPS工作原理介绍_单相ups电路
当前位置: article > 正文
html5眼镜商城模板源码_眼镜前端模板
作者：IT小白 | 2024-08-21 03:56:11
赞
踩
眼镜前端模板
【博主推荐】：前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到学习网站。
对人工智能感兴趣的，快速入口：人工智能学习教程
作者：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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
源码下载
万套模板，程序开发，在线开发，在线沟通
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
