1. 项目搭建
- 1.1 在项目开始之前，先做好准备工作，创建这样的文件目录，git和vscode直接忽略。
- - 1.1.1 css文件夹
  - 1.1.2 images文件
  - 1.1.3 js文件
  - 1.1.4 uploads
  - 1.1.5 favicon
- 1.2 HTML结构
- - 1.2.1 头部引入文件
  - 1.2.2 主体结构
  - 1.2.3 index.html代码示例：
- 1.3 css样式
- - 1.3.1 页面初始化（base)样式
  - 1.3.2 公共样式（common)样式
  - 1.3.3 首页样式（index)样式
- 1.4 原生javascript
- - 1.4.1 index.js样式
  - 1.4.2 animate.js样式
2. 页面效果

1. 项目搭建

1.1 在项目开始之前，先做好准备工作，创建这样的文件目录，git和vscode直接忽略。

1.1.1 css文件夹

包含三个css文件，分别是base.css、common.css、index.css。

1.1.2 images文件

里面放一些固定的图片

1.1.3 js文件

index.js和animate文件主要放我们自己写的原生js，animate主要用于轮播图。

1.1.4 uploads

放一些随时更新的图片

1.1.5 favicon

我们的网站图标

1.2 HTML结构

1.2.1 头部引入文件

1.2.2 主体结构

