页面效果展示
源代码
#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>
<!-- 引入写好的css -->
<link rel="stylesheet" href="./css/index.css" />
<!-- 引入公共部分的css -->
<link rel="stylesheet" href="./css/common.css" />
<!-- 引入重置的css -->
<link rel="stylesheet" href="./css/resete.css" />
<!-- 下载好字体图标，把字体图标的css复制到项目的css，然后引入字体的css -->
<link rel="stylesheet" href="./css/iconfont.css">
<!-- 插入字体图标也可以引入在线字体图标链接,这样之前的字体文件就可以从项目中删除了，包括字体图标的css,字体图标的文件夹都可以删除，但是html里面的.iconfont和后面的字体图标类要保留，不能删除 -->
<!-- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3663768_puid5k4h5w.css"> -->
<!-- 设置打开网页时候标题的logo -->
<link rel="icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon" />
</head>
<body>
<!-- 顶部导航开始 -->
<div class="top-nav">
<div class="container">
<div class="left-nav">
<a href="#">小米商城 </a>
<span> </span>
<a href="#">MIUI </a>
<span>|</span>
<a href="#">IoT </a>
<span>|</span>
<a href="#">云服务 </a>
<span>|</span>
<a href="#">天星数科 </a>
<span>|</span>
<a href="#">有品 </a>
<span>|</span>
<a href="#">小爱开放平台 </a>
<span>|</span>
<a href="#">企业团购 </a>
<span>|</span>
<a href="#">资质证照 </a>
<span>|</span>
<a href="#">协议规则 </a>
<span>|</span>
<a href="#" class="download-app"
>下载app
<div class="download">
<img src="./img/download.png" alt="" />
<h5>小米商城APP</h5>
</div>
</a>
<span>|</span>
<a href="#">Select Locati</a>
</div>
<!-- 顶部导航右侧部分 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-gouwuche"></span>
购物车（ <span>0</span> ）
<div class="cart-list">购物车中还没有商品，赶紧选购吧！</div>
</a>
</div>
<div class="userinfo">
<a href="#">登录</a><span>|</span> <a href="#">注册</a><span>|</span>
<a href="#">消息通知 </a>
</div>
</div>
</div>
<!-- 顶部导航结束 -->
<!-- 白色导航开始 -->
<div class="white-nav">
<div class="container">
<div class="logo">
<a href="#" class="logo-a">
<img src="./img/logo-mi2.png" alt="" class="logo-img" />
</a>
</div>
<div class="nav-content">
<a href="#">全部商品分类</a>
<!-- 全部商品分类下面有一个展开图 -->
<!-- 点开展开图的文字右边就会有滑动滑动门的内容 -->
<div class="site-category">
<ul>
<li>
<a href="#">手机 <span class="iconfont icon-youjiantou
"></span></a>
<div class="slider-container">
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
</div>
</li>
<li>
<a href="#">电视 <span class="iconfont icon-youjiantou
"></span></a>
<div class="slider-container">
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
</div>
</li>
<li>
<a href="#">笔记本 平板 <span class="iconfont icon-youjiantou
"></span></a>
<div class="slider-container">
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
<ul>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
<li>
<a href="#"
><img src="./img/huadongmen.png" alt="" /><span
>xiaomi minx4</span
></a
>
</li>
</ul>
</div>
</li>
<li>
<a href="#">出行 穿戴 <span class="iconfont icon-youjiantou
"></span></a>
</li>
<li>
<a href="#">耳机 音箱 <span class="iconfont icon-youjiantou
"></span></a>
</li>
<li>
<a href="#">家电 <span class="iconfont icon-youjiantou
"></span></a>
</li>
<li>
<a href="#">智能 路由器 <span class="iconfont icon-youjiantou
"></span></a>
</li>
<li>
<a href="#">电源 配件 <span class="iconfont icon-youjiantou
"></span></a>
</li>
<li>
<a href="#">健康 儿童 <span class="iconfont icon-youjiantou
"></span></a>
</li>
<li>
<a href="#">生活 箱包 <span class="iconfont icon-youjiantou
"></span></a>
</li>
</ul>
</div>
<a href="#">Xiaomi手机</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">Redmi手机</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/redmi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">电视</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/tv.jpgpng" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">笔记本</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/bijiben.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">平板</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/pingban.jpeg" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/nav-container.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">家电</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/jiadian.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/jiadian.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/jiadian.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/jiadian.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/jiadian.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/jiadian.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">路由器</a>
<div class="nav-menu">
<div class="nav-container">
<ul>
<li>
<a href="">
<div><img src="./img/lluyouqi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/lluyouqi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/lluyouqi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/lluyouqi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/lluyouqi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
<li>
<a href="">
<div><img src="./img/lluyouqi.png" alt="" /></div>
<div>Xiaomi手机12 PRO</div>
<p>1999元起</p>
</a>
</li>
</ul>
</div>
</div>
<a href="#">服务中心</a>
<a href="#">社区</a>
</div>
<!-- 白色导航搜索区 -->
<div class="search">
<form action="">
<input type="text" class="search-content" placeholder="红米" />
<div class="keywords-list">
<ul>
<li><a href="#">全部商品</a></li>
<li><a href="#">红米</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">黑鲨5</a></li>
<li><a href="#">冰箱</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">洗衣机</a></li>
<li><a href="#">Redmi G2021</a></li>
</ul>
</div>
<input type="submit" class="search-button iconfont" value="
" />
</form>
</div>
</div>
</div>
<!-- 白色导航结束 -->
<!-- 白色导航下面的轮播图开始 -->
<div class="carousel">
<div class="container">
<img src="./img/carousel.jpg" alt="" />
<!-- 左箭头 -->
<div class="arrow-left iconfont icon-zuojiantou"></div>
<!-- 右箭头 -->
<div class="arrow-right iconfont icon-youjiantou3"></div>
<!-- 导航原点 -->
<div class="dots">
<a href=""></a>
<a href="" class="active"></a>
<a href=""></a>
<a href=""></a><a href=""></a>
</div>
</div>
</div>
<!-- 白色导航下面的轮播图结束 -->
<!-- 新品栏开始 -->
<div class="new-channel">
<div class="container">
<div class="channel-list">
<ul>
<li class="right bottom">
<a href=""
><span class="iconfont icon-shizhong"></span>
<span class="desc">保障服务</span></a
>
</li>
<li class="right bottom">
<a href=""
><span class="iconfont icon-jianzhu_o"></span>
<span class="desc">保障服务</span></a
>
</li>
<li class="bottom">
<a href=""
><span class="iconfont icon-yingbi"></span>
<span class="desc">保障服务</span></a
>
</li>
<li class="right">
<a href=""
><span class="iconfont icon-z_nav_icon_SIM_nor
"></span>
<span class="desc">保障服务</span></a
>
</li>
<li class="right">
<a href=""
><span class="iconfont icon-rmb"></span>
<span class="desc">保障服务</span></a
>
</li>
<li>
<a href=""
><span class="iconfont icon-chongzhi"></span>
<span class="desc">保障服务</span></a
>
</li>
</ul>
</div>
<div class="new-product">
<a href=""><img src="./img/new-product.jpg" alt="" /></a>
</div>
<div class="new-product">
<a href=""><img src="./img/new-product.jpg" alt="" /></a>
</div>
<div class="new-product">
<a href=""><img src="./img/new-product.jpg" alt="" /></a>
</div>
</div>
</div>
<!-- 新品栏结束 -->
<!-- /* 主页主题内容page-body开始 */ -->
<div class="page-body">
<div class="container">
<!-- 新闻图片开始 -->
<div class="img-news">
<a href=""><img src="./img/12s-ultra.jpg" alt="" /></a>
</div>
<!-- 新闻图片结束 -->
<!-- 板块标题开始 -->
<div class="box-title">
<div class="title">
<h2>手机</h2>
</div>
<div class="remark">
<a href="#" class="highlight"
>查看更多
<span class="iconfont icon-youjiantou1"></span>
</a>
</div>
</div>
<!-- 手机板块下面的大的商品板块开始 -->
<div class="area">
<div class="sidebar move">
<a href="#"><img src="./img/sidebar.jpg" alt="" /> </a>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/mid.png" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
</div>
</div>
<!-- 手机板块下面的大的商品板块结束 -->
<!-- 智能穿戴板块开始 -->
<div class="box-title">
<div class="title">
<h2>智能穿戴</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">热门</a></li>
<li><a href="#">穿戴</a></li>
</ul>
</div>
</div>
<!-- 智能穿戴板块下面的商品板块开始 -->
<div class="area">
<!-- 商品板块左侧开始 -->
<div class="sidebar transparent">
<div class="sidebar move">
<a href="#"><img src="./img/zhinengchuandai.jpg" alt="" /> </a>
</div>
</div>
<!-- 商品板块左侧结束 -->
<!-- 商品板块右侧开始 -->
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/earphone.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!--这个下面的商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
<!-- 商品板块右侧结束 -->
</div>
<!-- 智能穿戴板块下面的商品板块结束 -->
<div class="box-title">
<div class="title">
<h2>笔记本 | 平板</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">热门</a></li>
</ul>
</div>
</div>
<!-- 笔记本平下面的商品板块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/jiadiantop.jpg" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/jiadianbottom.jpg" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!--最后一个下面的商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 笔记本平下面的商品板块结束 -->
<!-- 家电板块 -->
<div class="box-title">
<div class="title">
<h2>家电</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">热门</a></li>
<li><a href="#">电视影音</a></li>
</ul>
</div>
</div>
<!-- 家电板块结束 -->
<!-- 家电板块下面的商品板块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/jiadiantop.jpg" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/jiadianbottom.jpg" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/tv.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!--家电板块下面的商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 家电板块下面的商品板块结束 -->
<!-- 生活电器板块 -->
<div class="box-title">
<div class="title">
<h2>生活电器</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">扫地机</a></li>
<li><a href="#">空净</a></li>
<li><a href="#">清洁</a></li>
<li><a href="#">风扇</a></li>
</ul>
</div>
</div>
<!-- 生活电器板块结束 -->
<!-- 生活电器板块下面的商品板块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!--家电板块下面的商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 生活电器板块下面的商品板块结束 -->
<!-- 智能家居板块 -->
<div class="box-title">
<div class="title">
<h2>智能家居</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">小爱音箱</a></li>
<li><a href="#">门锁</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能设备</a></li>
</ul>
</div>
</div>
<!-- 智能家居板块下面的商品模块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!-- 这个商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 智能家居板块下面的商品模块结束 -->
<!-- 运动出行板块 -->
<div class="box-title">
<div class="title">
<h2>运动出行</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">平衡车/滑板车</a></li>
<li><a href="#">运动健身</a></li>
<li><a href="#">箱包配饰</a></li>
<li><a href="#">出行工具</a></li>
</ul>
</div>
</div>
<!-- 板块标题结束 -->
<!-- 运动出行板块下面的商品板块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!-- 这个商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 运动出行板块下面的商品板块结束 -->
<div class="img-news">
<a href=""><img src="./img/zhaguo.png" alt="" /></a>
</div>
<!-- 厨房电器板块 -->
<div class="box-title">
<div class="title">
<h2>厨房电器</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">净水器</a></li>
<li><a href="#">烟灶</a></li>
<li><a href="#">电饭煲</a></li>
<li><a href="#">微蒸烤</a></li>
</ul>
</div>
</div>
<!-- 厨房电器板块下面的商品板块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!-- 这个商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 厨房电器板块下面的商品板块结束 -->
<div class="img-news">
<a href=""><img src="./img/zhongxingbi.jpg" alt="" /></a>
</div>
<!-- 日用百货板块 -->
<div class="box-title">
<div class="title">
<h2>日用百货</h2>
</div>
<div class="remark">
<ul>
<li><a href="#" class="highlight">个护健康</a></li>
<li><a href="#">电源线材</a></li>
<li><a href="#">儿童用品</a></li>
<li><a href="#">家居床品</a></li>
</ul>
</div>
</div>
<!-- 日用百货板块 -->
<!-- 日用百货板块下面的商品板块开始 -->
<div class="area">
<div class="sidebar transparent">
<div class="sidebar-top move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
<div class="sidebar-bottom move">
<a href=""><img src="./img/shdq.png" alt="" /></a>
</div>
</div>
<div class="right-side">
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<div class="mid move">
<a href="#">
<img src="./img/shdq1.jpg" alt="" />
<h3>Xiaomi MIX Fold 2</h3>
<p>轻薄折叠机身设计，小米自研微水</p>
<p>8999元起</p>
</a>
</div>
<!-- 这个商品板块最后一个是上下两张图片 -->
<div class="mid transparent">
<div class="mid-top move">
<a href="#">
<div class="gas-cooker">
<img src="./img/mid-top.jpg" alt="" />
</div>
<h3 class="title">小米电视 EA50 2022款</h3>
<p class="price">2999元</p>
</a>
</div>
<div class="mid-bottom move">
<a href="#" class="h143">
<div class="iconfont icon-youjiantou2"><span></span></div>
<div class="more">
浏览更多
<small>热门</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 日用百货板块下面的商品板块结束 -->
<!-- 视频板块开始 -->
<div class="box-title">
<div class="title">
<h2>视频</h2>
</div>
<div class="remark">
<a href="#"
>查看全部
<span class="iconfont icon-youjiantou1"></span>
</a>
</div>
</div>
<!-- 视频板块下面的几个图片开始 -->
<div class="video-area">
<div class="video-box">
<a href="#">
<div class="play-btn">
<img src="./img/video.jpg" alt="" />
<div class="play">
<span class="iconfont icon-shipinbofangshibofang"></span>
</div>
</div>
<h3 class="title">2021年春季新品发布会第一场</h3>
<p class="desc">Redmi 10X系列发布会</p>
</a>
</div>
<div class="video-box">
<a href="#">
<div class="play-btn">
<img src="./img/video.jpg" alt="" />
<div class="play">
<span class="iconfont icon-shipinbofangshibofang"></span>
</div>
</div>
<h3 class="title">2021年春季新品发布会第一场</h3>
<p class="desc">Redmi 10X系列发布会</p>
</a>
</div>
<div class="video-box">
<a href="#">
<div class="play-btn">
<img src="./img/video.jpg" alt="" />
<div class="play">
<span class="iconfont icon-shipinbofangshibofang"></span>
</div>
</div>
<h3 class="title">2021年春季新品发布会第一场</h3>
<p class="desc">Redmi 10X系列发布会</p>
</a>
</div>
<div class="video-box">
<a href="#">
<div class="play-btn">
<img src="./img/video.jpg" alt="" />
<div class="play">
<span class="iconfont icon-shipinbofangshibofang"></span>
</div>
</div>
<h3 class="title">2021年春季新品发布会第一场</h3>
<p class="desc">Redmi 10X系列发布会</p>
</a>
</div>
</div>
</div>
</div>
<!-- /* 主页主体内容page-body结束 */ -->
<!-- 页面底部开始 -->
<div class="site-footer">
<div class="container">
<div class="footer-service">
<ul>
<li>
<a href="" class="iconfont icon-editor2">
<span>预约维修服务</span></a>
</li>
<li>
<a href="" class="iconfont icon-7tianwuliyoutuihuo
"><span>7天无理由</span></a>
</li>
<li>
<a href="" class="iconfont icon-15tianwuliyoutuihuo
"><span>15天无理由换货</span></a>
</li>
<li>
<a href="" class="iconfont icon-liwu"><span>满69元包邮</span></a>
</li>
<li>
<a href="" class="iconfont icon-31dingwei"><span>1100余家售后网点</span></a>
</li>
</ul>
</div>
<div class="footer-links">
<dl class="col-links">
<dt>选购指南</dt>
<dd><a href="#">手机</a></dd>
<dd><a href="#">电视</a></dd>
<dd><a href="#">笔记本</a></dd>
<dd><a href="#">平板</a></dd>
<dd><a href="#">穿戴</a></dd>
<dd><a href="#">耳机</a></dd>
<dd><a href="#">家电</a></dd>
<dd><a href="#">路由器</a></dd>
<dd><a href="#">音箱</a></dd>
<dd><a href="#">配件</a></dd>
</dl>
<dl class="col-links">
<dt>服务中心</dt>
<dd><a href="#">申请售后</a></dd>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">维修服务价格</a></dd>
<dd><a href="#">订单查询</a></dd>
<dd><a href="#">以旧换新</a></dd>
<dd><a href="#">保障服务</a></dd>
<dd><a href="#">防伪查询</a></dd>
<dd><a href="#">F码通道</a></dd>
</dl>
<dl class="col-links">
<dt>线下门店</dt>
<dd><a href="#">小米之家</a></dd>
<dd><a href="#">服务网点</a></dd>
<dd><a href="#">授权体验店/专区</a></dd>
</dl>
<dl class="col-links">
<dt>关于小米</dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
</dl>
<dl class="col-links">
<dt>关注我们</dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
</dl>
<dl class="col-links">
<dt>特色服务</dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">了解小米</a></dd>
</dl>
<!-- site-footer的右边部分 -->
<div class="col-contact">
<p class="phone">400-100-5678</p>
<p class="comment">8:00-18:00(仅收市话费)</p>
<a href="#" class="service">
<span class="iconfont icon-xiaoxi"></span>
人工客服
</a>
<div class="follow">
关注小米：
<a href="#"><span class="iconfont icon-sina"></span></a>
<a href="#" class="wx"><span class="iconfont icon-weixin"></span></a>
<img class="wx" src="./img/download.png" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- 页面底部的最下面一个部分 -->
<div class="site-info">
<div class="container">
<!-- 左边的小米logo -->
<img src="./img/logo-mi2.png" class="logo" alt="" />
<!-- 右边的文字部分 -->
<div class="info-text">
<!-- 第一个p标签 -->
<p>
<a href="#">小米商城 </a>
<span>|</span>
<a href="#"> MIUI </a>
<span>|</span>
<a href="#"> 米家 </a>
<span>|</span>
<a href="#"> 米聊 </a>
<span>|</span>
<a href="#"> 多看 </a>
<span>|</span>
<a href="#"> 游戏 </a>
<span>|</span>
<a href="#"> 政企服务 </a>
<span>|</span>
<a href="#"> 小米天猫店 </a>
<span>|</span>
<a href="#"> 小米集团隐私政策 </a>
<span>|</span>
<a href="#"> 小米公司儿童信息保护规则 </a>
<span>|</span>
<a href="#"> 小米商城隐私政策 </a>
<span>|</span>
<a href="#"> 小米商城用户协议 </a>
<span>|</span>
<a href="#"> 问题反馈 </a>
<span>|</span>
<a href="#"> Select Location</a>
</p>
<!-- 第二个p标签 -->
<p>
<a href="">北京互联网法院法律服务工作站</a>
<span>|</span>
<a href="">中国消费者协会</a>
<span>|</span>
<a href="">北京市消费者协会</a>
</p>
<!-- 第三个p标签 -->
<p class="comment">
<a href="#"> © mi.com </a>
<a href="#"> 京ICP证110507号 </a>
<a href="#"> 京ICP备10046444号 </a>
<a href="#"> 京公网安备11010802020134号 </a>
<a href="#"> 京网文[2020]0276-042号 </a> <br />
<a href="#"> （京）网械平台备字（2018）第00005号 </a>
<a href="#"> 互联网药品信息服务资格证 </a>
<a href="#"> (京)-非经营性-2014-0090 </a>
<a href="#"> 营业执照 </a>
<a href="#"> 医疗器械质量公告 </a> <br />
<a href="#"> 增值电信业务许可证 </a>
<a href="#"> 网络食品经营备案 </a>
<a href="#"> 京食药网食备202010048 </a>
<a href="#"> 食品经营许可证 </a> <br />
<a href="#"> 违法和不良信息举报电话：171-5104-4404 </a>
<a href="#"> 知识产权侵权投诉 </a>
<a href="#">
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</a>
</p>
</div>
<!-- 最下面的5张图片 -->
<div class="info-links">
<a href=""><img src="./img/truste.png" alt="" /></a>
<a href=""><img src="./img/truste.png" alt="" /></a>
<a href=""><img src="./img/truste.png" alt="" /></a>
<a href=""><img src="./img/truste.png" alt="" /></a>
<a href=""><img src="./img/truste.png" alt="" /></a>
</div>
<!-- 底部最后一个slogan -->
<div class="slogan">
<img src="./img/slogan2020.png" alt="" />
</div>
</div>
</div>
<!-- 页面底部結束 -->
<!-- 侧边工具条开始 -->
<!-- 侧边工具条结束 -->
<div class="side-toolbar">
<a href="">
<div class="iconfont icon-shouji"></div>
<span>手机APP</span>
<!-- 鼠标点进去的时候，这个二维码显示，其他时候隐藏 -->
<div class="wx-code">
<div class="arrow"></div>
<img src="./img/wx-code.png" alt="" />
<span>扫码领取新人百元礼包</span>
</div>
<!-- 二维码结束 -->
</a>
<a href="">
<div class="iconfont icon-yonghu"></div>
<span>个人中心</span>
</a>
<a href="">
<div class="iconfont icon-editor2"></div>
<span>售服务</span>
</a>
<a href="">
<div class="iconfont icon-kefu"></div>
<span>人工客服</span>
</a>
<a href="">
<div class="iconfont icon-gouwuche"></div>
<span>购物车</span>
</a>
<a href="">
<div class="iconfont icon-fanhuidingbu
"></div>
<span>回顶部</span>
</a>
</div>
</body>
</html>
#公共部分 CSS代码
body {
min-width: 1226px;
}
.container {
width: 1226px;
margin: 0 auto;
}
/* 顶部导航开始 */
.top-nav {
width: 100%;
height: 40px;
background-color: #333;
}
.top-nav .container .left-nav a,
.top-nav .container .left-nav span {
float: left;
line-height: 40px;
}
.top-nav .container .cart,
.top-nav .container .userinfo a,
.top-nav .container .left-nav a {
color: #b0b0b0;
line-height: 40px;
}
.top-nav .container .cart:hover,
.top-nav .container .userinfo a:hover,
.top-nav .container .left-nav a:hover {
color: #fff;
}
.top-nav .container .left-nav span {
color: #424242;
margin: 0 3.6px;
}
/* 顶部导航右侧 */
.top-nav .container .left-nav a.download-app {
position: relative;
}
.top-nav .container .left-nav a.download-app .download {
width: 124px;
height: 148px;
/* background-color: orange; */
box-shadow: 0 1px 5px #aaa;
position: absolute;
left: 50%;
margin-left: -62px;
text-align: center;
padding-top: 15px;
/* download下面的文字样式 */
color: #000;
line-height: 14px;
font-size: 14px;
/* 默认隐藏 */
display: none;
z-index: 20;
/* 解决二维码被后面的文字覆盖了 */
background-color: #fff;
}
/*默认是隐藏的， 鼠标移入的时候，它下面的.download显示 */
.top-nav .container .left-nav a.download-app:hover::before,
.top-nav .container .left-nav a.download-app:hover .download {
display: block;
}
/* 制作二维码上面的小三角形 */
.top-nav .container .left-nav a.download-app::before {
content: "";
display: block;
width: 0;
height: 0;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
/* 把 三角形 放到父级的最下面 */
position: absolute;
bottom: 0;
left: 50%;
margin-left: -4px;
display: none;
}
.top-nav .container .left-nav .download img {
width: 90px;
height: 90px;
margin-bottom: 12px;
}
.top-nav .container .userinfo,
.top-nav .container .cart {
float: right;
}
.top-nav .container .cart {
margin-left: 20px;
line-height: 40px;
text-align: center;
width: 120px;
height: 40px;
/* background-color: #fff; */
}
.top-nav .container .cart,
.top-nav .container .userinfo {
display: inline-block;
}
.top-nav .container .cart a {
display: inline-block;
color: #b0b0b0;
}
.top-nav .container .cart a:hover {
color: #ffb452;
font-weight: bold;
}
.top-nav .container .cart:hover {
background-color: #fff;
}
.top-nav .container .cart:hover .cart-list {
display: block;
z-index: -100;
}
div.cart {
position: relative;
}
div.cart div.cart-list {
display: inline-block;
z-index: -100px;
width: 316px;
height: 100px;
position: absolute;
right: 0px;
line-height: 100px;
box-shadow: 0 10px 10px rgb(0 0 0/15%);
display: none;
background-color: #fff;
}
/* 顶部导航结束 */
/* 白色导航区域开始 */
div.white-nav {
width: 100%;
height: 100px;
}
div.white-nav div.logo,
div.white-nav div.nav-content {
float: left;
}
div.white-nav div.search {
float: right;
}
div.white-nav .logo a.logo-a {
display: inline-block;
position: relative;
width: 56px;
height: 100px;
}
div.white-nav .logo {
margin-right: 64px;
}
div.white-nav .logo img.logo-img {
width: 56px;
height: 56px;
position: absolute;
top: 50%;
margin-top: -28px;
}
div.white-nav .nav-content {
height: 100px;
line-height: 100px;
}
div.white-nav .nav-content a {
padding: 0 10px;
height: 100px;
display: inline-block;
font-size: 14px;
color: #333333;
}
/* 白色导航区域的右边部分搜索区 */
div.white-nav div.search {
width: 296px;
height: 100px;
}
div.white-nav div.search input.search-content {
border: 1px solid #e0e0e0;
padding: 0 10px;
width: 245px;
height: 50px;
float: left;
}
div.white-nav div.search input.search-button {
width: 52px;
height: 50px;
border: 1px solid #e0e0e0;
float: left;
margin-left: -1px;
font-size: 18px;
font-weight: 900;
}
/* 白色导航区域右边的搜索框 */
div.white-nav div.container div.search input.search-button:hover {
background-color: #ff6700;
border: 1px solid #ff6700;
color: #fff;
}
div.white-nav div.search {
position: relative;
}
div.white-nav div.search form {
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
/* z-index: -100; */
}
div.white-nav div.search form:hover .search-content,
div.white-nav div.search form:hover .search-button {
border-color: #b0b0b0;
}
/* 点击搜索框，展开热词搜索 */
div.white-nav div.search .keywords-list {
width: 245px;
height: 242px;
background-color: #fff;
position: absolute;
top: 50px;
border: 1px solid #ff6700;
margin-top: -1px;
display: none;
z-index: 20;
}
/* 下拉列表默认隐藏的，当鼠标聚焦input框的时候，旁边的keywords-list显示 */
div.white-nav div.search form:hover .search-content:focus + div.keywords-list {
display: block;
}
div.white-nav div.search form:hover .search-content:focus,
div.white-nav
div.search
form:hover
.search-content:focus
~ input.search-button {
border: 1px solid #ff6700;
}
div.white-nav div.search .keywords-list ul li {
width: 243px;
height: 30px;
}
div.white-nav div.search .keywords-list ul li:hover {
background-color: #fafafa;
}
div.white-nav div.search .keywords-list ul li a {
width: 243px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #424242;
padding-left: 15px;
}
/* 白色导航搜索区结束 */
/* 点击全部商品分类旁边的文字，会有下拉框 */
div.nav-menu {
width: 100%;
height: 230px;
position: absolute;
left: 0;
box-shadow: 0 3px 4px rgb(0 0 0 / 18%);
border-top: 1px solid #e0e0e0;
display: none;
background-color: #fff;
z-index: 20;
}
/* div.nav-menu默认是隐藏的，当鼠标移入nav-content下面的a标签的时候，显示 */
div.white-nav .container .nav-content div.nav-menu:hover,
div.white-nav .container .nav-content a:hover + div.nav-menu {
display: block;
}
/* 鼠标移入，变颜色 */
div.white-nav .container .nav-content a:hover {
color: #ff6700;
}
/* 全部商品分类这几个字默认是隐藏的，位置还在 */
div.white-nav .container .nav-content > a:nth-child(1) {
visibility: hidden;
}
div.nav-menu div.nav-container {
width: 1226px;
height: 230px;
/* background-color: rgb(79, 78, 78); */
margin: 0 auto;
}
div.nav-menu div.nav-container ul li {
width: 204px;
height: 230px;
/* background-color: olivedrab; */
float: left;
text-align: center;
}
div.nav-menu div.nav-container ul li img {
width: 160px;
height: 110px;
}
/* 图片下面的文字 */
div.nav-menu div.nav-container ul li a div:nth-child(2) {
line-height: 20px;
font-size: 12px;
color: #333;
}
/* 调整图片 */
div.nav-menu div.nav-container ul li a div:nth-child(1) {
height: 110px;
margin-bottom: 15px;
border-right: 1px solid #e0e0e0;
}
div.nav-menu div.nav-container ul li a p {
line-height: 20px;
color: #ff6700;
font-size: 12px;
}
div.nav-menu div.nav-container ul li a {
width: 204px;
height: 230px;
padding-top: 35px;
}
div.nav-menu div.nav-container ul li:last-child a div:nth-child(1) {
border-right: none;
}
/* 白色导航区结束 */
div.site-category {
width: 234px;
height: 460px;
position: absolute;
left: 50%;
z-index: 10;
margin-left: -613px;
background-color: #999b99;
}
div.site-category ul {
/* background-color: #a5a3a3; */
padding: 20px 0;
}
div.site-category ul li {
width: 234px;
height: 42px;
line-height: 40px;
}
/* 对a标签里面的文字进行修改样式 */
div.white-nav .container .nav-content .site-category ul li a {
color: #fff;
padding-left: 30px;
line-height: 40px;
font-size: 14px;
}
/* 对a标签里面的文字后面的字体图标改变样式 */
div.white-nav .container .nav-content .site-category ul li {
position: relative;
}
div.white-nav .container .nav-content .site-category ul li span {
color: #fff;
font-size: 16px;
position: absolute;
right: 20px;
}
div.white-nav .container .nav-content .site-category ul li:hover {
background-color: #ff6700;
}
/* 滑动门 */
div.site-category .slider-container {
width: 994px;
height: 460px;
border: 1px solid #e0e0e0;
box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
position: absolute;
left: 234px;
top: -18px;
/* 默认隐藏 */
display: none;
background-color: #fff;
}
/*鼠标移入的时候，显示 */
div.white-nav
.container
.nav-content
.site-category
ul
li:hover
.slider-container {
display: block;
}
div.site-category .slider-container ul {
width: 248px;
height: 460px;
float: left;
padding: 0;
}
div.site-category .slider-container ul li {
width: 248px;
height: 76px;
/* background-color: orange; */
}
div.white-nav
.container
.nav-content
div.site-category
.slider-container
ul
li
a {
width: 248px;
height: 76px;
padding: 0 20px;
line-height: 76px;
}
div.white-nav
.container
.nav-content
div.site-category
.slider-container
ul
li
a
img {
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: 12px;
}
div.white-nav
.container
.nav-content
div.site-category
.slider-container
ul
li
a
span {
color: #000;
}
/* 只要加了这个类，鼠标移进去以后，就会发生变化 */
div.move:hover {
/* 加阴影 */
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
/* 向上移动 */
transform: translate3d(0, -2px, 0);
}
/* 页面底部开始 */
/* 总的轮廓 */
div.site-footer {
/* 高度靠内容撑起来，先写死，后期修改 */
height: 500px;
background-color: #fff;
}
/* site-footer下面的部分 */
div.footer-service {
width: 1226px;
height: 80px;
/* background-color: orange; */
padding-top: 27px;
border-bottom: 1px solid #e0e0e0;
}
div.footer-service ul {
height: 25px;
}
div.footer-service ul li {
float: left;
width: 245px;
text-align: center;
border-right: 1px solid #e0e0e0;
}
div.footer-service ul li:last-child {
border-right: 1px solid transparent;
}
div.footer-service ul li a {
display: block;
height: 25px;
color: #616161;
font-size: 16px;
line-height: 25px;
}
div.footer-service ul li a:hover {
color: #f25807;
}
/* site-footer里面的footer-links部分 */
div.site-footer div.footer-links {
padding-top: 40px;
padding-bottom: 40px;
/* 先写死，后期靠内容撑起来再修改 */
/* height: 420px; */
width: 1226px;
/* background-color: olive; */
}
/* 用添加伪类的办法，解决由浮动造成的父元素塌陷问题 */
div.site-footer div.footer-links::after {
content: "";
display: block;
clear: both;
}
dl.col-links {
width: 160px;
/* 这里的高也是先写死 */
/* height: 340px; */
/* background-color: orange; */
float: left;
}
dl.col-links dt {
margin: -1px 0 26px 0;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
dl.col-links dd {
color: #757575;
font-size: 12px;
margin-top: 10px;
}
dl.col-links dd a {
color: #757575;
}
dl.col-links dd a:hover {
color: #ff6700;
}
/* 页面底部右侧开始 */
div.col-contact {
width: 230px;
/* 高度先写死 */
/* height: 111px; */
position: relative;
text-align: center;
left: 5px;
/* background-color: orangered; */
float: right;
border-left: 1px solid #e0e0e0;
}
div.col-contact p.phone {
font-size: 22px;
line-height: 1;
color: #ff6700;
margin-bottom: 10px;
}
div.col-contact p.comment {
font-size: 12px;
line-height: 1;
color: #616161;
margin-bottom: 10px;
}
div.col-contact a.service {
display: inline-block;
border: 1px solid #b0b0b0;
border-color: #ff6700;
font-size: 12px;
background: #fff;
color: #ff6700;
margin-bottom: 10px;
width: 130px;
height: 30px;
line-height: 28px;
text-align: center;
transition: all 0.4s;
}
div.col-contact a:hover {
background-color: #f25807;
color: #fafafa;
}
div.col-contact div.follow {
font-size: 12px;
margin-top: 10px;
text-align: center;
color: #616161;
position: relative;
}
div.col-contact div.follow img.wx {
width: 126px;
height: 126px;
position: absolute;
top: 20px;
left: 100px;
/* 这个二维码默认是隐藏的 */
display: none;
}
div.col-contact div.follow a.wx:hover + img.wx {
display: block;
}
/* 底部区域的的site-info部分 */
div.site-info {
/* 高度靠内容撑起来，先写死，后期修改 */
width: 100%;
height: 266px;
background-color: #fafafa;
/* padding指的是自身内容到自身边框之间的距离 */
padding: 20px 0 20px 0;
}
div.site-info img.logo {
width: 56px;
height: 56px;
float: left;
}
div.site-info div.info-text {
/* 左外边距，自身边框到相邻内容之间的距离 */
margin-left: 77px;
/* background-color: olive; */
/* 写写死看结构，后期修改 */
height: 114px;
line-height: 18px;
}
div.site-info div.info-text span,
div.site-info div.info-text a {
font-size: 12px;
padding: 30px 0;
/* line-height: 18px; */ /* a标签是行内元素，不能设置行高 */
color: #757575;
height: 14px;
}
div.site-info div.info-text a:hover {
color: #ff6781;
}
div.site-info div.info-text p.comment a {
color: #b0b0b0;
}
div.site-info div.info-links {
margin-top: 10px;
margin-left: 77px;
margin-bottom: 15px;
}
div.site-info div.info-links img {
height: 28px;
}
div.site-info div.slogan {
/* 给行内元素的父元素设置text-align才能居中对齐，不要给行内元素本身设置 */
text-align: center;
}
div.site-info div.slogan img {
clear: both;
margin-top: 30px;
/* width: 100%; */
}
/* 页面底部结束 */
/* 侧边工具栏开始 */
div.side-toolbar {
position: fixed;
right: 0;
width: 84px;
bottom: 70px;
height: 566px;
/* background-color: orange; */
}
div.side-toolbar a {
display: block;
color: #757575;
width: 84px;
height: 92px;
border: 1px solid #f5f5f5;
background-color: #fff;
text-align: center;
}
div.side-toolbar a:hover {
color: #f25807;
}
div.side-toolbar a:last-child {
margin-top: 14px;
}
div.side-toolbar a div.iconfont {
padding-top: 18px;
margin-top: 8px;
}
div.wx-code {
width: 130px;
height: 192px;
background-color: #fff;
position: absolute;
top: 0;
left: -144px;
/* 在这个轮廓里面放二维码，上下左右内边距都是14 */
padding: 14px;
/* 默认是隐藏的 */
display: none;
}
div.side-toolbar a:first-of-type:hover div.wx-code {
display: block;
}
div.wx-code div.arrow {
width: 0;
height: 0px;
/* background-color: orange; */
position: absolute;
right: -10px;
top: 35px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
}
div.wx-code img {
width: 100px;
height: 100px;
margin-top: 6px;
margin-bottom: 6px;
}
div.wx-code span {
display: block;
width: 82px;
height: 42px;
margin: 8px auto 0 auto;
text-align: center;
line-height: 20px;
color: #757575;
}
/* 对字体图标进行调整 */
/* 字体图标相当于在原有基础上加了个伪元素::before */
.icon-gouwuche::before {
/* 相对于自身的定位 */
position: relative;
top: 1px;
/* color: red; */
font-size: 24px;
}
/* 调整左右箭头的大小 */
/* 相当于在前面加了伪元素，所以不是需要加上::before */
.icon-zuojiantou::before,
.icon-youjiantou3::before {
font-size: 30px;
}
/* 浏览更多旁边的红色箭头大小调整 */
.icon-youjiantou2::before {
font-size: 70px;
}
/* 视频板块下面图片里面的字体图标大小调整 */
.icon-bofang_o::before {
font-size: 30px;
}
/* site-footer上面的字体图标大小调整 */
.icon-liwu::before,
.icon-31dingwei::before,
.icon-15tianwuliyoutuihuo::before,
.icon-7tianwuliyoutuihuo::before,
.icon-editor2::before {
font-size: 23px;
}
/* 右侧工具条字体图标大小调整 */
.icon-shouji::before,
.icon-yonghu::before,
.icon-editor2::before,
.icon-kefu::before,
.icon-gouwuche::before,
.icon-fanhuidingbu::before {
font-size: 30px;
}
主体部分CSS代码
