<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>珠海商城</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/mall.css">
</head>
<body>
<!-- 顶部导航条 -->
<div class="nav">
<ul>
<li class="nav-pull-down location"><img src="img/icon_location.png"> 珠海</li>
<li><a href="#">手机商城</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="help.html">客户服务</a></li>
<li><a href="#">企业采购</a></li>
<li><a href="#">商城会员</a></li>
<li class="nav-pull-down my-shop"><a href="#">我的商城</a> <span class="glyphicon glyphicon-menu-down"></span></li>
<li class="login-signup">你好,请<a href="login.html">登录 </a><span class="text-color-red"><a href="signup.html">免费注册</a></span></li>
</ul>
</div>
<!-- 内容主题 -->
<div class="container">
<!-- 搜索框 -->
<div class="search">
<div class="search-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="输入你想要的商品">
<span class="input-group-btn">
<a href="search.html"><button class="btn btn-danger btn-search" type="button"><i class="fa fa-search"></i></button></a>
</span>
</div>
<div class="search-keyword">
<p>买2免1 领500神券 199减100 服装 ups电源 虎牌 母婴5折抢 取暖器 手机</p>
</div>
</div>
</div>
<!-- 横向导航 -->
<div class="nav-item">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">金融</a></li>
</ul>
</div>
<div class="nav-body">
<!-- 侧边导航 -->
<div class="nav-side">
<ul>
<li><span class="nav-side-item">家用电器</span></li>
<li><span class="nav-side-item">手机</span> / <span class="nav-side-item">运营商</span> / <span class="nav-side-item">数码</span></li>
<li><span class="nav-side-item">电脑</span> / <span class="nav-side-item">办公</span></li>
<li><span class="nav-side-item">家居</span> / <span class="nav-side-item">家具</span> / <span class="nav-side-item">家装</span> / <span class="nav-side-item">厨具</span></li>
<li><span class="nav-side-item">男装</span> / <span class="nav-side-item">女装</span> / <span class="nav-side-item">童装</span> / <span class="nav-side-item">内衣</span></li>
<li><span class="nav-side-item">美妆个护</span> / <span class="nav-side-item">宠物</span></li>
<li><span class="nav-side-item">女鞋</span> / <span class="nav-side-item">箱包</span> / <span class="nav-side-item">钟表</span> / <span class="nav-side-item">珠宝</span></li>
<li><span class="nav-side-item">男鞋</span> / <span class="nav-side-item">运动</span> / <span class="nav-side-item">户外</span></li>
<li><span class="nav-side-item">汽车</span> / <span class="nav-side-item">汽车用品</span></li>
<li><span class="nav-side-item">母婴</span> / <span class="nav-side-item">玩具乐器</span></li>
<li><span class="nav-side-item">食品</span> / <span class="nav-side-item">酒类</span> / <span class="nav-side-item">生鲜</span> / <span class="nav-side-item">特产</span></li>
<li><span class="nav-side-item">礼品鲜花</span> / <span class="nav-side-item">农资绿植</span></li>
<li><span class="nav-side-item">医药保健</span> / <span class="nav-side-item">计生情趣</span></li>
<li><span class="nav-side-item">图书</span> / <span class="nav-side-item">音像</span> / <span class="nav-side-item">电子书</span></li>
</ul>
</div>
<div class="nav-content">
<!-- 幻灯片 -->
<div class="slide">
<img class="carousel_img" src="img/1.jpg" name="1">
<img class="carousel_img" src="img/2.jpg" name="2">
<img class="carousel_img" src="img/3.jpg" name="3">
<img class="carousel_img" src="img/4.jpg" name="4">
<img class="carousel_img" src="img/5.jpg" name="5">
<div class="icon">
<i name="1" class="fa fa-circle"></i>
<i name="2" class="fa fa-circle"></i>
<i name="3" class="fa fa-circle"></i>
<i name="4" class="fa fa-circle"></i>
<i name="5" class="fa fa-circle"></i>
</div>
<div class="prev prevNext" onclick="PrevNextClick(1)"> <span class="glyphicon glyphicon-menu-left"></span> </div>
<div class="next prevNext" onclick="PrevNextClick(2)"> <span class="glyphicon glyphicon-menu-right"></span> </div>
</div>
<div class="nav-show">
<div class="nav-show-img"><img src="img/nav_showimg1.jpg"></div>
<div class="nav-show-img"><img src="img/nav_showimg2.jpg"></div>
</div>
</div>
</div>
<!-- 商品显示区域 -->
<div class="content">
<!-- 秒杀 -->
<div class="seckill">
<!-- 头部 -->
<div class="seckill-head">
<div class="seckill-icon">
<img src="img/clock.png">
</div>
<div class="seckill-text">
<span class="seckill-title">限时秒杀</span>
<span class="seckill-remarks">总有你想不到的低价</span>
</div>
<div class="count-down">
<span class="count-down-text">当前场次</span>
<span class="count-down-num count-down-hour">00</span>
<span class="count-down-point">:</span>
<span class="count-down-num count-down-minute">56</span>
<span class="count-down-point">:</span>
<span class="count-down-num count-down-seconds">00</span>
<span class="count-down-text">后结束抢购</span>
</div>
</div>
<!-- 内容 -->
<div class="seckill-content">
<div class="seckill-item">
<div class="seckill-item-img">
<img src="img/seckill-item1.jpg">
</div>
<div class="seckill-item-info">
<p>【赠小风扇】维他 柠檬茶250ml*32盒 礼品装 整箱</p>
<p><i class="fa fa-rmb text-danger"></i><span class="seckill-price text-danger">71.9</span><i class="fa fa-rmb"></i><span class="seckill-old-price"></span><s>89.6</s></p>
</div>
</div>
<div class="seckill-item">
<div class="seckill-item-img">
<img src="img/seckill-item2.jpg">
</div>
<div class="seckill-item-info">
<p>Kindle Paperwhite 全新升级版6英寸护眼非反光电子墨水</p>
<p><i class="fa fa-rmb text-danger"></i><span class="seckill-price text-danger">989.0</span><i class="fa fa-rmb"></i><span class="seckill-old-price"></span><s>1299.0</s></p>
</div>
</div>
<div class="seckill-item">
<div class="seckill-item-img">
<img src="img/seckill-item3.jpg">
</div>
<div class="seckill-item-info">
<p>粮悦 大吃兄糯米锅巴 安徽特产锅巴糯米原味400g*2盒</p>
<p><i class="fa fa-rmb text-danger"></i><span class="seckill-price text-danger">21.8</span><i class="fa fa-rmb"></i><span class="seckill-old-price"></span><s>49.0</s></p>
</div>
</div>
<div class="seckill-item">
<div class="seckill-item-img">
<img src="img/seckill-item4.jpg">
</div>
<div class="seckill-item-info">
<p>【京东超市】清风(APP)抽纸 原木纯品金装系列 3层</p>
<p><i class="fa fa-rmb text-danger"></i><span class="seckill-price text-danger">49.9</span><i class="fa fa-rmb"></i><span class="seckill-old-price"></span><s>109.0</s></p>
</div>
</div>
<div class="seckill-item">
<div class="seckill-item-img">
<img src="img/seckill-item1.jpg">
</div>
<div class="seckill-item-info">
<p>NIKE耐克 男子�
没有合适的资源?快使用搜索试试~ 我知道了~
html+css+js网页制作 自定义电商10个页面
共135个文件
jpg:88个
html:10个
css:8个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 164 浏览量
2024-08-13
16:09:04
上传
评论
收藏 50.47MB ZIP 举报
温馨提示
预览地址:https://blog.csdn.net/qq_42431718/article/details/141166710 html+css+js网页制作 自定义电商10个页面
资源推荐
资源详情
资源评论
收起资源包目录
html+css+js网页制作 自定义电商10个页面 (135个子文件)
bootstrap.css 143KB
bootstrap.min.css 118KB
font-awesome-ie7.min.css 46KB
mall.css 29KB
font-awesome.css 26KB
bootstrap-theme.css 26KB
bootstrap-theme.min.css 23KB
font-awesome.min.css 21KB
.DS_Store 6KB
fontawesome-webfont.eot 55KB
glyphicons-halflings-regular.eot 20KB
index-big.gif 27.3MB
index.gif 13.65MB
all.gif 5.35MB
index.html 33KB
search.html 25KB
item_detail.html 22KB
help.html 13KB
car.html 13KB
feedback.html 7KB
pay.html 7KB
success.html 7KB
signup.html 3KB
login.html 2KB
big.jpg 739KB
8.jpg 234KB
4.jpg 219KB
5.jpg 206KB
small.jpg 179KB
1.jpg 165KB
3.jpg 139KB
1.jpg 126KB
item-detail-3.jpg 116KB
3.jpg 104KB
6.jpg 102KB
7.jpg 90KB
2.jpg 89KB
item-detail-2.jpg 89KB
2.jpg 83KB
5.jpg 77KB
item-detail-1.jpg 71KB
4.jpg 62KB
item-show-1.jpg 58KB
item-detail-4.jpg 39KB
item-as-img-1.jpg 34KB
item-show-8.jpg 32KB
2.jpg 32KB
item-eat-2-6.jpg 29KB
item-computer-2-7.jpg 23KB
item-show-2.jpg 23KB
item-show-4.jpg 23KB
4.jpg 22KB
1.jpg 21KB
item-eat-2-1.jpg 20KB
item-show-3.jpg 20KB
item-show-6.jpg 19KB
seckill-item1.jpg 18KB
item-eat-1-1.jpg 18KB
5.jpg 17KB
8.jpg 17KB
seckill-item3.jpg 17KB
seckill-item4.jpg 16KB
2.jpg 14KB
nav_showimg1.jpg 14KB
6.jpg 14KB
item-show-5.jpg 13KB
7.jpg 13KB
item-computer-1.jpg 11KB
item-eat-1-8.jpg 11KB
item-show-7.jpg 11KB
item-eat-1-7.jpg 11KB
item-computer-2-1.jpg 11KB
4.jpg 10KB
item-eat-1-6.jpg 10KB
3.jpg 10KB
1.jpg 10KB
3.jpg 9KB
seckill-item5.jpg 9KB
item-eat-2-8.jpg 8KB
item-computer-2-6.jpg 8KB
nav_showimg2.jpg 8KB
item-eat-2-7.jpg 8KB
item-computer-1-6.jpg 8KB
item-eat-1-2.jpg 8KB
item-computer-1-8.jpg 7KB
item-computer-1-7.jpg 7KB
item-computer-2-8.jpg 7KB
item-as-img-2.jpg 7KB
item-eat-1-3.jpg 6KB
5.jpg 5KB
item-computer-2-3.jpg 5KB
item-eat-2-2.jpg 5KB
item-eat-1-4.jpg 5KB
6.jpg 5KB
item-computer-1-4.jpg 5KB
seckill-item2.jpg 4KB
item-computer-2.jpg 4KB
item-computer-2-4.jpg 4KB
item-eat-1-5.jpg 4KB
item-computer-2-5.jpg 4KB
共 135 条
- 1
- 2
资源评论
html+css+js网页设计
- 粉丝: 1611
- 资源: 484
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功