1.2.3 index.html代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小兔鲜儿-新鲜、惠民、快捷！</title><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><!-- 引入网站图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化样式 --><link rel="stylesheet" href="./css/base.css"><!-- 引入公共样式 --><link rel="stylesheet" href="./css/common.css"><!-- 引入首页样式 --><link rel="stylesheet" href="./css/index.css"><script src="./js/animate.js"></script><script src="./js/index.js"></script>
</head><body><!-- 头部开始 --><!-- 快捷导航栏开始 --><div class="shortcut sk"><div class="w"><ul><li><a href="javascript:;">请先登录</a></li><li class="sep">|</li><li><a href="javascript:;">免费注册</a></li><li class="sep">|</li><li><a href="javascript:;">我的订单</a></li><li class="sep">|</li><li><a href="javascript:;">会员中心</a></li><li class="sep">|</li><li><a href="javascript:;">帮助中心</a></li><li class="sep">|</li><li><a href="javascript:;">在线客服</a></li><li class="sep">|</li><li><a href="javascript:;">手机版</a></li></ul></div></div><!-- 快捷导航栏结束 --><!-- 主导航栏开始 --><div class="main_nav w"><div class="logo"><h1><a href="index.html" title="小兔鲜儿">小兔鲜儿</a></h1></div><nav class="nav"><ul><li><a href="javascript:;">首页</a></li><li><a href="javascript:;">生鲜</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">餐厨</a></li><li><a href="javascript:;">电器</a></li><li><a href="javascript:;">居家</a></li><li><a href="javascript:;">洗护</a></li><li><a href="javascript:;">孕婴</a></li><li><a href="javascript:;">服装</a></li></ul></nav><div class="search"><input type="search" placeholder="搜一搜"></div><a href="javascript:;"><div class="car"><span>2</span></div></a></div><!-- 主导航栏结束 --><!-- 头部结束 --><!-- 首页主体模块开始 --><section class="section"><div class="w"><div class="focus"><ul class="carousel"><li><a href="javascript:;"><img src="./uploads/banner_1.png" alt=""></a></li><li><a href="javascript:;"><img src="data:images/focus2.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/focus3.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/focus4.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/focus5.jpg" alt=""></a></li><li><a href="javascript:;"><img src="data:images/focus6.jpg" alt=""></a></li></ul><!-- 左侧按钮 --><a href="javascript:;" class="prve"></a><!-- 右侧按钮 --><a href="javascript:;" class="next"></a><!-- 小圆点 --><ul class="dots"></ul></div><aside class="aside"><ul><li>生鲜<a href="Javascript:;">水果</a><a href="Javascript:;">蔬菜</a></li><li>美食<a href="Javascript:;">面点</a><a href="Javascript:;">干果</a></li><li>餐厨<a href="Javascript:;">数码产品</a></li><li>电器<a href="Javascript:;">床品 </a><a href="Javascript:;">四件套</a><a href="Javascript:;">被枕</a></li><li>居家<a href="Javascript:;">奶粉</a><a href="Javascript:;">玩具</a><a href="Javascript:;">辅食</a></li><li>洗护<a href="Javascript:;">洗发</a><a href="Javascript:;">洗护</a><a href="Javascript:;">美妆</a></li><li>孕婴<a href="Javascript:;">奶粉</a><a href="Javascript:;">玩具</a></li><li>服饰<a href="Javascript:;">女装</a><a href="Javascript:;">男装</a></li><li>杂货<a href="Javascript:;">户外</a><a href="Javascript:;">图书</a></li><li>品牌<a href="Javascript:;">品牌制造</a></li></ul></aside></div></section><!-- 首页主体模块结束 --><div class="recomment w"><div class="recomment_today"><i>小兔鲜秒杀</i><em class="ems">10:00点场 距结束</em><span class="hour">12</span><em>:</em><span class="minute">20</span><em>:</em><span class="second">03</span></div><div class="commodity"><ul><li><a href="#"><img src="./uploads/comondity1.png" alt=""></a></li><li><a href="#"><img src="./uploads/comondity2.png" alt=""></a></li><li><a href="#"><img src="./uploads/comondity3.png" alt=""></a></li><li><a href="#"><img src="./uploads/comondity4.png" alt=""></a></li></ul></div></div><script>// 倒计时特效(function () {// 封装一个随机颜色函数function getRandomColor(flag = true) {if (flag) {let str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']for (let i = 1; i <= 6; i++) {let random = Math.floor(Math.random() * arr.length)str += arr[random]}return str} else {// 返回rgb随机颜色let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)return `rgb(${r},${g},${b})`}}function countDown() {// 获取当前时间戳let now = +new Date()// 获取未来时间戳let last = +new Date('2024-3-28 22:00:00')// 倒计时时间秒let time = (last - now) / 1000// 得到小时let h = parseInt(time / 60 / 60 % 24)// 不满10补零操作h = h > 10 ? h : '0' + h// 得到分let m = parseInt(time / 60 % 60)// 不满10补零操作m = m > 10 ? m : '0' + m// 得到秒let s = parseInt(time % 60)// 不满10补零操作s = s > 10 ? s : '0' + s// 赋值给时分秒元素document.querySelector('.hour').innerHTML = hdocument.querySelector('.minute').innerHTML = mdocument.querySelector('.second').innerHTML = s// 给盒子设置随机背景颜色document.querySelector('.recomment_today').style.backgroundColor = getRandomColor()}countDown()setInterval(countDown, 1000)})()</script><!-- 推荐模块ent --><!-- 新鲜好物模块开始 --><section class="xx_haowu w new"><div class="goods_hd"><h3>新鲜好物<span>新鲜出炉 品质靠谱</span></h3><a href="javascript:;">查看全部</a></div><div class="goods_bm w"><ul><li><a href="javascript:;"><img src="./uploads/new_goods_1.jpg" alt=""><p>睿米无线吸尘器F8</p><p>￥899</p></a><i>新品</i></li><li><a href="javascript:;"><img src="./uploads/new_goods_2.jpg" alt=""><p>智能环绕3D空调</p><p>￥1299</p></a><i>新品</i></li><li><a href="javascript:;"><img src="./uploads/new_goods_3.jpg" alt=""><p>广东软软糯米煲仔饭</p><p>￥129</p></a><i>新品</i></li><li><a href="javascript:;"><img src="./uploads/new_goods_4.jpg" alt=""><p>罗西机械智能手表</p><p>￥3399</p></a><i>新品</i></li></ul></div></section><!-- 新鲜好物模块结束 --><!-- r人气推荐模块开始 --><section class="xx_haowu w renqi popular"><div class="goods_hd"><h3>人气推荐<span>人气爆款 不容错过</span></h3></div><div class="goods_bm w"><ul><li><a href="javascript:;"><img src="./uploads/popular_1.jpg" alt=""><p>特惠推荐</p><p>我猜得到 你的需要</p></a></li><li><a href="javascript:;"><img src="./uploads/popular_2.jpg" alt=""><p>爆款推荐</p><p>人气好物推荐</p></a></li><li><a href="javascript:;"><img src="./uploads/popular_3.jpg" alt=""><p>场景使用一站买全</p><p>编辑精心整理推荐</p></a></li><li><a href="javascript:;"><img src="./uploads/popular_4.jpg" alt=""><p>领券中心</p><p>发现更多超值优惠券</p></a></li></ul></div></section><!-- r人气推荐模块结束 --><!-- 热门品牌模块开始 --><Section class="pinpai w brand"><div class="goods_hd"><h3>热门品牌<span>国际经典 品质保证</span></h3><div class="button"><i><span class="left"></span></i><i><span class="right"></span></i></div></div><div class="goodss_bm w"><ul><li><a href="javascript:;"><img src="./uploads/brand_goods_1.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./uploads/brand_goods_2.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./uploads/brand_goods_3.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./uploads/brand_goods_4.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./uploads/brand_goods_5.jpg" alt=""></a></li></ul></div></Section><!-- 热门品牌模块结束 --><!-- 生鲜模块开始 --><section class="shengxian w "><div class="goods_hd"><h3>生鲜</h3><a href="javascript:;">查看全部</a><ul class="tab"><li><span class="active">水果</span></li><li><span>蔬菜</span></li><li><span>肉禽蛋</span></li><li><span>裤装</span></li><li><span>衬衫</span></li><li><span>T恤</span></li><li><span>内衣</span></li></ul></div><div class="goods_bottom w"><div class="goods_bottom_left"><a href="javascript:;"><img src="./uploads/fresh_goods_cover.png" alt=""></a></div><div class="goods_bottom_right"><ul><li><a href="javascript:;"><img src="./uploads/fresh_goods_1.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_2.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>79</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_3.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>49</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_4.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br>调味海</p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_5.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_6.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_7.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/fresh_goods_8.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br></p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li></ul></div></div></section><!-- 生鲜模块结束 --><!-- 服饰模块开始 --><section class="shengxian w"><div class="goods_hd"><h3>服饰</h3><a href="javascript:;">查看全部</a><ul class="tab"><li><span class="active">水果</span></li><li><span>蔬菜</span></li><li><span>肉禽蛋</span></li><li><span>裤装</span></li><li><span>衬衫</span></li><li><span>T恤</span></li><li><span>内衣</span></li></ul></div><div class="goods_bottom w"><div class="goods_bottom_left"><a href="javascript:;"><img src="./uploads/clothes_goods_cover.jpg" alt=""></a></div><div class="goods_bottom_right"><ul><li><a href="javascript:;"><img src="./uploads/clothes_goods_1.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_2.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>79</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_3.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>49</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_4.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br>调味海</p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_5.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_6.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_7.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/clothes_goods_8.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br></p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li></ul></div></div></section><!-- 服饰模块结束 --><!-- 餐厨模块开始 --><section class="shengxian w"><div class="goods_hd"><h3>餐厨</h3><a href="javascript:;">查看全部</a><ul class="tab"><li><span class="active">水果</span></li><li><span>蔬菜</span></li><li><span>肉禽蛋</span></li><li><span>裤装</span></li><li><span>衬衫</span></li><li><span>T恤</span></li><li><span>内衣</span></li></ul></div><div class="goods_bottom w"><div class="goods_bottom_left"><a href="javascript:;"><img src="./uploads/kitchen_goods_cover.jpg" alt=""></a></div><div class="goods_bottom_right"><ul><li><a href="javascript:;"><img src="./uploads/home_goods_1.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_2.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>79</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_3.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>49</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_4.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br>调味海</p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_5.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_6.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_7.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/home_goods_8.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br></p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li></ul></div></div></section><!-- 餐厨模块结束 --><!-- 底部开始 --><!-- 居家模块开始 --><section class="shengxian w"><div class="goods_hd"><h3>居家</h3><a href="javascript:;">查看全部</a><ul class="tab"><li><span class="active">水果</span></li><li><span>蔬菜</span></li><li><span>肉禽蛋</span></li><li><span>裤装</span></li><li><span>衬衫</span></li><li><span>T恤</span></li><li><span>内衣</span></li></ul></div><div class="goods_bottom w"><div class="goods_bottom_left"><a href="javascript:;"><img src="./uploads/home_goods_cover.jpg" alt=""></a></div><div class="goods_bottom_right"><ul><li><a href="javascript:;"><img src="./uploads/kitchen_goods_1.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_2.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>79</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_3.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>49</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_4.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br>调味海</p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_5.jpg" alt=""><p>美威 智利原味三文鱼排240g/袋 4片装<br>海鲜年货</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_6.jpg" alt=""><p>红功夫 麻辣小龙虾1.5kg4-6钱/25-32只<br>火锅食材</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_7.jpg" alt=""><p>三都港 冷冻无公害黄花鱼700g 2条 袋装<br>海鲜水产</p><p>￥<em>59</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li><li><a href="javascript:;"><img src="./uploads/kitchen_goods_8.jpg" alt=""><p>渔公码头 大连鲜食入味即食海参 辽参刺参<br></p><p>￥<em>899</em></p></a><a href="javascript:;"><div class="baby"><span>找相似</span><span>发现更多宝贝</span></div></a></li></ul></div></div></section><!-- 居家模块结束 --><!-- 最新专题模块开始 --><section class="news topic"><div class="w"><div class="goods_hd"><h3>最新专题</h3><a href="javascript:;">查看全部</a></div><div class="news_bt"><ul><a href="javascript:;"><li><div><img src="./uploads/topic_goods_1.jpg" alt=""><div class="cook"><p>吃这些美食才不算辜负自己</p><p>餐厨起居洗护好物</p><span>￥29.9起</span></div></div><div class="nnn"><i>1220</i><i>1800</i><i>246</i></div></li></a><a href="javascript:;"><li><div><img src="./uploads/topic_goods_2.jpg" alt=""><div class="cook"><p>吃这些美食才不算辜负自己</p><p>餐厨起居洗护好物</p><span>￥29.9起</span></div></div><div class="nnn"><i>1220</i><i>1800</i><i>246</i></div></li></a><a href="javascript:;"><li><div><img src="./uploads/topic_goods_3.jpg" alt=""><div class="cook"><p>吃这些美食才不算辜负自己</p><p>餐厨起居洗护好物</p><span>￥29.9起</span></div></div><div class="nnn"><i>1220</i><i>1800</i><i>246</i></div></li></a></ul></div></section><!-- 最新专题模块结束 --><footer><div class="ft w"><dl class="kefu"><dt>客服服务</dt><dd class="zaixian"><p><a href="javascript:;">在线客服</a></p></dd><dd class="wenti"><p><a href="javascript:;">问题反馈</a></p></dd></dl><dl class="guanzhu"><dt>关注我们</dt><dd class="gongzhong"><p><a href="javascript:;">公众号</a></p></dd><dd class="weibo"><p><a href="javascript:;">微博</a></p></dd></dl><dl class="xiazai"><dt>下载APP</dt><dd><img src="./uploads/qrcode.png" alt=""></dd><dd><p><a href="javascript:;">扫描二维码</a></p><p><a href="javascript:;">立马下载APP</a></p><button>下载页面</button></dd></dl><dl class="rexian"><dt>服务热线</dt><dd><p>400-0000-000</p></dd><dd><p>周一至周日 8:00-18:00</p></dd></dl></div><div class="fb"><div class="fb_t"><ul><li>价格亲民</li><li>物流快捷</li><li>品质新鲜</li></ul></div><div class="fb_b"><p><a href="javascript:;">关于我们</a><i>|</i><a href="javascript:;">帮助中心</a><i>|</i><a href="javascript:;">售后服务</a><i>|</i><a href="javascript:;">配送与验收</a><i>|</i><a href="javascript:;">商务合作</a><i>|</i><a href="javascript:;">搜索推荐</a><i>|</i><a href="javascript:;">友情链接</a></p><p><a href="javascript:;">CopyRight @ 小兔鲜儿</a></p></div></div></div></footer><!-- 底部结束 --><!-- 页面滚动出现主导航栏 --><!-- 主导航栏开始 --><div class="scroll"><div class="main_nav w "><div class="logo "><h1><a href="index.html" title="小兔鲜儿">小兔鲜儿</a></h1></div><div class="search "><input type="search" placeholder="搜一搜"></div></div></div><!-- 主导航栏结束 --><!-- 电梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鲜好物</a></li><li><a href="javascript:;" data-name="popular">人气推荐</a></li><li><a href="javascript:;" data-name="brand">热门品牌</a></li><li><a href="javascript:;" data-name="topic">最新专题</a></li><li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li></ul></div><!-- 首页登录信息随登录页面变化 --><script>// 得到第一个小Liconst liOne = document.querySelector('.shortcut li:first-child')const liTwo = liOne.nextElementSibling.nextElementSibling// 封装一个函数function render() {// 得到本地存储里的数据const xtx_name = localStorage.getItem('xtx_name')if (xtx_name) {liOne.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${xtx_name}</i></a>`liTwo.innerHTML = `<a href="javascript:;">退出登录</a>`} else {liOne.innerHTML = `<a href="./login.html">请先登录</a>`liTwo.innerHTML = `<a href="./register.html">免费注册</a>`}}render()// 给liTwo注册点击事件,以便退出登录liTwo.addEventListener('click', function () {// 删除本地存储里面的数据localStorage.removeItem('xtx_name')// 重新渲染页面render()})</script>
</body>
</html>

