实现的地址：https://www.mi.com/
源码连接：
链接：https://pan.baidu.com/s/1GK1vFn6uxTV47ZQgstQ9Qg
提取码：gdho
复制这段内容后打开百度网盘手机App，操作更方便哦
文章目录
一、实现结果
二、导航栏布局
三、代码
1.html代码（1328行）
<!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>
<link rel="stylesheet" href="css/mi.css">
<link rel="icon shortcut" href="./img/xiaomi.png" >
</head>
<body>
<!-- 第一部分 -->
<div class="header">
<div class="site-topbar">
<div class="container">
<div class="topbar-nav">
<a rel="nofollow" href="">小米商城</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >MIUI</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >IoT</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >云服务</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >天星数科</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >有品</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >小爱开放平台</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >企业团购</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >资质证照</a>
<span class="sep">|</span>
<a rel="nofollow" href="" >协议规则</a>
<span class="sep">|</span>
<a rel="nofollow" class="erweima" href="">下载app
<span class="appcode"> 小米商城APP</span>
<img src="./img/erweima.png">
</a>
<span class="sep">|</span>
<a rel="nofollow">智能生活</a>
<span class="sep">|</span>
<a rel="nofollow" href="javascript:;">Select Location</a>
</div>
<div class="topbar-cart">
<img src="img/topbar-carticon.png" class="topbar-carticon" alt="">
<a>购物车</a>
<div>购物车还没有商品，赶紧选购吧！</div>
</div>
<div class="topbar-info">
<a href="">登录</a>
<span class="sep" >|</span>
<a href="">注册</a>
<span class="sep">|</span>
<a href="">消息通知</a>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="header-logo">
<img src="img/site-header-logo.png" class="logo" alt="" title="小米官网">
</div>
<div class="header-nav">
<ul class="nav-list">
<li class="nav-category">
<a href="" class="link-category"><span>全部商品分类</span></a>
<div class="site-category" style="display: block;" >
<ul class="site-category-list">
<li class="category-item">
<a href="">手机 电话卡<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第一个 -->
<div >
<ul class="category-item-detail">
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/m2.png" alt="">
<span>小米MIX FOLD</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">电视盒子<img class="img" src="./img/xiangyou.png" alt=""></a>
<div >
<ul class="category-item-detail">
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
<li>
<img src="./img/tv.png" alt="">
<span>小米MIX FOLD</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">笔记本 显示器<img class="img" src="./img/xiangyou.png" alt="">
</a>
<!-- 第三个 -->
<div >
<ul class="category-item-detail">
<li>
<img src="./img/m3.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m4.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m5.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m6.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m7.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m8.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m9.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m10.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m11.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m5.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m6.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m7.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m8.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m9.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m10.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m11.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
<li>
<img src="./img/m4.png" alt="">
<span>RedmiBook Pro 14 锐龙版</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">家电 插线板<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第四个 -->
<div >
<ul class="category-item-detail">
<li>
<img src="./img/j1.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j2.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j3.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j4.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j5.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j6.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j7.jpg" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j8.jpg" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j9.jpg" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j10.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j11.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j1.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j9.jpg" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j8.jpg" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j7.jpg" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j6.png" alt="">
<span>立式空调</span>
</li>
<li>
<img src="./img/j5.png" alt="">
<span>立式空调</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">出行 穿戴<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第五个 -->
<div >
<ul class="category-item-detail">
<li>
<img src="./img/c1.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c2.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c3.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c4.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c5.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/C6.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c7.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c8.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c9.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c10.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c11.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c1.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c2.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c3.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c4.webp" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/c5.jpg" alt="">
<span>小米手环</span>
</li>
<li>
<img src="./img/C6.jpg" alt="">
<span>小米手环</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">智能 路由器<img class="img" src="./img/xiangyou.png" alt="">
</a>
<!-- 第六个 -->
<div >
<ul class="category-item-detail">
<li>
<img src="./img/z1.jpg" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z2.jpg" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z3.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z4.jpg" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z6.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z7.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z8.png" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z9.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z1.jpg" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z2.jpg" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z3.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z4.jpg" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z6.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z7.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z8.png" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z9.webp" alt="">
<span>打印机</span>
</li>
<li>
<img src="./img/z1.jpg" alt="">
<span>打印机</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">电源 配件<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第七个 -->
<div>
<ul class="category-item-detail">
<li>
<img src="./img/d1.webp" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d2.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d3.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d4.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d5.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d6.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d7.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d1.webp" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d2.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d3.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d4.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d5.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d6.jpg" alt="">
<span>移动电源</span>
</li>
<li>
<img src="./img/d7.jpg" alt="">
<span>移动电源</span>
</li>
</ul>
</div>
</li>
<li class="category-item">
<a href="">健康 儿童<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第八个 -->
<div>
<ul class="category-item-detail">
<li>
<img src="./img/t1.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t2.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t3.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t4.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t5.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t6.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t7.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t1.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t2.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t3.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t4.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t5.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t6.jpg" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/t7.jpg" alt="">
<span>益智积木</span>
</li>
</ul>
</li>
<li class="category-item">
<a href="">耳机 音箱<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第九个 -->
<div>
<ul class="category-item-detail">
<li>
<img src="./img/y1.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y2.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y3.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y4.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y1.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y2.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y3.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y4.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y1.webp" alt="">
<span>益智积木</span>
</li>
<li>
<img src="./img/y2.webp" alt="">
<span>小米音箱</span>
</li>
<li>
<img src="./img/y3.webp" alt="">
<span>小米音箱</span>
</li>
<li>
<img src="./img/y4.webp" alt="">
<span>小米音箱</span>
</li>
<li>
<img src="./img/y1.webp" alt="">
<span>小米音箱</span>
</li>
<li>
<img src="./img/y2.webp" alt="">
<span>小米音箱</span>
</li>
<li>
<img src="./img/y3.webp" alt="">
<span>小米音箱</span>
</li>
<li>
<img src="./img/y4.webp" alt="">
<span>小米音箱</span>
</li>
</ul>
</li>
<li class="category-item">
<a href="">生活 箱包<img class="img" src="./img/xiangyou.png" alt=""></a>
<!-- 第十个 -->
<div>
<ul class="category-item-detail">
<li>
<img src="./img/s1.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s2.jpg" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s3.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s4.png" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s5.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s6.jpg" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s1.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s2.jpg" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s3.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s4.png" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s5.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s6.jpg" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s1.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s2.jpg" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s3.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s4.png" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s5.webp" alt="">
<span>旅行包</span>
</li>
<li>
<img src="./img/s6.jpg" alt="">
<span>旅行包</span>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-item"><a href="" class="link" id="btn">小米手机1</a></li>
<li class="nav-item"><a href="" class="link">Redmi红米</a></li>
<li class="nav-item"><a href="" class="link">电视</a></li>
<li class="nav-item"><a href="" class="link">笔记本</a></li>
<li class="nav-item"><a href="" class="link">家电</a></li>
<li class="nav-item"><a href="" class="link">路由器</a></li>
<li class="nav-item"><a href="" class="link">智能硬件</a></li>
<li class="nav-item"><a href="" class="link">服务</a></li>
<li class="nav-item"><a href="" class="link">社区</a></li>
</ul>
</div>
<div class="header-search">
<form action="" class="search-form">
<input type="text" class="search-text"><input type="button" class="search-btn" >
</form>
</div>
</div>
<div id="div1">
<div class="container">
<ul class="children-list">
<li ><img src="img/phone1.png" alt="小米MIX FOLD" width="160" height="110">
<div class="title">小米MIX FOLD</div><p class="price">9999元起</p>
</li>
<li>
<img src="img/phone2.png" alt="小米MIX FOLD" width="160" height="110">
<div class="title">小米MIX FOLD</div><p class="price">9999元起</p>
</li>
<li>
<img src="img/phone3.png" alt="小米MIX FOLD" width="160" height="110">
<div class="title">小米MIX FOLD</div><p class="price">9999元起</p>
</li>
<li>
<img src="img/phone4.png" alt="小米MIX FOLD" width="160" height="110">
<div class="title">小米MIX FOLD</div><p class="price">9999元起</p>
</li>
<li>
<img src="img/phone5.png" alt="小米MIX FOLD" width="160" height="110">
<div class="title">小米MIX FOLD</div><p class="price">9999元起</p>
</li>
<li>
<img src="img/phone6.png" alt="小米MIX FOLD" style="border:none;" width="160" height="110">
<div class="title">小米MIX FOLD</div><p class="price">9999元起</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container home-hero-containe">
<!-- 第二部分 -->
<div class="box">
<div class="box-1">
<ul>
<li>
<img src="./img/1.png" alt="这里是第一场图片"></img>
</li>
<li>
<img src="./img/2.png" alt="这里是第二张图片"></img>
</li>
<li>
<img src="./img/3.png" alt="这里是第三张图片"></img>
</li>
<li>
<img src="./img/4.jpg" alt="这里是第一场图片"></img>
</li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3">
<span class="prev"> < </span>
<span class="next"> > </span>
</div>
</div>
<!-- 第二部分结束 -->
<!-- 第三部分开始 -->
<div class="home-hero-sub">
<div class="span4">
<ul class="home-channel-list">
<li><img src="./img/shizhong.png" alt=""><br><a>小米秒杀</a></li>
<li><img src="./img/lou.png" alt=""><br><a>企业团购</a></li>
<li><img src="./img/fma.png" alt=""><br><a>F码通道</a></li>
<li><img src="./img/ka.png" alt=""><br><a>米粉卡</a></li>
<li><img src="./img/huanxin.png" alt=""><br><a>以旧换新</a></li>
<li><img src="./img/huafei.png" alt=""><br><a>话费充值</a></li>
</ul>
</div>
<div class="span16">
<ul class="home-promo-list">
<li class="first"><img src="./img/huang.jpg" alt=""><a href=""></a></li>
<li><a href=""><img src="./img/lan.jpg" alt=""></a></li>
<li><a href=""><img src="./img/hei.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div class="home-main">
<div class="container">
<!-- 第3.1部分 -->
<div class="home-flashsale">
<div class="box-hd">
<h2 class="title">小米秒杀</h2>
</div>
<div class="box-bd">
<div class="item1 flashsale-left" >
<div class="round">20:00 场</div>
<img src="./img/shandian.png" alt="">
<div class="desc">距离结束还有</div>
<div class="countdown">
<span>22</span><i>:</i>
<span>22</span><i>:</i>
<span>33</span>
</div>
</div>
<div class="flashsale-list">
<div class="show_banner" id="show_banner">
<ul id="banner">
<li>
<img src="./img/item1.png" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>199</span><del>699元</del></p>
</li>
<li>
<img src="./img/item2.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>299</span><del>699元</del></p>
</li>
<li>
<img src="./img/item3.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>399</span><del>699元</del></p>
</li>
<li>
<img src="./img/item4.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>499</span><del>699元</del></p>
</li>
<li>
<img src="./img/item5.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/item7.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>699</span><del>699元</del></p>
</li>
<li>
<img src="./img/item3.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>799</span><del>699元</del></p>
</li>
<li>
<img src="./img/item1.png" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/item1.png" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>5899</span><del>699元</del></p>
</li>
<li>
<img src="./img/item1.png" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>999</span><del>699元</del></p>
</li>
<li>
<img src="./img/item7.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>1099</span><del>699元</del></p>
</li>
<li>
<img src="./img/item5.webp" alt="">
<h3 class="title">onemodern高速指纹加密移动固态硬盘PSSD 500GB</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份，540MB/s传输</p>
<p class="price"><span>1199</span><del>699元</del></p>
</li>
</ul>
<span id="left"><</span>
<span id="right">></span>
<ul id="circular">
<li class="cri"></li>
<li class="cri"></li>
<li class="cri"></li>
<li class="cri"></li>
<li class="cri"></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 第3.2部分 -->
<div class="home-banner-box">
<img src="./img/box.png" alt="">
</div>
<div class="home-brick-box">
<div class="box-hd">
<h2 class="title">手机</h2>
<div class="more"><a href="">查看更多</a></div>
</div>
<div class="row">
<div class="span44">
<div class="brick-list">
<img src="./img/MIx.png">
</div>
</div>
<div class="span116">
<ul>
<li>
<img src="./img/phone2.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone3.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone4.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone5.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone6.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone1.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone2.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone3.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
</ul>
</div>
</div>
</div>
<div class="home-banner-box">
<img src="./img/home-banner2.png" alt="">
</div>
<div class="home-brick-box">
<div class="box-hd">
<h2 class="title">手机</h2>
<div class="more"><a href="">查看更多</a></div>
</div>
<div class="row">
<div class="span44">
<div class="brick-list">
<img src="./img/MIx.png">
</div>
</div>
<div class="span116">
<ul>
<li>
<img src="./img/phone2.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone3.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone4.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone5.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone6.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone1.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone2.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone3.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
</ul>
</div>
</div>
</div>
<div class="home-banner-box">
<img src="./img/home-banner3.png" alt="">
</div>
<div class="home-brick-box">
<div class="box-hd">
<h2 class="title">手机</h2>
<div class="more"><a href="">查看更多</a></div>
</div>
<div class="row">
<div class="span44">
<div class="brick-list">
<img src="./img/MIx.png">
</div>
</div>
<div class="span116">
<ul>
<li>
<img src="./img/phone2.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone3.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone4.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone5.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone6.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone1.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone2.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
<li>
<img src="./img/phone3.png">
<h3 class="title2">Note 10 Pro</h3>
<p class="desc">手机电脑两用，指纹加密，自动备份</p>
<p class="price"><span>599</span><del>699元</del></p>
</li>
</ul>
</div>
</div>
</div>
<div class="home-banner-box">
<img src="./img/home-banner4.png" alt="">
</div>
</div>
<!--到达顶部的bar-->
<div class="topBar">
<a href="#" class="ewm_b" style="position: relative;">
<img src="./img/shouji.png" alt=""><br>
<span>手机APP</span>
<img class="ewm" class="" src="./img/erweima2.png" alt="">
</a>
<a href="#">
<img src="./img/geren.png" alt=""><br><span>个人中心</span>
</a>
<a href="#">
<img src="./img/shouhou.png" alt=""><br><span>售后服务</span>
</a>
<a href="#">
<img src="./img/kefu.png" alt=""><br><span>人工客服</span>
</a>
<a href="#" style="margin-top:20px;">
<img src="./img/topBar.png" alt=""><br><span>返回顶部</span>
</a>
</div>
<!--到达顶部的bar-->
<!-- 轮播图 -->
<script src="./js/mi.js"></script>
</body>
</html>
2.JS代码
window.onload=function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".box");
var $box1 = $(".box-1 ul li",true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-3");
var $length = $box1.length;
var str = "";
for(var i =0;i<$length;i++){
if(i==0){
str +="<li class='on'>"+(i+1)+"</li>";
}else{
str += "<li>"+(i+1)+"</li>";
}
}
$box2.innerHTML = str;
var current = 0;
var timer;
timer = setInterval(go,1000);
function go(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if($length == current){
current = 0;
}
$box1[current].style.display = "block";
$box2.children[current].className = "on";
current++;
}
for(var k=0;k<$length;k++){
$box1[k].onmouseover = function(){
clearInterval(timer);
}
$box1[k].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,1000);
}
}
for(var u =0;u<$length;u++){
$box2.children[u].index = u;
$box2.children[u].onmouseover = function(){
clearInterval(timer);
for(var j=0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
this.className = "on";
$box1[this.index].style.display = "block";
current = this.index +1;
}
$box2.children[u].onmouseout = function(){
timer = setInterval(go,1000);
}
}
$box3.children[0].onclick = function(){
back();
}
$box3.children[1].onclick = function(){
go();
}
function back(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if(current == 0){
current = $length;
}
$box1[current-1].style.display = "block";
$box2.children[current-1].className = "on";
current--;
}
//运动框架
var btn=document.getElementById("btn");
var oDiv1=document.getElementById('div1');
btn.onmouseover=function () {
startMove(oDiv1,229);
oDiv1.style.display="block";
};
btn.onmouseout=function () {
startMove(oDiv1,0);
oDiv1.style.display="none";
};
// 函数调用,变高
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=(iTarget-obj.offsetHeight)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲运动速度取整，大于零向上，小于零向下
if(obj.offsetHeight===iTarget){
clearInterval(obj.timer);
}else{
obj.style.height=obj.offsetHeight+speed+'px';
}
},30);
}
// 轮播2
var banner = document.getElementById("banner");
var show_banner = document.getElementById("show_banner");
var Left = document.getElementById("left");
var Right = document.getElementById("right");
var cri = document.getElementById("circular").children;
// var cri = document.getElementsByClassName("cri");
// console.log(cri);
var i=0;
var timer = setInterval(IntervalBanner,1000)
show_banner.onmouseover=function(){
clearInterval(timer)
}
show_banner.onmouseout=function(){
timer = setInterval(IntervalBanner,1000)
}
Right.onclick=function(){
i++;
if(i==3){
i = 0;
}
Banner();
}
Left.onclick=function(){
i--;
if(i==-1){
i = 2;
}
Banner();
}
function Banner(){
for(var j=0;j<cri.length;j++){
cri[j].style.background = "white";
}
cri[i].style.background = "#f60";
banner.style.marginLeft = -992*i+"px";
}
function IntervalBanner(){
i++;
if(i==3){
i = 0;
}
Banner();
}
}
3.css代码
*{
padding: 0;margin: 0;
}
body{
height: 3000px;
}
.site-topbar{
position: relative;top:0;left: 0;
z-index: 30;
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;}
/* 导航栏中间 */
.container {
width: 1226px;
margin-right: auto;
margin-left: auto;
}
/* //头部导航栏左边 */
.site-topbar .topbar-nav {
float: left;
height: 40px;
line-height: 40px;
}
.site-topbar a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
}
.site-topbar a:hover{
color:#fff;
}
.site-topbar .erweima{position: relative;}
.site-topbar .erweima>img{
position: absolute;top:40px;left:0px;display: none;
}
.site-topbar .erweima:hover>img{
display: block;
}
.site-topbar .sep {
margin: 0 .3em;
color: #424242;
}
/* 头部导航栏右边登录注册 */
.site-topbar .topbar-info {
position: relative;
float: right;
height: 40px;
line-height: 40px;
}
.topbar-cart{
position: relative;
float: right;
width: 120px;
height: 40px;
color:#b0b0b0;
text-align: center;
margin-left: 15px;
-webkit-transition: all .2s;
transition: all .2s;
font-size: 12px;
background-color: #424242;
}
.topbar-cart>div{
width:300px;height: 100px;position: absolute;
top:40px;right:0px; display: none;
color: #424242; background-color:#fff;line-height: 100px;
text-align: center;
box-shadow: 0 3px 4px rgb(0 0 0 / 18%);
}
.topbar-cart:hover>div{
display: block;
}
.topbar-cart:hover{background-color: #fff;}
.topbar-cart a:hover{
color: #ff6700;
}
.topbar-carticon{
margin-right: 4px;
font-size: 20px;
/* vertical-align设置元素垂直排列 */
/* text-align是水平对其 */
vertical-align: -4px;
line-height: 20px;
width: 20px;height: 20px;
}
/* site-header白色导航栏开始 */
.site-header{
z-index: 20;
height: 100px;position: relative;
}
.site-header .container{
position: relative;
}
.site-header .header-logo {
float: left;
width: 62px;
margin-top: 22px;
}
.site-header .logo {
position: relative;
display: block;
width: 56px;
height: 56px;
overflow: hidden;
text-align: left;
}
.site-header .header-nav {
float: left;
width: 850px;
}
.site-header .nav-list {
position: relative;
z-index: 10;
float: left;
width: 1100px;
height: 88px;
margin: 0;
padding: 12px 0 0 30px;
list-style-type: none;
font-size: 16px;
}
.site-header .nav-item {
float: left;
}
.site-header .nav-item .link {
display: block;
padding: 26px 10px 38px;
*padding: 26px 8px 38px;
color: #333;
-webkit-transition: color .2s;
transition: color .2s;
}
.site-header .nav-item .link:hover{
color:#ff7819;
}
a,a:hover {
text-decoration: none;
}
/* 搜索部分开始 */
.site-header .header-search {
float: right;
width: 296px;
margin-top: 25px;
}
.site-header .search-form {
position: relative;
width: 296px;right:0;
height: 50px;
z-index: 20;
}
.site-header .search-text {
right: 51px;
z-index: 1;
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
}
input[type=search]{
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.site-header .search-btn, .site-header .search-text {
position: absolute;
top: 0;
border: 1px solid #e0e0e0;
outline: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
.site-header .search-btn {
right: 0;
z-index: 2;
width: 52px;
height: 50px;
font-size: 24px;
line-height: 24px;
background:url("../img/search.png")no-repeat;
background-size:50px 50px;
color: #616161;
}
.site-header .search-btn:hover{
background:url("../img/search2.png")no-repeat;
background-size:50px 50px;
}
/* #div1{position: absolute;
display: block;
width: 1200px;
height: 10px;
z-index:500;
top: 140px;
left: 0;background-color: #fff;
z-index: 24;
border-top: 1px solid #e0e0e0;
overflow: hidden;
} */
.site-header #div1{height: 229px;display: none;
position: absolute;top: 100px;
width: 100%;z-index: 500;height: 0px;background-color: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid\9;
box-shadow: 0 3px 4px rgb(0 0 0 / 18%);
}
#div1 .container {
margin-left:17.8%;
width: 1226px;background-color: green;
}
.site-header #div1 .children-list {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
}
.site-header #div1 .children-list li {
position: relative;
float: left;
width: 180px;
padding: 35px 12px 0;
text-align: center;
}
.site-header #div1 .children-list li img{
border-right: 1px solid #e0e0e0;
}
.site-headers:hover>.children-list{
display: block;
}
/* 左边菜单栏 */
.site-header .nav-category{
position: relative;
float: left;
width: 127px;
padding-right: 15px;
}
.site-header .nav-category .link-category{
display: block;
padding: 26px 0 38px;
text-align: right;
color: #333;
}
/* 下拉菜单栏开始 */
.site-category{
display: none;
position: absolute;
top: 88px;
left: -92px;
z-index: 100;
width: 234px;
height: 460px;
font-size: 14px;
}
.site-category-list{
margin: 0;
padding: 20px 0;
height: 420px;
border: 0;
background: rgba(105,101,101,.6);
}
/* 每个li */
.category-item{
width: 234px;height: 42px;text-align: center;line-height: 42px;
list-style-type: none;
}
.category-item a{
position: relative;
padding-left: 30px;
float:left;
color: #fff;
}
.site-category ul>Li>div{
width:992px;
height:460px;
position: absolute;
top:0px;
left:234px;
display: none;
background-color: #fff;
border: 1px solid #e0e0e0;
border-left: 0;
-webkit-box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
}
.site-category ul>li:hover>div{
display: block;
}
.site-category .category-item-detail li{
position: relative;z-index:50;
float: left;
width: 248px;
height: 76px;background-color: #ffffff;
}
.site-category .category-item-detail li span{
float: left;
width: 80px;
line-height: 74px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.site-category .category-item-detail li span:hover{
color: #ff6a00;
}
.site-category .category-item-detail li img{
width: 40px;height: auto;
float: left;margin:15px 15px 0;
}
.category-item:hover{
background-color: #ff6700;
}
em{
padding-left: 94px;;
position: absolute;
color: white;
width: 20px;height: 25px;
}
.category-item .img{display: block;
position: absolute;top: 10px;left: 192px;
width: 16px;height: 16px;
}
/* 第二部分开始 */
.home-hero-container{
position: relative;
z-index: 10;
}
/* 轮播图 */
ul,li {list-style: none;}
.box a {text-decoration: none;color: rgb(200, 200, 200);}
.box{width: 1226px;height: 460px;margin: 0px auto;overflow: hidden;position: relative;}
/* .box-1 ul{} */
.box-1 ul li{width:1226px;height: 460px;position: relative;overflow: hidden;}
.box-1 ul li img{display:block;width:1226px; height: 460px;}
.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
text-align: center;cursor: pointer;}
.box-3 .prev{left: 233px;}
.box-3 .next{right: 0px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}
/* 第三部分开始 */
.home-hero-sub {
margin-top: 14px;
}
/* 第三部分左边 */
.span4 {
width: 234px;float: left;
}
.home-channel-list li{
padding: 3px;
font-size: 12px;
list-style-type: none;
position: relative;
float: left;
width: 70px;
height: 82px;
padding: 0 3px;
margin: 0;
text-align: center;
background: #5f5750;
border:1px solid #b4b1ad;
}
.home-channel-list img{
width: 24px;height: 24px;margin: 12px auto 4px;
}
.home-channel-list li a{
color: #cfccca;
}
.home-channel-list li a:hover{
color: #fff;
}
/*第三部分右边 */
.span16 { float: left;
margin-left: 14px;
min-height: 1px;
width: 978px;
}
.home-promo-list li {
float: left;
width: 316px;
height: 170px;
margin-left: 15px;
list-style-type: none;
}
.home-promo-list li:hover{
/* -webkit-transition: -webkit-box-shadow .2s #666666;
transition: -webkit-box-shadow .2s #666666;
transition: box-shadow .2s #666666;
transition: box-shadow .2s #666666,-webkit-box-shadow .2s #666666; */
box-shadow: 0 6px 9px rgb(0 0 0 / 18%);
-webkit-transition: all .6s;
transition: all .2s;
}
.home-promo-list .first{
margin-left: 0;
}
.home-promo-list img{
width: 100%;height: auto;
}
/* 第三部分结束 */
/* 第四部分开始 */
.home-main {
position: relative;
width: 100%;
/* background: red; */
margin-top: 196px;
padding-bottom: 12px;
background-color: #f5f5f5;
}
.home-flashsale {
margin-bottom: 22px;
position: relative;
}
.box-hd .title {
margin: 0;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.home-flashsale .item1 {
border-top-color: #e53935;
}
.home-flashsale .flashsale-left{
float:left;
height: 278px;
width: 234px;
padding-top: 39px;
border-top-width: 1px;
border-top-style: solid;
background: #f1eded;
text-align: center;
}
.flashsale-left .round {
font-size: 21px;
color: #ef3a3b;
padding-top: 15px;
}
.flashsale-left .desc {
color: rgba(0,0,0,.54);
font-size: 15px;
}
.flashsale-left .countdown{
width: 168px;
margin: 28px auto 0;
}
.flashsale-left .countdown span{
width: 46px;
/* height: 46px; */
background: #605751;
color: #fff;
font-size: 24px;
line-height: 46px;
float: left;
}
.countdown i {
width: 15px;
float: left;
height: 46px;
line-height: 46px;
color: #605751;
font-size: 28px;
font-style: normal;
}
.home-flashsale .flashsale-left img{
margin: 25px auto;
}
/* 右边自动轮播列表 */
.home-flashsale .flashsale-list{
float: left;
}
.flashsale-list .show_banner{
width: 992px;height: 340px;
overflow: hidden; position: relative;
}
.home-flashsale .flashsale-list ul {
margin: 0;
padding: 0;width: 3000px;
height: 340px;
}
.home-flashsale .flashsale-list li {
float:left;
width: 234px;
margin-left: 14px;
border-top-width: 1px;
border-top-style: solid;
text-align: center;
background: #fff;
list-style: none;
border-top-color: #b3d8f6;
}
.home-flashsale .flashsale-list li:hover{
margin-left: 12px; margin-top:-5px;
-webkit-transition: all .2s;
transition: all .2s;
box-shadow: 1px 6px 8px rgb(0 0 0 / 10%);
}
.home-flashsale .flashsale-list li img{
width: 160px;height: 160px;
margin: 39px auto 22px;
}
.title{
margin: 0 20px 3px;
font-size: 14px;
font-weight: 400;
text-overflow: ellipsis;
color: #212121;
overflow: hidden;
white-space: nowrap;
}
.desc{
text-align: center;
height: 18px;
margin: 0 20px 12px;
font-size: 12px;
text-overflow: ellipsis;
color: #b0b0b0;
overflow: hidden;
white-space: nowrap;
}
.price {
text-align: center;
margin-bottom: 19px;
color: #ff6709;
}
.price del{
text-align: center;
text-align: center;
padding-left: 5px;color: #afafaf;
}
.show_banner>span{
width:40px;
height:40px;
color:white;
position: absolute;
font-size:20px;
text-align: center;
line-height: 40px;
background:rgba(0,0,0,0.4);
top:50%;
margin-top:-20px;
display: none;
}
.show_banner>span:hover{
background:rgba(0,0,0,0.8);
}
.show_banner:hover>span{
display: block;
}
.show_banner>#left{
left:0px;
border-radius: 0px 20px 20px 0px;
}
.show_banner>#right{
right:0px;
border-radius: 20px 0px 0px 20px;
}
.show_banner>#circular{
width:100px;
overflow: hidden;
background:rgba(255,255,255,0.3);
position: absolute;
left:50%;
bottom:30px;
padding:8px 0px 8px 10px;
border-radius: 50px;
transform: translate(-50%,0px);
}
.show_banner>#circular>li{
width:10px;
height:10px;
border-radius: 50%;
background:white;
list-style: none;
float: left;
margin-right:10px;
}
/* 结束 */
/* 第3.2部分 --> */
.home-banner-box {
height: 120px;
margin: 22px 0;
overflow: hidden;
width:100%;
}
.home-banner-box img {
margin-top:20px;
width: 1226px;
height: 120px;
}
.home-brick-box{
position: relative;
margin-bottom: 8px;
}
.home-brick-box .box-hd .more{
position: absolute;
top: 0;
right: 0px;
}
.box-hd .more a{
font-size: 16px;
line-height: 58px;
text-align: center;
color: #424242;
}
.home-brick-box .row{
position: relative;
}
.span44{float: left;background-color: green;
width: 234px;
min-height: 1px;
}
.span44 img{
margin-bottom: 14px;;
}
.brick-list{
height: 614px;
}
.span116{
width: 992px;
float: left;
}
.span116 ul li{position: relative;
width: 234px;height: 300px;float: left;
margin-left:14px;margin-bottom: 14px;
}
.span116 ul li:hover{
margin-left:14px;margin-top: -5px;
box-shadow: 0 7px 9px rgb(0 0 0 / 10%);
transition: all .2s;
}
.span116 ul li img{
width: 180px;height: auto;
margin:28px 27px 22px;
}
.span116 ul li .title2{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
margin: 0 13px 0px;
font-size: 14px;
font-weight: 400;
color: #333;
text-align: center;
}
.span166 ul li .desc{
text-align: center;
line-height: 20px;
text-align: center;
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
color: #b0b0b0;
}
/*返回顶部的bar*/
.topBar{
position: fixed;
bottom: 80px;right:10px;
width: 90px;height: 540px;
}
.topBar a{display: block;
width: 90px;height: 100px;border-bottom: 2px solid #f5f5f5;
background-color: #ffffff;
}
.topBar img{margin-left:25px;margin-top:20px;
width: 36px;height: 36px;
}
.topBar img:hover{
background-color: #ff6a00;
}
.topBar .ewm{
width: 100px;height: auto;display: none;
position: absolute;right: 100px;top:-20px;
border:1px solid #cccccc;
}
.topBar .ewm_b:hover>.ewm{
display: block;
}
.topBar span{color:#a4a4a4;
line-height: 21px;text-align: center;padding-left:12px;
}
.topBar span:hover{
color:#ff6a00;
}
总结
1.新学习到的知识点：
1.可以设置一个Class给所有模块居中 margin-right: auto;margin-left: auto;
.container {
width: 1226px;
margin-right: auto;
margin-left: auto;
}
2.给块设置宽高，当块中文字内容溢出时，可以使用text-overflow: ellipsis;
overflow: hidden;将文字内容以省略号形式隐藏
.site-category .category-item-detail li span{
float: left;
width: 80px;
line-height: 74px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
实现效果：
百度一下overflow有三个属性text-overflow: clip | ellipsis | string;其作用分别为
3.实现点击浮动可以使用css3(CSS3有很多好看的特效，值得学习）
-webkit-transition: all .2s;
transition: all .2s;
表示该模块发生改变时的速度，可以给其 添加定位，进行位置的移动
4.阴影
box-shadow: 0 3px 4px rgb(0 0 0 / 18%);
box-shadow: offsetx,offsetY, 模糊程度，阴影长度，颜色。
每天练习一点点，菜鸟变大牛！