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="images/focus2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/focus3.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/focus4.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/focus5.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="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 = h
document.querySelector('.minute').innerHTML = m
document.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.5kg
4-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.5kg
4-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.5kg
4-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.5kg
4-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.5kg
4-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.5kg
4-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.5kg
4-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.5kg
4-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>
// 得到第一个小Li
const 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.scrollTop
if (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 - 300
window.addEventListener('scroll', function () {
const y = document.documentElement.scrollTop
if (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.scrollTop
if (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 = index
d = index
animate(ul, -index * focusWidth)
})
}
dots.children[0].className = 'active'
// 克隆第一张图片
var first = ul.children[0].cloneNode(true)
ul.appendChild(first)
// 4右侧按钮
// 节流阀
var flag = true
var num = 0;
var d = 0
btnRight.addEventListener('click', function () {
if (flag) {
flag = false
if (num == ul.children.length - 1) {
ul.style.left = 0
num = 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 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
2. 页面效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/144077.html