1.3 css样式

1.3.1 页面初始化（base)样式

在默认的浏览器中有很多默认的样式，所以我们要对其进行清除并且设置自己的默认样式
代码示例：

* {box-sizing: border-box;
}/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {margin: 0;padding: 0;
}/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {box-sizing: border-box;font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;
}/* 去除列表默认样式 */
ul,
ol {list-style: none;
}/* 去除默认的倾斜效果 */
em,
i {font-style: normal;
}/* 去除a标签默认下划线，并设置默认文字颜色 */
a {text-decoration: none;color: #333;
}/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {vertical-align: middle;
}/* 去除input默认样式 */
input {border: none;outline: none;color: #333;
}/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}.clearfix::after {clear: both;
}

1.3.2 公共样式（common)样式

小兔鲜网站每个网页都有一些共同样式，所以我们单独创建一个css样式以便后续其他页面调用。
效果图：

.w {width: 1240px;margin: 0 auto;
}/* 快捷导航栏开始 */
.shortcut {height: 52px;background-color: #333;line-height: 52px;
}
.s {position: absolute;left: 0;top: 0;}
.shortcut ul {float: right;
}.shortcut li {float: left;
}.shortcut li:nth-child(13)::before {content: '';display: inline-block;vertical-align: middle;width: 11px;height: 16px;margin-right: 5px;background-color: #27ba9b;background: url(../images/sprites.png) no-repeat -160px -70px;
}.sep {color: #666;margin: 0 15px;
}.shortcut li a {color: #dcdcdc;font-size: 14px;
}.shortcut li a:hover {color: #27ba9b;
}/* 快捷导航栏结束 */
/* 主导航栏开始 */
.main_nav {height: 130px;padding: 30px 0;}.logo {float: left;width: 207px;height: 70px;}.logo h1 a {display: block;width: 207px;height: 70px;font-size: 0;background: url(.././images/logo.png) no-repeat;background-size: 100%;
}.nav {float: left;margin-top: 5px;margin-left: 35px;
}.nav ul li {float: left;margin: 24px;
}.nav ul li a {padding-bottom: 5px;
}.nav ul li:hover a {border-bottom: 1px solid #27ba9b;color: #27ba9b;
}.search {float: left;margin-left: 35px;border-bottom: 2px solid #e7e7e7;
}.search::before {content: '';display: inline-block;vertical-align: middle;margin-top: -2px;width: 18px;height: 22px;background: url(.././images/sprites.png) no-repeat -79px -69px;
}.search input {width: 172px;height: 30px;margin-top: 26px;padding-left: 30px;}.search input::placeholder {color: #ccc;
}.car {position: relative;float: left;width: 23px;height: 23px;background-color: #27ba9b;margin-top: 30px;margin-left: 15px;background: url(.././images/sprites.png) no-repeat -119px -70px;
}.car span {position: absolute;top: -8px;right: -10px;font-size: 13px;line-height: 14px;padding: 0 5px;background-color: #e26237;border-radius: 7px;color: #fff;
}/* 主导航栏结束 */
/* 底部模块开始 */
footer {height: 645px;
}.ft {height: 50%;
}.ft dl {width: 25%;float: left;text-align: center;margin-top: 79px;color: #999;
}.ft dl dt {margin-bottom: 30px;
}.kefu dd,
.guanzhu dd {display: inline-block;vertical-align: middle;width: 92px;height: 92px;border: 1px solid #eee;margin-right: 5px;}.kefu dd a,
.guanzhu dd a {display: block;margin-top: 22px;width: 100%;height: 100%;font-size: 14px;color: #999;
}.kefu dd a::before,
.guanzhu dd a::before {display: block;width: 35px;height: 31px;content: '';margin: 0 auto;padding-bottom: 5px;background: url(../images/sprites.png) no-repeat;transition: all .5s;
}.kefu .zaixian a::before {background-position: -250px -70px;
}.kefu .zaixian a:hover::before {background-position: -204px -70px;
}.kefu .wenti a::before {background-position: -350px -70px;
}.kefu .wenti a:hover::before {background-position: -300px -70px;
}.guanzhu .gongzhong a::before {background-position: -250px -15px;
}.guanzhu .gongzhong a:hover::before {background-position: -205px -15px;
}.guanzhu .weibo a::before {background-position: -350px -15px;
}.guanzhu .weibo a:hover::before {background-position: -300px -15px;
}.xiazai dd {width: 105px;height: 103px;display: inline-block;}.xiazai dd a {color: #999;font-size: 14px;
}.xiazai dd button {width: 107px;height: 32px;background-color: #27ba9b;color: #FFF;margin-top: 10PX;border: none;cursor: pointer;
}.xiazai dd img {width: 100%;height: 100%;border: 1px solid #eee;padding: 5px;margin-top: -60px;
}.ft .rexian dt {margin-bottom: 40px;
}.rexian dd:nth-of-type(1) {font-size: 22px;
}.rexian dd:nth-of-type(2) {font-size: 15px;margin-top: 5px;
}.fb {height: 50%;background-color: #333;
}.fb .fb_t {height: 170px;line-height: 175px;width: 1393px;margin: 0 auto 40px;border-bottom: 1px solid #434343;text-align: center;
}.fb .fb_t ul li {float: left;width: 33.33%;color: #fff;font-size: 28px;
}.fb .fb_t ul li::before {content: '';display: inline-block;vertical-align: middle;width: 58px;height: 58px;background: url(../images/sprites.png) no-repeat;
}.fb .fb_t ul li:nth-child(2):before {background-position: -65px 0;
}.fb .fb_t ul li:nth-child(2):before {background-position: -130px 0;
}.fb .fb_b {text-align: center;color: #999;
}.fb .fb_b i {padding: 0 4px;
}.fb .fb_b p a {color: #999;font-size: 14px;}.fb .fb_b p a:hover {color: #27ba9b;
}.fb .fb_b p:nth-child(2) {margin-top: 5px;
}/* 底部模块结束 */

1.3.3 首页样式（index)样式

