<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当当网</title>
<!-- 引入公共CSS文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入首页CSS文件 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入swiper 的 CSS文件 -->
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<!-- 引入公共JS文件 -->
<script src="./js/common.js" defer></script>
<!-- 引入swiper的JS文件 -->
<script src="./js/swiper-bundle.min.js"> </script>
<!-- 引入首页JS文件 -->
<script src="./js/index.js" defer></script>
</head>
<body>
<!-- 广告banner图 -->
<div class="ad-bar wrap">
<a href="#">
<img src="./img/pic (44).jfif" alt="">
</a>
</div>
<!-- 底部广告 -->
<div class="ad-bottom">
<img src="./img/pic (4).gif" alt="">
<a href="javascript:;"></a>
</div>
<!-- 左侧广告 -->
<div class="aside-ad">
<ul>
<li class="clearFix">
<a href="#">
</a>
<span>图书</span>
</li>
<li class="clearFix">
<a href="#">
</a>
<span>服装</span>
</li>
<li class="clearFix">
<a href="#">
</a>
<span>日用百货</span>
</li>
<li class="clearFix">
<a href="#">
</a>
<span>孕婴童</span>
</li>
<li class="clearFix">
<a href="#">
</a>
<span>猜你喜欢</span>
</li>
</ul>
</div>
<!-- 固定侧边栏(上下) -->
<div class="fix-aside">
<div class="top">
<a href="#">
<span>购物车</span>
</a>
<a href="#">
<span>收藏</span>
</a>
<a href="#">
<span>足迹</span>
</a>
<a href="#">
<span>积分</span>
</a>
<a href="#">
<span>小管家</span>
</a>
</div>
<div class="bottom">
<a href="#" >
<span>
<img src="./img/pic (30).jfif" alt="">
</span>
</a>
<a href="#" id="returnTop">
<span>返回顶部</span>
</a>
<a href="#">
意见反馈
</a>
<a href="#">
广告
</a>
</div>
</div>
<!-- 滚动监听搜索栏 -->
<div class="scrollBar">
<div class="wrap">
<img src="./../6980a660-38bd-4629-a74e-c79c7c2db431.hpuWMccm" alt="">
<input type="text">
<button>
<img src="./img/search.jpg" alt="">
</button>
</div>
</div>
<!-- 顶部工具栏 -->
<div class="tools">
<div class="wrap clearFix">
<div class="left">
<a href="#">
送至:北京
</a>
<ul class="clearFix">
<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>
<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>
<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>
<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="right">
<div class="welcome">
欢迎光临当当,请<a href="#" class="login-link">登录</a>成为会员
</div>
<ul>
<li class="shopcar">
<a href="#"><i class="shopcar-icon"></i>购物车 <b class="count-card"> 0</b></a>
</li>
<li>
<a href="#">
我的订单
</a>
</li>
<li>
<a href="#">
我的云书房
</a>
</li>
<li>
<a href="#" class="menu-btn">
没有合适的资源?快使用搜索试试~ 我知道了~
仿当当网PC端demo源码H5C3+JS ,基本还原样式,实现滚动监听,tab切换,倒计时,轮播图、JS动画等效果
共95个文件
jfif:51个
png:27个
gif:5个
需积分: 5 1 下载量 45 浏览量
2023-07-24
13:24:17
上传
评论 1
收藏 3.87MB ZIP 举报
温馨提示
改项目为当当网首页,使用html+css+js实现,布局方面多利用了浮动+定位+flex布局,使用Less编写CSS样式,项目中运用了多个JS效果比如滚动监听、函数封装、点击事件、倒计时、轮播图等等。方便大家在进行项目练习时做一个学习参考,也可以用于期末作业答辩,效果是最新的,项目中标有注释,方便查看源代码,可供学习参考
资源推荐
资源详情
资源评论
收起资源包目录
当当.zip (95个子文件)
js
common.js 1KB
index.js 13KB
swiper-bundle.min.js 140KB
img
pic (35).jfif 24KB
pic (26).png 8KB
pic (25).png 10KB
pic (6).jfif 4KB
pic (6).png 667B
9001320352311051.jpg 47KB
pic (40).jfif 92KB
pic (11).png 21KB
pic (26).jfif 12KB
pic (20).png 4KB
pic (21).png 118KB
pic (50).jfif 107KB
pic (39).jfif 726KB
pic (18).jfif 26KB
pic (16).jfif 9KB
pic (9).jfif 3KB
pic (23).png 6KB
pic (15).png 2KB
pic (37).jfif 9KB
pic (7).png 3KB
pic (45).jfif 125KB
pic (4).gif 178KB
pic (43).jfif 90KB
pic (28).jfif 12KB
pic (33).jfif 14KB
pic (38).jfif 9KB
pic (18).png 3KB
pic (5).gif 957KB
2023063009595166226.jpg 48KB
pic (27).jfif 14KB
pic (2).gif 3KB
pic (36).jfif 34KB
pic (14).png 439B
pic (8).png 2KB
pic (13).jfif 31KB
pic (5).png 2KB
pic (42).jfif 88KB
pic (7).jfif 3KB
pic (8).jfif 2KB
pic (5).jfif 14KB
pic (3).gif 17KB
pic (1).gif 46KB
pic (20).jfif 55KB
pic (2).jfif 17KB
pic (4).jfif 8KB
pic (32).jfif 10KB
pic (22).png 4KB
pic (16).png 4KB
pic (1).ico 1KB
pic (17).jfif 14KB
pic (12).png 6KB
pic (23).jfif 58KB
pic (47).jfif 112KB
search.jpg 3KB
pic (12).jfif 5KB
pic (29).jfif 11KB
pic (10).png 3KB
pic (41).jfif 87KB
close.png 439B
pic (24).png 4KB
pic (19).png 3KB
pic (4).png 4KB
pic (14).jfif 29KB
pic (1).png 19KB
pic (19).jfif 10KB
pic (1).jfif 14KB
pic (2).png 2KB
pic (44).jfif 94KB
pic (9).png 3KB
pic (46).jfif 74KB
pic (48).jfif 164KB
pic (13).png 7KB
pic (31).jfif 10KB
pic (3).jfif 4KB
pic (11).jfif 9KB
pic (51).jfif 184KB
pic (17).png 1KB
pic (24).jfif 23KB
pic (21).jfif 48KB
pic (3).png 6KB
pic (15).jfif 29KB
pic (49).jfif 48KB
pic (34).jfif 10KB
pic (25).jfif 38KB
pic (10).jfif 3KB
pic (30).jfif 38KB
pic (22).jfif 35KB
css
index.less 31KB
common.css 3KB
swiper-bundle.min.css 16KB
index.css 24KB
index.html 136KB
共 95 条
- 1
资源评论
我的头发,在哪里!!
- 粉丝: 34
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- MATLAB 图像处理:自动检测黑白像素比例的多功能代码(支持灰度和二值图像)
- windows平台下终端工具-tabby
- STM32和ucosii系统温度监控系统keil5工程
- HIVE-14706.01.patch
- C# WInForm IrisSkin2皮肤控件
- svn cleanup 失败怎么办
- Spring Boot集成Spring Security,HTTP请求授权配置:包含匿名访问、允许访问、禁止访问配置
- 易语言-画曲线模块及应用例程
- 电子元件行业知名厂商官网(TI/NXP/ST/Infineon/ADI/Microchip/Qualcomm/Diodes/Panasonic/TDK/TE/Vishay/Molex等)数据样例
- Cytoscape-3-10-0-windows-64bit.exe
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功