标签：网页 margin nbsp height width html 高仿 小米 left
实现的地址：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, 模糊程度，阴影长度，颜色。
每天练习一点点，菜鸟变大牛！
标签：网页,margin,nbsp,height,width,html,高仿,小米,left 来源： https://blog.csdn.net/yingshuangtu/article/details/118268816
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。