/* 页面滚动*/html {scroll-behavior: smooth;}
.sk {/* position: sticky; */top: 0;left: 0;z-index: 999;
}.section {height: 500px;background-color: #f5f5f5;
}.section .w {position: relative;
}.focus {height: 540px;width: 1240px;overflow: hidden;
}.focus img {height: 540px;width: 1240px;
}.carousel {position: relative;width: 700%;
}.carousel li {float: left;
}.prve,
.next {display: none;transform: translateY(-50%);width: 45px;height: 44px;border-radius: 50%;background: rgba(0, 0, 0, .2) url(../images/sprites.png) no-repeat;
}.prve:hover,
.next:hover {background: rgba(0, 0, 0, .4) url(../images/sprites.png) no-repeat;
}.prve:hover {background-position: 14px -60px;
}.next:hover {background-position: -22px -60px;
}.prve {position: absolute;top: 50%;left: 260px;background-position: 14px -60px;
}.next {position: absolute;top: 50%;right: 10px;background-position: -22px -60px;
}.dots {position: absolute;left: 50%;bottom: 30px;margin-left: 65px;
}.dots .active {background-color: red;
}.dots li {float: left;width: 10px;height: 10px;border-radius: 50%;margin: 0 8px;cursor: pointer;background-color: rgba(0, 0, 0, .8);
}.aside {position: absolute;top: 0;left: 0;width: 251px;height: 540px;background-color: rgba(0, 0, 0, .8);
}.aside ul li {position: relative;height: 54px;line-height: 54px;color: #fff;font-size: 16px;padding-left: 36px;transition: all .3s;
}.aside ul li::after {content: '';position: absolute;top: 20px;right: 20px;transition: all .3s;width: 6px;height: 6px;border-right: 1px;border-bottom: 1px;border-style: solid;transform: rotate(-45deg);border-color: transparent white white transparent;
}.aside ul li:hover {padding-left: 60px;background-color: #27ba9b;
}.aside ul li:hover::after {transform: rotate(135deg);
}.aside ul li a {color: #fff;font-size: 14px;
}.aside ul li a:first-child {margin-left: 15px;
}/* 新鲜好物模块开始 */
.goods_hd {margin-top: 20px;height: 113px;line-height: 113px;
}.goods_hd h3 {float: left;height: 113px;font-size: 29px;color: #333;font-weight: 400;}.goods_hd h3 span {margin-left: 10px;
}.goods_hd h3 span,
.goods_hd a {font-size: 16px;color: #999;
}.goods_hd a {float: right;
}.goods_hd a:hover {color: #27ba9b;
}.goods_hd a:hover::after {border-color: transparent #27ba9b #27ba9b transparent;
}.goods_hd a::after {content: '';display: inline-block;vertical-align: middle;margin-top: -2px;width: 5px;height: 5px;border-right: 1px;border-bottom: 1px;border-style: solid;transform: rotate(-45deg);border-color: transparent #999 #999 transparent;
}.goods_bm {height: 406px;
}.goods_bm li {position: relative;margin-right: 6px;text-align: center;width: 305px;height: 406px;float: left;background-color: #f0f9f4;transition: all .5s;
}.goods_bm li:hover {transform: translateY(-8px);box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}.goods_bm li:nth-child(4) {margin-right: 0;
}.goods_bm li i {position: absolute;top: 18px;left: 17px;font-size: 18px;line-height: 18px;padding-top: 5px;width: 28px;height: 51px;color: #27ba9b;border: 2px solid #27ba9b;border-radius: 5px;
}.goods_bm li img {width: 304px;height: 305px;
}.goods_bm li a p:nth-of-type(1) {font-size: 20px;color: #333;margin: 10px 0;
}.goods_bm li a p:nth-of-type(1):hover {color: #27ba9b;
}.goods_bm li a p:nth-of-type(2) {font-size: 23px;color: #9a2e1f;
}.renqi .goods_bm li a p:nth-of-type(1) {font-size: 21px;
}.renqi .goods_bm li a p:nth-of-type(2) {font-size: 16px;color: #999;
}.renqi .goods_bm li {background-color: #fff;
}/* 新鲜好物模块结束 */
/* 热门品牌开始 */
.pinpai {height: 466px;background-color: #f5f5f5;
}.goods_hd .button {float: right;width: 52px;height: 20px;line-height: 20px;margin-top: 79px;}.button i {display: inline-block;width: 20px;height: 20px;background-color: #e2e2e2;text-align: center;
}.button span {display: inline-block;width: 10px;height: 10px;border-bottom: 1px;border-right: 1px;border-style: solid;border-color: transparent white white transparent;
}.button i:hover {background-color: #27ba9b;
}.button .left {transform: rotate(135deg);margin-left: 5px;
}.button .right {transform: rotate(-45deg);margin-right: 5px;
}.goodss_bm {height: 306px;
}.goodss_bm ul li {float: left;width: 244px;margin-right: 5px;transition: all .5s;
}.goodss_bm ul li:hover {transform: translateY(-8px);box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}.goodss_bm ul li:nth-child(5) {margin-right: 0;
}.goodss_bm img {width: 244px;height: 306px;
}/* 热门品牌结束*/
/* 生鲜模块开始 */
.tab {float: right;margin-right: 65px;text-align: center;
}.tab li {display: inline-block;width: 48px;line-height: 20px;color: #333;margin-right: 13px;font-size: 16px;cursor: pointer;
}.tab li:hover {background-color: #27ba9b;
}.active {display: inline-block;width: 48px;
}.goods_bottom {height: 611px;
}.goods_bottom_left {float: left;height: 100%;width: 240px;
}.goods_bottom_left img {height: 611px;width: 240px;
}.goods_bottom_right {float: right;width: 1000px;height: 100%;
}.goods_bottom_right ul li {position: relative;float: left;margin: 0 0 3px 8px;width: 242px;height: 304px;background-color: #fff;border: 2px solid transparent;transition: all .5s;overflow: hidden;
}.goods_bottom_right ul li:hover {border: 2px solid #27ba9b;
}.goods_bottom_right ul li img {display: block;width: 184px;height: 184px;margin: 0 auto;
}.goods_bottom_right ul li P {margin-left: 29px;width: 182px;
}.goods_bottom_right ul li P:nth-of-type(1) {margin-top: 5px;margin-bottom: 10px;
}.goods_bottom_right ul li P:nth-of-type(2) {color: #9a2e1f;
}.goods_bottom_right ul li P:nth-of-type(2) em {font-size: 22px;
}.baby {position: absolute;left: -2px;bottom: -84px;width: 242px;height: 84px;background-color: #27ba9b;color: #fff;text-align: center;transition: all .5s;
}.goods_bottom_right ul li:hover .baby {bottom: 0;
}.baby span:nth-child(1) {display: inline-block;width: 125px;height: 35px;border-bottom: 1px solid #a9dbcc;margin: 10px auto 8px;
}.baby span:nth-child(2) {display: block;
}/* 生鲜模块结束 */
/* 最新模块开始 */
.news {height: 512px;background-color: #f5f5f5;
}.news_bt ul li {width: 404px;height: 356px;float: left;margin-right: 9px;
}.news_bt ul li img {width: 404px;height: 288px;
}.news_bt ul li:nth-child(3) {margin-right: 0;
}.news_bt ul li div:nth-child(1) {position: relative;width: 404px;height: 288px;background-color: #9a2e1f;
}.news_bt ul li .cook {position: absolute;left: 0;bottom: 0;height: 80px;width: 288px;
}.news_bt ul li .cook p {color: #999;margin-left: 15px;margin-top: 5px;
}.news_bt ul li .cook span {position: absolute;top: 20px;right: -100px;width: 81px;height: 27px;background-color: #fff;color: #9a2e1f;font-size: 17px;font-weight: 700;
}.news_bt ul li .cook p:nth-child(1) {font-size: 20px;
}.news_bt ul li .nnn {width: 100%;height: 65px;line-height: 65px;background-color: #fff;
}.news_bt ul li div:nth-child(2) i:nth-child(1) {margin-left: 20px;float: left;
}.news_bt ul li div:nth-child(2) i:nth-child(2) {float: left;margin-left: 30px;
}.news_bt ul li div:nth-child(2) i:nth-child(3) {float: right;margin-right: 20px;
}.news_bt ul li div:nth-child(2) i::before {content: '';display: inline-block;width: 16px;height: 16px;vertical-align: middle;background: url(../images/sprites.png) no-repeat -120px -110px;
}.news_bt ul li div:nth-child(2) i:nth-child(2):before {background-position: -160px -110px;
}.news_bt ul li div:nth-child(2) i:nth-child(3):before {background-position: -200px -110px;
}/* 最新模块结束 */
/* 电梯导航 */.xtx-elevator {position: fixed;left: 50%;top: 280px;z-index: 999;margin-left: 640px;opacity: 0;transition: all .5s;font-size: 14px;
}.xtx-elevator .xtx-elevator-list {width: 70px;height: 300px;background: #fff;float: right;border: 1px solid #f5f5f5;position: relative;}.xtx-elevator .xtx-elevator-list li {height: 60px;padding: 15px;
}.xtx-elevator .xtx-elevator-list li a {width: 40px;height: 30px;display: block;text-align: center;}.xtx-elevator .xtx-elevator-list li a:hover,
.xtx-elevator .xtx-elevator-list li a.active {color: #27BA9B;
}.xtx-elevator .xtx-elevator-list li a i {display: block;width: 12px;height: 12px;position: relative;left: 13px;border-left: 1px solid black;border-top: 1px solid black;background-position: 8px -106px;font-size: 20px;transform: rotate(45deg);
}.xtx-elevator .xtx-elevator-list li a:hover i {border-left: 1px solid #27BA9B;border-top: 1px solid #27BA9B;
}/* <!-- 页面滚动出现主导航栏 --> */
.scroll {position: fixed;top: 0;width: 100%;border-bottom: 2px solid #27BA9B;background-color: #fff;margin-top: -130px;transition: all .5s;height: 52px;line-height: 52px;
}
.scroll .logo h1 a {display: block;width: 100px;position: absolute;top: 10px;
}
.scroll  .main_nav {position: relative;
}
.scroll .search {position: absolute;right: 0;top:-15px;height: 30px;
}.scroll .search input {border: 1px solid #27BA9B;width: 600px;
}
/* 推荐模块start */
.recomment {position: relative;height: 165px;/* background-color: pink; */
}.recomment_today {position: relative;float: left;width: 251px;height: 100%;line-height: 165px;/* background: url(../images/countDown.png) center; */background-color: #0a9e87;text-align: center;cursor: pointer;transition: all .3s linear;
}.recomment_today i {position: absolute;top: -35px;left: 50px;font-size: 30px;color: #fff;font-weight: 700;
}
.recomment_today .ems {position: absolute;top:12px;left: 36px;
}
.recomment_today span {margin-top: 118px;display: inline-block;width: 35px;height: 35px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 35px;
}.recomment_today:hover {box-shadow: 0 10px 10px #ccc;}.recomment_today em {font-size: 20px;margin-left: 2px;color: #fff;font-weight: 700;
}.commodity {height: 165px;background-color: #ebebeb;
}.commodity ul li {float: left;width: 247px;height: 165px;line-height: 165px;text-align: center;transition: all .5s linear;
}.commodity ul li:hover {box-shadow: 0 10px 20px #ccc;
}/* 推荐模块ent */

1.4 原生javascript

1.4.1 index.js样式

window.addEventListener('load', function () {// 电梯导航模块开始(function () {// 页面导航栏模块const nav = document.querySelector('.main_nav')const scrolls = document.querySelector('.scroll')// scrolls.style.paddingLeft = nav.offsetLeft + 'px'const section = document.querySelector('.section')window.addEventListener('scroll', function () {let n = document.documentElement.scrollTopif (n >= section.offsetTop) {scrolls.style.marginTop = 0} else {scrolls.style.marginTop = '-130px'}})})();(function () {// 获取电梯模块元素const xtx_elevator = document.querySelector('.xtx-elevator')// 获取滚动目标新鲜好物模块元素const xhw = document.querySelector('.xx_haowu')// 获取滚动目标元素得到新鲜好物模块的的scrollTop的值let n = xhw.offsetTop - 300window.addEventListener('scroll', function () {const y = document.documentElement.scrollTopif (y >= n) {xtx_elevator.style.opacity = 1} else {xtx_elevator.style.opacity = 0}})// 点击返回顶部按钮const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {// let timer = setInterval(function () {//     if (document.documentElement.scrollTop <= 0) {//         clearInterval(timer)//     }//     document.documentElement.scrollTop = document.documentElement.scrollTop - 50// }, 1)document.documentElement.scrollTop = 0})})();(function () {// 获取电梯父级元素，使用事件委托const list = document.querySelector('.xtx-elevator-list')list.addEventListener('click', function (e) {if (e.target.tagName === 'A' && e.target.dataset.name) {// 移除选中类let odd = document.querySelector('.xtx-elevator-list .active')if (odd) {odd.classList.remove('active')}// 添加类e.target.classList.add('active')// 点击那个小盒子，页面滚动到对应大盒子的位置document.documentElement.scrollTop = document.querySelector(`.${e.target.dataset.name}`).offsetTop - 50}})})();// 页面滚动到指定位置，对应的小盒子处于选中状态(function () {window.addEventListener('scroll', function () {// 先移除页面选中的active类let odd = document.querySelector('.xtx-elevator-list .active')if (odd) {odd.classList.remove('active')}// 获取四个大盒子元素const news = document.querySelector('.new')const popular = document.querySelector('.popular')const brand = document.querySelector('.brand')const topic = document.querySelector('.topic')let n = document.documentElement.scrollTopif (n >= news.offsetTop - 60 && n < popular.offsetTop - 60) {document.querySelector('[data-name=new]').classList.add('active')} else if (n >= popular.offsetTop - 60 && n < brand.offsetTop - 60) {document.querySelector('[data-name=popular]').classList.add('active')} else if (n >= brand.offsetTop - 60 && n < topic.offsetTop - 60) {document.querySelector('[data-name=brand]').classList.add('active')} else if(n>topic.offsetTop - 60){document.querySelector('[data-name=topic]').classList.add('active')}})})();// 电梯导航模块结束//  轮播图开始// 1获取元素var focus = this.document.querySelector('.focus')var ul = focus.querySelector('.carousel')var btnLeft = focus.querySelector('.prve')var btnRight = focus.querySelector('.next')var dots = focus.querySelector('.dots')var focusWidth = focus.offsetWidth;// 2鼠标经过focus，左右按钮隐藏和显示focus.addEventListener('mouseenter', function () {btnLeft.style.display = 'block'btnRight.style.display = 'block'clearInterval(timer);timer = null})focus.addEventListener('mouseleave', function () {btnLeft.style.display = 'none'btnRight.style.display = 'none'timer = setInterval(function () {btnRight.click()}, 2000)})// 3动态生成小圆点、for (var i = 0; i < ul.children.length; i++) {var li = this.document.createElement('li')dots.appendChild(li)li.setAttribute('Date-index', i)li.addEventListener('mouseenter', function () {for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = ''}this.className = 'active'var index = this.getAttribute('Date-index')num = indexd = indexanimate(ul, -index * focusWidth)})}dots.children[0].className = 'active'// 克隆第一张图片var first = ul.children[0].cloneNode(true)ul.appendChild(first)// 4右侧按钮// 节流阀var flag = truevar num = 0;var d = 0btnRight.addEventListener('click', function () {if (flag) {flag = falseif (num == ul.children.length - 1) {ul.style.left = 0num = 0}num++;animate(ul, -num * focusWidth, function () {flag = true})// 小圆点跟随右按钮移动d++;if (d == dots.children.length) {d = 0;}for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = ''}dots.children[d].className = 'active'}})// 左侧按钮btnLeft.addEventListener('click', function () {if (flag) {flag = false;if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * focusWidth + 'px'}num--;animate(ul, -num * focusWidth, function () {flag = true})// 小圆点跟随右按钮移动d--;if (d < 0) {d = dots.children.length - 1}for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = ''}dots.children[d].className = 'active'}})// 左侧按钮// 自动播放var timer = this.setInterval(function () {btnRight.click()}, 2000)// 轮播图结束
})

1.4.2 animate.js样式

function animate(obj, target, callback) {// console.log(callback);  callback = function() {}  调用的时候 callback()// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function () {// 步长值写到定时器的里面// 把我们步长值改为整数 不要出现小数的问题// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {//     // 调用函数//     callback();// }callback && callback();}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}

2. 页面效果

小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript相关推荐

纯HTML+CSS小兔鲜儿网站首页（静态网页）
在项目开始之前,先做好准备工作,创建这样的文件目录,css文件夹包含三个css文件,分别是base.css.common.css.index.css,images放的是固定的照片,uploads放随时 ...
阴阳师项目网站首页(动态网页）原生HTML+CSS+Javascript
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录. 1.1.1 css文件夹 1.1.2 images文件 1.1.3 js文件 1.1.4 font 1.2 HTML ...
【每日一练】小兔鲜项目-01
今天终于接触到了小兔鲜项目,之前在前端群里一直听到有人提起过. 下面开始分析一下小兔鲜: 首先,搭建框架,创建小兔鲜文件夹. 1.创建项目目录: 2.然后搭建index页面 <!DOCTYPE ...
前端vue3.0小兔鲜项目
博主收集到了一个完整的项目前端vue3.0框架的小兔鲜项目,学习前端的小伙伴可以找我来领. 完整的教学视频+代码+笔记项目地址:http://erabbit.itheima.net/ 需要的联系q ...
小兔鲜项目-原生JS实现页面放大镜效果模块
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录 1.1.1 css文件夹 1.1.2 images文件 1.1.3 uploads文件 1.2 HTML结构 1.2. ...
2、小兔鲜项目-文件+目录准备
新建项目文件夹 xtx-pc-client,在VScode中打开 • 在实际开发中,项目文件夹不建议使用中文 • 所有项目相关文件都保存在 xtx-pc-client 目录中复制 favicon.i ...
小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡
1.1精灵图: 使用步骤: 1.创建一个盒子,设置盒子的尺寸和小图尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置精灵图的标签一般都用行内标签,如span,b,i: 背景图位置属性:b ...
移动端支付界面制作（小兔鲜项目）
代码 .html <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
用HTML+CSS做成的一个简单网页（小兔鲜儿）
写在前面的话:在跟着黑马程序员视频学习的时候,做的一个由简单HTML+CSS知识组成的一个简单小网页分享给大家,可以供新手学习. 目录效果图如下: HTML相关代码如下: CSS相关代码如下: in ...

小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript

目录