<!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/base.css">
<link rel="stylesheet" href="../小米商城/css/index.css">
</head>
<body>
<!-- 头部制作 -->
<header class="clearfix" id="top">
<div class="header w">
<ul class="left">
<li><a href="#">小米官网</a></li>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">loT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">天星数科</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">小爱开放平台</a></li>
<li><a href="#">企业团购</a></li>
<li><a href="#">资质证照</a></li>
<li>
<a href="#">协议规则</a>
</li>
<li class="download">
<a href="#">下载App</a>
<div class="App">
<div class="erweima">
<img src="../小米商城/images/download.png" alt="" style="width: 90px; height: 90px">
</div>
</div>
</li>
<li><a href="#">Select Location</a></li>
</ul>
<ul class="right">
<li><a href="#">登录</a></li>
<li><a href="../小米商城/register.html" target="_blank">注册</a></li>
<li><a href="#">消息通知</a></li>
<div class="dropdown">
<button class="dropbtn">购物车 (0)</button>
<div class="dropdown-content">
购物车中还没有商品,快来抢购吧
</div>
</div>
</ul>
</div>
</header>
<!-- 导航栏 -->
<nav class="clearfix">
<div class="nav w">
<ul class="nav-flex">
<li>
<img src="../小米商城/images/logo-mi2.png" alt="" class="mi-logo">
</li>
<li>
<a href="#" class="ff6700">Xiaomi手机</a>
</li>
<li>
<a href="#" class="ff6700">Redmi手机</a>
</li>
<li>
<a href="#" class="ff6700">电视</a>
</li>
<li>
<a href="#" class="ff6700">笔记本</a>
</li>
<li>
<a href="#" class="ff6700">平板</a>
</li>
<li>
<a href="#" class="ff6700">家电</a>
</li>
<li>
<a href="#" class="ff6700">路由器</a>
</li>
<li>
<a href="#" class="ff6700">服务中心</a>
</li>
<li>
<a href="#" class="ff6700">社区</a>
</li>
<li>
<input type="text" class="search" placeholder="小米">
</li>
</ul>
</div>
</nav>
<!-- 小米侧边栏 -->
<aside class="w clearfix">
<div class="aside-left">
<ul class="aside-flex">
<li class="phone one">
<a href="#">手机</a>
<!-- 隐藏的盒子 -->
<!-- 256*76 -->
<div class="hiddens">
<div>
<ul class="hiddens-flex">
<li class="two">
<a href="">
<img src="../小米商城/images/hidden1.webp" alt="">
</a>
<span class="s12s">小米 12S Ultra</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden2.webp" alt="">
</a>
<span class="SE">Note 11 SE</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden3.webp" alt="">
</a>
<span class="K50">红米K50</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden4.webp" alt="">
</a>
<span class="mi11">小米11 青春活力版</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hiddden5.webp" alt="">
</a>
<span class="h5">小米12s pro</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidd6.webp" alt="">
</a>
<span class="C1">小米 Civi 1</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden7.webp" alt="">
</a>
<span class="h7">红米K40 S</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden8.webp" alt="">
</a>
<span class="h8">Note11 pro系列</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden9.webp" alt="">
</a>
<span class="h9">小米12S</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden10.webp" alt="">
</a>
<span class="h10">黑鲨5 pro</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden11.webp" alt="">
</a>
<span class="h11">红米 k50 电竞版</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden12.webp" alt="">
</a>
<span class="h12">Note 11 4G</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden13.webp" alt="">
</a>
<span class="h13">小米 12Pro 天玑版</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden14.webp" alt="">
</a>
<span class="h14">黑鲨5</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden15.webp" alt="">
</a>
<span class="h15">小米12pro</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden16.webp" alt="">
</a>
<span class="h16">Note11 5G</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden17.webp" alt="">
</a>
<span class="h17">Note11 Pro+</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden18webp.webp" alt="">
</a>
<span class="h18">红米 10A</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden19.webp" alt="">
</a>
<span class="h19">小米 12</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden20.webp" alt="">
</a>
<span class="h20">小米 Civi</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden21.webp" alt="">
</a>
<span class="h21">Note 11 Pro</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden22.webp" alt="">
</a>
<span class="h22">红米 K50 Pro</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden23.webp" alt="">
</a>
<span class="h23">小米12 X</span>
</li>
<li class="two">
<a href="">
<img src="../小米商城/images/hidden24.webp" alt="">
</a>
<span class="h24">小米 Max4</span>
</li>
</ul>
</div>
</div>
</li>
<li class="one">
<a href="#">电视</a>
</li>
<li class="one"><a href="#">笔记本 平板</a></li>
<li class="one"><a href="#">出行 穿戴</a></li>
<li class="one"><a href="#">耳机 音响</a></li>
<li class="one"><a href="#">家电</a></li>
<li class="one"><a href="#">智能路由器</a></li>
<li class="one"><a href="#">电源配件</a></li>
<li class="one"><a href="#">健康儿童</a></li>
<li class="one"><a href="#">生活箱包</a></li>
</ul>
</div>
<!-- 轮播图外部展示容器 -->
<div class="aside-right">
<!-- 图片储存容器 -->
<div class="aside-right1">
<!-- 轮播图图片 -->
<a href="#"><img src="../小米商城/images/aside.jpg" alt=""></a>
<a href="#"><img src="../小米商城/images/aside2.webp" alt=""></a>
<a href="#"><img src="../小米商城/images/aside3.webp" alt=""></a>
<a href="#"><img src="../小米商城/images/aside4.webp" alt=""></a>
<a href="#"><img src="../小米商城/images/aside.jpg" alt=""></a>
</div>
</div>
</aside>
<!-- 精品推荐 -->
<div class="nice w clearfix">
<ul class="nice-flex">
<div class="nice-left">
<ul>
<li class="n1">
<a href="#">
<i>
<img src="../小米商城/images/clock.png" alt="">
</i>
<p>保障服务</p>
</a>
</li>
<li class="n2">
<a href="#">
<i>
<img src="../小米商城/images/house.png" alt="">
</i>
<p>企业团购</p>
</a>
</li>
<li class="n3">
<a href="#">
<i>
<img src="../小米商城/images/f.png" alt="">
</i>
<p>F码通道</p>
</a>
</li>
<li class="n4">
<a href="#">
<i>
<img src="../小米商城/images/mifen.png" alt="">
</i>
<p>米粉卡</p>
</a>
</li>
<li class="n5">
<a href="#">
<i>
<img src="../小米商城/images/money.png" alt="">
</i>
<p>以旧换新</p>
</a>
</li>
<li class="n6">
<a href="#">
<i>
<img src="../小米商城/images/huafei.png" alt="">
</i>
<p>话费充值</p>
</a>
</li>
</ul>
</div>
<li class="one-1">
<img src="../小米商城/images/one.jpg" alt="">
</li>
<li class="one-1">
<img src="../小米商城/images/two.jpg" alt="">
</li>
<li class="one-1">
<img src="../小米商城/images/three.jpg" alt="">
</li>
<li class="one-1">
<img src="../小米商城/images/three.jpg" alt="">
</li>
</ul>
</div>
<!-- 主要部分 -->
<!-- 顶部 -->
<div class="main clearfix">
<div class="main-maxhd w">
<img src="../小米商城/images/hd.webp" alt="">
</div>
<div class="main-hd w clearfix">
<p>手机</p>
<a href="#" class="f-more">查看更多</a>
<!-- 圆 -->
<div class="more">
</div>
</div>
<!-- 商城 -->
<div class="goods w clearfix">
<!-- 左侧图片 -->
<div class="goods-left up up-time">
<img src="../小米商城/images/xiaomi12s.webp" alt="">
</div>
<!-- 右侧图片 -->
<div class="goods-right">
<div class="goods-right-hd">
<ul class="goods-flex">
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/12s.webp" alt="">
<h3>小米 12S Ultra</h3>
<p>这真徕卡 | 专业徕卡</p>
<span>5999元起</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/12spro.webp" alt="">
<h3>小米 12S Pro</h3>
<p>晓龙8+旗舰处理器 | 徕卡影像</p>
<span>4699元起</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/12s.webp" alt="">
<h3>小米 12S</h3>
<p>小尺寸性能旗舰 | 徕卡影像</p>
<span>3999元起</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/12pro.webp" alt="">
<h3>小米 12S Ultra</h3>
<p>全球首发天玑9000 | 叶脉冷泵散热系统</p>
<span>5999元起</span>
</a>
</li>
</ul>
</div>
<div class="goods-right-bd">
<ul class="goods-flex">
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/11Tpro+.webp" alt="">
<h3>红米 Note 11Tpro+</h3>
<p>天玑8100 | 真旗舰芯</p>
<span>1999元起</span>
<del>2199元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/11pro.webp" alt="">
<h3>红米 Note 11Tpro</h3>
<p>天玑8100 | 真旗舰芯</p>
<span>1699元起</span>
<del>1799元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/11se.webp" alt="">
<h3>红米 Note11SE</h3>
<p>双卡双5G | 急速登陆</p>
<span>999元起</span>
<del>1099元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/1.webp" alt="">
<h3>小米 Civi 1S</h3>
<p>原生美肌人像 | 奇迹阳光动人新色 | 小米</p>
<span>2299元起</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 智能穿戴 -->
<div class="smart w clearfix">
<div class="smart-hd clearfix">
<p>智能穿戴</p>
<a href="#" class="smart-hot ff6700">热门</a>
<a href="#" class="smart-recom ff6700">推荐</a>
</div>
<div class="smart-bd clearfix">
<!-- 左侧图片 -->
<div class="smart-bd-left up up-time">
<img src="../小米商城/images/smart-left.webp" alt="">
</div>
<!-- 右侧图片 -->
<div class="smart-bd-right">
<div class="smart-right-hd">
<ul class="smart-flex">
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/S1webp.webp" alt="">
<h3>小米 Watch S1</h3>
<p>蓝宝石玻璃镜面 | 不锈钢中框 | 1.43"A Watch</p>
<span>999元起</span>
<del>1099元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/wuxian.webp" alt="">
<h3>小米 真无线降噪耳机</h3>
<p>40dB宽频主动降噪 | HiFi高保真音质 | 1.43"A Watch</p>
<span>299元起</span>
<del>499元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/redmi2.webp" alt="">
<h3>红米 手表2</h3>
<p>1.6"AMOLED大屏 | 117种运动模式 | 2.43"A Watch</p>
<span>379元起</span>
<del>399元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/NFC.webp " alt="">
<h3>小米手环6 NFC版</h3>
<p>1.56"跑道全面彩屏 | 30种运动模式 | 1.43"A Watch</p>
<span>229元起</span>
<del>279元</del>
</a>
</li>
</ul>
</div>
<!-- 右侧底部 -->
<div class="smart-right-bd">
<ul class="smart-flex">
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/S1webp.webp" alt="">
<h3>小米 Watch S1</h3>
<p>蓝宝石玻璃镜面 | 不锈钢中框 | 1.43"A Watch</p>
<span>999元起</span>
<del>1099元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/wuxian.webp" alt="">
<h3>小米 真无线降噪耳机</h3>
<p>40dB宽频主动降噪 | HiFi高保真音质 | 1.43"A Watch</p>
<span>299元起</span>
<del>499元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/redmi2.webp" alt="">
<h3>红米 手表2</h3>
<p>1.6"AMOLED大屏 | 117种运动模式 | 2.43"A Watch</p>
<span>379元起</span>
<del>399元</del>
</a>
</li>
</ul>
<div class="more up-dian up-time up">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<!-- 箭头 -->
<div class="more1 up-time v">
</div>
</div>
</div>
</div>
</div>
<div class="smart w clearfix">
<div class="smart-hd clearfix">
<p>笔记本 | 平板</p>
<a href="#" class="smart-hot ff6700">热门</a>
</div>
<div class="smart-bd clearfix">
<!-- 左侧图片 -->
<div class="smart-bd-left up up-time">
<img src="../小米商城/images/redmiG.webp" alt="">
</div>
<!-- 右侧图片 -->
<div class="smart-bd-right">
<div class="smart-right-hd">
<ul class="smart-flex">
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/redmig 2021.webp" alt="">
<h3>Redmi G 2021 R7/RTX 3050</h3>
<p>全新12代英特尔处理器</p>
<span>5999元起</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/3050.webp" alt="">
<h3>Redmi G 2021 R7/RTX3050Ti</h3>
<p>有光追,才是高性能游戏本</p>
<span>5799元起</span>
<del>6299元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/Pro14.webp" alt="">
<h3>Pro 14增强版 i5独显-Win11</h3>
<p>2.5K超视网膜全面屏</p>
<span>4779元起</span>
<del>5599元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/Pro15.webp " alt="">
<h3>Redmibook 15Pro</h3>
<p>3.2K超清视网膜全面屏|微米级一体|红米笔记本</p>
<span>4499元起</span>
<del>5299元</del>
</a>
</li>
</ul>
</div>
<!-- 右侧底部 -->
<div class="smart-right-bd">
<ul class="smart-flex">
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/Pro14 2022.webp" alt="">
<h3>Redmi Book Pro 14 2022</h3>
<p>全新12代英特尔处理器,2.5K 120HZ</p>
<span>5399元起</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/pingban.webp" alt="">
<h3>小米平板5 Pro</h3>
<p>骁龙870芯片 | 2.5K超高清 | 120HZ高刷新率</p>
<span>2499元起</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/IPS.webp" alt="">
<h3>Redmi显示器23.8英寸</h3>
<p>IPS技术硬屏 | 1080画质</p>
<span>599元</span>
<del>849元</del>
</a>
</li>
</ul>
<div class="more up-dian up-time up">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<!-- 箭头 -->
<div class="more1 up-time v">
</div>
</div>
</div>
</div>
</div>
<!-- 家电 -->
<div class="house w">
<div class="house-max-hd">
<p>家电</p>
<a href="#" class="a1 ff6700">热门</a>
<a href="#" class="a2 ff6700">电视影音</a>
</div>
<div class="house-hd">
<ul class="house-hd-flex">
<li class="up up-time">
<img src="../小米商城/images/dianshi6.webp" alt="" style="width:224px; height:300px;">
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/oled.webp" alt="">
<h3>小米电视6 65"OLED</h3>
<p>OLED自发光屏 | 百万级对比度 | 4.6mm</p>
<span>6699元</span>
<del>6999元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/zhizun6.webp" alt="">
<h3>小米电视6 至尊版 65英寸</h3>
<p>百级分区背光 | 双120Hz高刷 | 4.5GB22</p>
<span>7199元</span>
<del>7999元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/es5.webp" alt="">
<h3>小米电视 ES55 2022款</h3>
<p>多分区背光 | MEMC动态补偿 | 杜比世界</p>
<span>2499元</span>
<del>2999元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/DD.webp" alt="">
<h3>米家直驱洗烘一体机 10kg</h3>
<p>DD直驱电机 安静护衣</p>
<span>1999元</span>
<del>2499元</del>
</a>
</li>
</ul>
</div>
<div class="house-bd">
<ul class="house-bd-flex">
<li class="up up-time">
<img src="../小米商城/images/洗衣机.webp" alt="" style="width:224px; height:300px;">
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/mijia.webp" alt="">
<h3>米家波轮洗衣机 10kg</h3>
<p>全景玻璃阻尼上盖 防夹手</p>
<span>999元</span>
<del>1499元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家冰箱无霜三门.webp" alt="">
<h3>米家冰箱无霜三门216L</h3>
<p>风冷无霜 三门三温区</p>
<span>1499元</span>
<del>1699元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家冰箱无霜两门.webp" alt="">
<h3>米家冰箱无霜两门186L</h3>
<p>风冷无霜 离子抗菌</p>
<span>1289元</span>
<del>1499元</del>
</a>
</li>
<li class="up up-time">
<a href="#" class="house-end">
<img src="../小米商城/images/米家自动香氛机套装.webp" alt="" style="width: 80px ;height:80px;">
<h3>米家自动香氛机套装</h3>
<span>89元</span>
</a>
</li>
</ul>
<div class="more up-dian up-time up">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<!-- 箭头 -->
<div class="more1 up-time v">
</div>
</div>
</div>
<!-- 生活电器 -->
<div class="house w">
<div class="house-max-hd">
<p>生活电器</p>
<a href="#" class="a1 A-1">扫地机</a>
<a href="#" class="a2 A-2">空净</a>
</div>
<div class="house-hd">
<ul class="house-hd-flex">
<li class="up up-time">
<img src="../小米商城/images/米家免洗扫托.webp" alt="" style="width:224px; height:300px;">
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家全能扫托机器人.webp" alt="">
<h3>米家扫托机器人 2Pro</h3>
<p>免洗集尘全自动,一键解放双手</p>
<span>3699元</span>
<del>4599元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家扫托机器人.webp" alt="">
<h3>米家扫托机器人 2Pro</h3>
<p>扫托除菌一步到位</p>
<span>1999元</span>
<del>2099元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家扫托机器人2.webp" alt="">
<h3>米家扫托机器人2</h3>
<p>经典延续,全面升级</p>
<span>1399元</span>
<del>1799元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家集尘扫托.webp" alt="">
<h3>米家集尘扫托机器人</h3>
<p>自动倒垃圾,45天不沾尘</p>
<span>1999元</span>
<del>2299元</del>
</a>
</li>
</ul>
</div>
<div class="house-bd">
<ul class="house-bd-flex">
<li class="up up-time">
<img src="../小米商城/images/扫托机器人2.webp" alt="" style="width:224px; height:300px;">
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家扫托机器人1T.webp" alt="">
<h3>米家扫托机器人1T</h3>
<p>3D精准避障,扫地不再碰撞</p>
<span>999元</span>
<del>1999元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家扫托机器人2C.webp" alt="">
<h3>米家扫托机器人 2C</h3>
<p>抗菌去渍二合一,开启生活新净界</p>
<span>1499元</span>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家扫托机器人Pro.webp" alt="">
<h3>米家扫托机器人 Pro</h3>
<p>AI智能识别 3D精准避障</p>
<span>1289元</span>
<del>1499元</del>
</a>
</li>
<li class="up up-time">
<a href="#" class="house-end">
<img src="../小米商城/images/米家无线吸尘器K10 Pro.webp" alt="" style="width: 80px ;height:80px;">
<h3>米家无线吸尘器K10 Pro</h3>
<span>1599元</span>
</a>
</li>
</ul>
<div class="more up-dian up-time up">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<!-- 箭头 -->
<div class="more1 up-time v">
</div>
</div>
</div>
<div class="main-maxhd w house-max-one">
<a href=""><img src="../小米商城/images/max2.webp" alt="" style="width: 1162px"></a>
</div>
<!-- 厨房电器 -->
<div class="house w">
<div class="house-max-hd">
<p>厨房电器</p>
<a href="#" class="a2 a-2">推荐</a>
</div>
<div class="house-hd">
<ul class="house-hd-flex">
<li class="up up-time">
<img src="../小米商城/images/小米净水器.webp" alt="" style="width:224px; height:300px;">
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家智能电饭煲.webp" alt="">
<h3>米家智能电饭煲 微压版 3L</h3>
<p>看得见的真微压</p>
<span>399元</span>
<del>499元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家智能电压力锅5L.webp" alt="">
<h3>米家智能电压力锅5L</h3>
<p>一锅双胆,9挡调节口感</p>
<span>369元</span>
<del>399元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家电饭煲C1.webp" alt="">
<h3>米家电饭煲C1</h3>
<p>快慢收放自如,小巧身材内有乾坤</p>
<span>149元</span>
<del>159元</del>
</a>
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家集尘扫托.webp" alt="">
<h3>米家智能电压力锅2.5L</h3>
<p>煮饭快,焖炖煲煮一机多能</p>
<span>279元</span>
<del>299元</del>
</a>
</li>
</ul>
</div>
<div class="house-bd">
<ul class="house-bd-flex">
<li class="up up-time">
<img src="../小米商城/images/米家侧吸.webp" alt="" style="width:224px; height:300px;">
</li>
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家智能调压电压力锅5L.jpg" alt="">
<h3>米家智能调压电压力锅5L</h3>
<p>智能无极调压</p>
<span>559元</span>
<del>599元</del>
</a>
</li>
<!-- <li>
<a href="#">
<img src="../小米商城/images/米家扫托机器人2C.webp" alt="">
<h3>米家扫托机器人 2C</h3>
<p>抗菌去渍二合一,开启生活新净界</p>
<span>1499元</span>
</a>
</li> -->
<li class="up up-time">
<a href="#">
<img src="../小米商城/images/米家智能压力H电饭煲1S 3L.webp" alt="">
<h3>米家智能压力H电饭煲1S 3L</h3>
<p>压力IH加热 智能烹饪</p>
<span>869元</span>
<del>999元</del>
</a>
</li>
<li class="up up-time">
<a href="#" class="house-end">
<img src="../小米商城/images/米家无线吸尘器K10 Pro.webp" alt="" style="width: 80px ;height:80px;">
<h3>米家无线吸尘器K10 Pro</h3>
<span>1599元</span>
</a>
</li>
</ul>
<div class="dian up-dian up-time up">
<h3>浏览更多</h3>
<p>热门</p>
</div>
<!-- 箭头 -->
<div class="dian1 up-time v">
</div>
</div>
</div>
<!-- 视频 -->
<div class="view w">
<div class="view-hd">
<p>视频</p>
<a href="#">查看更多</a>
</div>
<div class="view-bd">
<ul class="view-flex">
<li>
<a href="#">
<img src="../小米商城/images/视频1.webp" alt="">
<p>2021春季新品发布会第一场</p>
<span></span>
</a>
</li>
<li>
<a href="#">
<img src="../小米商城/images/视频2.webp" alt="">
<p>Redmi 10X系列发布会</p>
<i>Redmi 10X系列发布会</i>
<span></span>
</a>
</li>
<li class="no-look">
<a href="#">
<img src="../小米商城/images/小米10 青春版 发布会.webp" alt="">
<p>小米10 青春版 发布会</p>
<span></span>
</a>
</li>
<li>
<a href="#">
<img src="../小米商城/images/小米10 8K手机拍大片.webp" alt="">
<p>小米10 8K手机拍大片</p>
<span></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部制作 -->
<div class="foot w clearfix">
<div class="foot-hd clearfix">
<ul class="foot-hd-flex">
<li>
<a href="#" class="fix ff6700">预约维修服务</a>
</li>
<li>
<a href="#" class="seven ff6700">7 7天无理由退货</a>
</li>
<li>
<a href="#" class="shiwu ff6700">15天免费退换</a>
</li>
<li>
<a href="#" class="amazing ff6700">满69包邮</a>
</li>
<li>
<a href="#" class="city ff6700">1100余家售后网点</a>
</li>
</ul>
</div>
<div class="foot-bd clearfix">
<dl>
<dt>选购指南</dt>
<dd><a href="#" class="ff6700">手机</a></dd>
<dd><a href="#" class="ff6700">电视</a></dd>
<dd><a href="#" class="ff6700">笔记本</a></dd>
<dd><a href="#" class="ff6700">平板</a></dd>
<dd><a href="#" class="ff6700">穿戴</a></dd>
<dd><a href="#" class="ff6700">耳机</a></dd>
<dd><a href="#" class="ff6700">家电</a></dd>
<dd><a href="#" class="ff6700">音响</a></dd>
<dd><a href="#" class="ff6700">路由器</a></dd>
<dd><a href="#" class="ff6700">配件</a></dd>
</dl>
<dl>
<dt>服务中心</dt>
<dd><a href="#" class="ff6700">申请售后</a></dd>
<dd><a href="#" class="ff6700">售后政策</a></dd>
<dd><a href="#" class="ff6700">维修服务价格</a></dd>
<dd><a href="#" class="ff6700">订单查询</a></dd>
<dd><a href="#" class="ff6700">以旧换新</a></dd>
<dd><a href="#" class="ff6700">保障服务</a></dd>
<dd><a href="#" class="ff6700">防伪查询</a></dd>
<dd><a href="#" class="ff6700">F码通道</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="#" class="ff6700">小米之家</a></dd>
<dd><a href="#" class="ff6700">服务网点</a></dd>
<dd><a href="#" class="ff6700">授权体验店/专区</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="#" class="ff6700">了解小米</a></dd>
<dd><a href="#" class="ff6700">加入小米</a></dd>
<dd><a href="#" class="ff6700">投资者关系</a></dd>
<dd><a href="#" class="ff6700">环境,社会及管治</a></dd>
<dd><a href="#" class="ff6700">廉洁举报</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="#" class="ff6700">新浪微博</a></dd>
<dd><a href="#" class="ff6700">官方微信</a></dd>
<dd><a href="#" class="ff6700">联系我们</a></dd>
<dd><a href="#" class="ff6700">公益基金会</a></dd>
</dl>
<div class="foot-bd-right">
<p class="phone">400-100-5678</p>
<p>8:00-18:00(仅收市话费)</p>
<a href="#">人工客服</a>
</div>
</div>
</div>
<!-- 最底部商标 -->
<div class="max-foot">
<div class="max-foot-container w">
<img src="../小米商城/images/logo-mi2.png" alt="" style="width: 56px; height: 56px;">
<a href="#" class="ff6700">小米商城</a>|
<a href="#" class="ff6700">MIUI</a>|
<a href="#" class="ff6700">米家</a>|
<a href="#" class="ff6700">米聊</a>|
<a href="#" class="ff6700">多看</a>|
<a href="#" class="ff6700">游戏</a>|
<a href="#" class="ff6700">政企服务</a>|
<a href="#" class="ff6700">小米天猫店</a>|
<a href="#" class="ff6700">小米集团隐私政策</a>|
<a href="#" class="ff6700">小米公司儿童信息保护规则</a>|
<a href="#" class="ff6700">小米商城隐私政策</a>|
<a href="#" class="ff6700">小米商城用户协议</a>|
<a href="#" class="ff6700">问题反馈</a>|
<a href="#" class="ff6700">Select Location</a><br>
<a href="#" class="ff6700 foot-two">北京互联网法院法律服务工作站</a>|
<a href="#" class="ff6700">中国消费者协会</a>|
<a href="#" class="ff6700">北京市消费者协会</a><br>
<i>违法和不良信息举报电话：171-5104-4404</i>
<i>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</i><br>
<img src="../小米商城/images/truste.png" alt="" class="img-two">
<img src="../小米商城/images/v-logo-2.png" alt="">
<img src="../小米商城/images/v-4.png" alt="">
<img src="../小米商城/images/v-5.png" alt="">
</div>
</div>
<!-- 小米提示栏 -->
<div class="left-fixed">
<ul class="fixed-flex">
<!-- 27*42 -->
<li class="num">
<a href="#"><img src="../小米商城/images/fixed1.png" alt=""></a>
<div class="sanjiao">
<!-- 130*92 -->
<div class="zhengfangxing">
<img src="../小米商城/images/正方形.png" alt="" style="width:100px; height: 100px;"><br>
<span>扫描领新人百元礼包</span>
</div>
</div>
</li>
<li title="个人中心">
<a href="#"><img src="../小米商城/images/fixed2.png" alt=""></a>
</li>
<li title="售后服务">
<a href="#"><img src="../小米商城/images/fixed3.png" alt=""></a>
</li>
<li title="人工客服">
<a href="#"><img src="../小米商城/images/fixed4.png" alt=""></a>
</li>
<li title="购物车">
<a href="#"><img src="../小米商城/images/fixed5.png" alt=""></a>
</li>
<li title="回顶部">
<a href="#top"><img src="../小米商城/images/totop_hover.png" alt=""></a>
</li>
</ul>
</div>
</body>
</html>以上为html代码
.w {
width: 1200px;
margin: 0 auto;
}
header {
min-width: 100%;
background-color: rgb(29, 29, 29);
height: 40px;
}
.header .left li {
/* padding-left: 20px; */
float: left;
}
.header .right li,
button {
float: right;
}
.header ul li a {
color: rgb(107, 105, 105);
font-size: 12px;
padding-left: 12px;
line-height: 40px;
}
.header ul li a:hover {
color: #fff;
}
.header .right .dropdown .dropbtn {
color: rgb(23, 23, 23);
display: inline-block;
padding: 4px 20px;
line-height: 30px;
background-color: rgba(29, 29, 29, 0);
}
.header .right .dropdown .dropbtn {
background-color: #7d7d7d;
}
.header .right .dropdown .dropbtn:hover {
background-color: rgb(255, 255, 255);
color: rgb(242, 129, 8);
}
.header .right .dropbtn::before {
padding-right: 2px;
font-family: "icomoon";
content: "\e93a";
}
/* 隐藏的盒子 */
.hiddens {
display: none;
width: 966px;
height: 465px;
position: absolute;
top: 0px;
left: 234px;
z-index: 100;
background-color: #fff;
}
.hiddens .hiddens-flex {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 4px;
}
.hiddens .hiddens-flex .two span {
position: absolute;
font-size: 14px;
color: black;
}
.hiddens .hiddens-flex .two .s12s {
top: 11px;
left: 76px;
}
.hiddens .hiddens-flex .two .SE {
top: 11px;
left: 326px;
}
.hiddens .hiddens-flex .two .K50 {
top: 11px;
left: 568px;
}
.hiddens .hiddens-flex .two .mi11 {
top: 11px;
left: 814px;
}
.hiddens .hiddens-flex .two .h5 {
top: 89px;
left: 76px;
}
.hiddens .hiddens-flex .two .C1 {
top: 89px;
left: 326px;
}
.hiddens .hiddens-flex .two .h7 {
top: 89px;
left: 568px;
}
.hiddens .hiddens-flex .two .h8 {
top: 89px;
left: 814px;
}
.hiddens .hiddens-flex .two .h9 {
top: 167px;
left: 76px;
}
.hiddens .hiddens-flex .two .h10 {
top: 167px;
left: 326px;
}
.hiddens .hiddens-flex .two .h11 {
top: 167px;
left: 568px;
}
.hiddens .hiddens-flex .two .h12 {
top: 167px;
left: 814px;
}
.hiddens .hiddens-flex .two .h13 {
top: 245px;
left: 76px;
}
.hiddens .hiddens-flex .two .h14 {
top: 245px;
left: 326px;
}
.hiddens .hiddens-flex .two .h15 {
top: 245px;
left: 568px;
}
.hiddens .hiddens-flex .two .h16 {
top: 245px;
left: 814px;
}
.hiddens .hiddens-flex .two .h17 {
top: 323px;
left: 76px;
}
.hiddens .hiddens-flex .two .h18 {
top: 323px;
left: 326px;
}
.hiddens .hiddens-flex .two .h19 {
top: 323px;
left: 568px;
}
.hiddens .hiddens-flex .two .h20 {
top: 323px;
left: 814px;
}
.hiddens .hiddens-flex .two .h21 {
top: 401px;
left: 76px;
}
.hiddens .hiddens-flex .two .h22 {
top: 401px;
left: 326px;
}
.hiddens .hiddens-flex .two .h23 {
top: 401px;
left: 568px;
}
.hiddens .hiddens-flex .two .h24 {
top: 401px;
left: 814px;
}
.hiddens .hiddens-flex .two {
margin-right: 4px;
margin-bottom: 4px;
width: 237px;
height: 73px;
}
.hiddens .hiddens-flex .two a {
color: #7d7d7d;
}
/* 盒子显示 */
.aside-left .aside-flex .phone:hover .hiddens {
display: block;
}
/* 购物车下滑菜单 */
/* 需要下拉的内容 */
.dropdown {
position: relative;
}
.header .right .dropdown .dropdown-content {
display: none;
position: absolute;
/* 缓慢弹出的动画 */
overflow: hidden;
/* 绑定动画名字并且设置持续时间 */
animation-name: hiddens-Jframes;
animation-duration: 1s;
top: 40px;
left: 935px;
z-index: 99;
background-color: rgb(248, 248, 248);
width: 25%;
height: 100px;
text-align: center;
line-height: 100px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
@keyframes hiddens-Jframes {
from {
height: 0px;
}
to {
height: 100px;
}
}
.header .right .dropdown:hover .dropdown-content {
display: block;
}
nav {
width: 100%;
height: 100px;
position: relative;
}
.mi-logo {
height: 56px;
width: 56px;
display: block;
position: absolute;
top: 20px;
left: 116px;
}
/* 导航栏中间部分 */
nav .nav .nav-flex {
display: flex;
line-height: 100px;
margin-left: 142px;
}
nav .nav .nav-flex li {
font-size: 13px;
font-weight: 700;
margin: 0 20px;
}
/* 搜索框 */
nav .nav .nav-flex li .search {
border: 1px solid #7d7d7d;
width: 235px;
height: 50px;
padding-left: 10px;
}
.aside-left {
margin-top: 10px;
height: 465px;
width: 234px;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
}
.aside-left .aside-flex .one {
width: 234px;
height: 42px;
/* padding: 20px 0; */
/* padding-bottom: 20px; */
float: left;
margin-bottom: 5px;
padding-left: 10px;
line-height: 42px;
}
.aside-left .aside-flex .one a {
color: #fff;
font-size: 14px;
padding: 10px 99px 10px 10px;
}
.aside-left .aside-flex .one a::after {
font-family: 'icomoon';
content: '\e904';
/* display: inline-block; */
float: right;
padding-right: 10px;
}
/* 当鼠标经过侧边栏,变色 */
.aside-left .aside-flex .one:hover {
background-color: rgb(251, 74, 4);
}
/* 轮播 */
.aside-right {
position: absolute;
top: 150px;
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.aside-right1 {
width: 6000px;
animation: text 30s infinite linear;
font-size: 0px;
z-index: -9;
}
.aside-right1 img {
width: 1200px;
height: 465px;
float: left;
}
@keyframes text {
0%,
10% {
margin-left: 0px;
}
20%,
30% {
margin-left: -1200px;
}
40%,
50% {
margin-left: -2400px;
}
60%,
70% {
margin-left: -3600px;
}
80%,
90% {
margin-left: -4800px;
}
100% {
margin-left: -4800px;
}
}
/* 精品推荐 */
.nice .nice-flex {
display: flex;
height: 170px;
}
.nice .nice-flex .one-1 {
width: 234px;
margin-left: 3px;
}
.nice .nice-flex .one-1:nth-child(n+3) {
margin-left: 10px;
}
.nice .nice-flex li img {
width: 234px;
height: 170px;
}
.nice .nice-flex .nice-left {
overflow: hidden;
float: left;
}
.nice .nice-flex .nice-left ul li {
float: left;
width: 76px;
height: 82px;
background-color: #7d7d7d;
border: 1px solid #e4e4e4;
}
.nice .nice-flex .nice-left ul li {
margin-bottom: 10px;
}
.nice .nice-flex .nice-left ul li img {
position: relative;
top: 16px;
left: 23px;
width: 24px;
height: 24px;
}
.nice .nice-flex .nice-left ul li p {
line-height: 75px;
text-align: center;
color: #e4e4e4;
}
.nice .nice-flex .nice-left ul li a:hover p {
color: #fff;
}
.main {
margin-top: 10px;
padding-top: 15px;
background-color: #e4e4e4;
}
.main .main-maxhd img {
width: 1200px;
}
/* 完成后注释
body {
height: 9000px;
} */
.main .main-hd p {
float: left;
margin-top: 10px;
font-size: 22px;
font-weight: 200;
}
.main .main-hd a {
margin-right: 5px;
float: right;
margin-top: 30px;
}
.main .main-hd .more {
position: relative;
top: 28px;
right: -1179px;
width: 20px;
height: 20px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.main .main-hd a::after {
font-family: 'icomoon';
padding-left: 15px;
content: '\e904';
}
/* 商城 */
.goods .goods-left {
float: left;
}
.goods .goods-left img {
width: 234px;
height: 614px;
}
.goods .goods-right {
width: 950px;
height: 614px;
float: right;
margin-left: 14px;
min-height: 1px;
}
.goods .goods-right .goods-right-hd {
height: 300px;
}
.goods .goods-right .goods-flex {
display: flex;
}
.goods .goods-right .goods-flex li {
background-color: #fff;
width: 234px;
height: 300px;
padding: 20px 0;
/* overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; */
}
.goods .goods-right .goods-flex li a img {
width: 160px;
height: 160px;
}
.goods .goods-right .goods-flex li a {
padding-left: 16px;
display: inline-block;
text-align: center;
}
.goods .goods-right .goods-flex li:nth-child(-n+3) {
margin-right: 5px;
}
.goods .goods-right .goods-flex li a span {
color: rgb(242, 129, 8);
font-size: 14px;
}
.goods .goods-right .goods-flex li a p {
width: 195px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-bottom: 9px;
color: rgb(145, 143, 143);
}
.goods .goods-right .goods-flex li a {
padding-top: 10px;
}
.goods .goods-right .goods-flex li a p {
padding-top: 10px;
}
.goods-right-bd {
margin-top: 14px;
}
.goods-right-bd .goods-flex li a del {
font-size: 13px;
}
.smart {
margin-top: 20px;
}
.smart .smart-hd p {
float: left;
font-size: 22px;
font-weight: 200;
}
.smart .smart-hd a {
position: relative;
top: 12px;
right: -1043px;
font-size: 14px;
}
.smart .smart-bd .smart-bd-left {
float: left;
}
.smart .smart-bd .smart-bd-left img {
width: 234px;
height: 614px;
}
.smart .smart-bd .smart-bd-right .smart-flex {
display: flex;
}
.smart .smart-bd .smart-bd-right .smart-flex li {
background-color: #fff;
width: 234px;
height: 300px;
padding: 20px 0;
}
.smart .smart-bd-right .smart-flex li a {
padding-left: 16px;
display: inline-block;
text-align: center;
}
.smart .smart-bd-right .smart-flex li:nth-child(-n+3) {
margin-right: 5px;
}
.smart .smart-bd-right .smart-flex li a span {
color: rgb(242, 129, 8);
font-size: 14px;
}
.smart .smart-bd-right .smart-flex li a h3 {
padding-top: 10px;
}
.smart .smart-bd-right .smart-flex li a p {
padding-top: 10px;
}
.smart .smart-bd-right .smart-flex li a p {
width: 214px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-bottom: 17px;
color: rgb(145, 143, 143);
}
.smart .smart-bd-right {
width: 950px;
height: 614px;
float: right;
margin-left: 14px;
min-height: 1px;
/* background-color: #fff; */
}
.smart .smart-bd-right .smart-right-hd {
height: 300px;
}
.smart .smart-bd-right .smart-flex li a img {
width: 160px;
height: 160px;
}
.smart-right-bd {
margin-top: 14px;
}
.smart-right-bd .more {
float: right;
position: relative;
top: -300px;
width: 234px;
height: 143px;
background-color: #fff;
}
.smart-right-bd .more h3 {
font-size: 22px;
font-weight: 400;
color: rgb(23, 23, 23);
line-height: 143px;
padding-left: 12px;
}
.smart-right-bd .more p {
position: absolute;
top: 90px;
left: 10px;
}
.smart-right-bd .more1 {
position: relative;
top: -245px;
left: 840px;
width: 48px;
height: 48px;
border: 2px solid #ff6700;
background-color: transparent;
border-radius: 50%;
}
.smart-right-bd .more1::before {
position: relative;
font-size: 20px;
color: #ff6700;
top: 8px;
left: 13px;
font-family: 'icomoon';
content: '\ea3c';
}
.house {
margin-top: 20px;
position: relative;
}
.house .house-max-hd p {
font-size: 22px;
font-weight: 200;
}
.house .house-max-hd .a1 {
position: absolute;
top: 10px;
right: 115px;
font-size: 16px;
}
.house .house-max-hd .a2 {
position: absolute;
top: 10px;
right: 37px;
font-size: 16px;
}
.house .house-hd {
height: 300px;
}
.house .house-hd .house-hd-flex {
display: flex;
}
.house .house-hd .house-hd-flex li {
width: 224px;
}
.house .house-hd .house-hd-flex li:nth-child(n+2) {
margin-left: 10px;
background-color: #fff;
}
.house .house-hd .house-hd-flex li:nth-child(n+2) img {
width: 160px;
height: 160px;
}
.house .house-hd .house-hd-flex li a {
padding-left: 16px;
display: inline-block;
text-align: center;
}
.house .house-hd .house-hd-flex li a span {
color: rgb(242, 129, 8);
font-size: 14px;
}
.house .house-hd .house-hd-flex li a h3 {
padding-top: 25px;
}
.house .house-hd .house-hd-flex li a p {
padding-top: 25px;
}
.house .house-hd .house-hd-flex li a p {
width: 211px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-bottom: 17px;
color: rgb(145, 143, 143);
}
.house .house-hd .house-hd-flex li:nth-child(5) {
padding-top: 10px;
}
.house .house-bd {
height: 300px;
}
.house .house-bd .house-bd-flex {
display: flex;
}
.house .house-bd .house-bd-flex li {
margin-top: 5px;
width: 224px;
}
.house .house-bd .house-bd-flex li:nth-child(n+2) {
margin-left: 10px;
background-color: #fff;
}
.house .house-bd .house-bd-flex li a img {
width: 160px;
height: 160px;
}
.house .house-bd .house-bd-flex li a {
display: inline-block;
text-align: center;
padding-left: 10px;
}
.house .house-bd .house-bd-flex li a h3 {
padding-top: 25px;
}
.house .house-bd .house-bd-flex li a p {
padding-top: 25px;
width: 211px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-bottom: 17px;
color: rgb(145, 143, 143);
}
.house .house-bd .house-bd-flex li a span {
color: rgb(242, 129, 8);
font-size: 14px;
padding-right: 5px;
}
.house .house-bd .house-bd-flex li:last-of-type {
position: relative;
height: 143px;
}
.house .house-bd .house-bd-flex li:last-of-type a {
display: inline-block;
}
.house .house-bd .house-bd-flex li:last-of-type a img {
float: right;
position: absolute;
top: 23px;
left: 144px;
}
.house .house-bd .house-bd-flex li:last-of-type a h3 {
width: 100px;
text-align: left;
position: absolute;
top: 23px;
left: 12px;
}
.house .house-bd .house-bd-flex li:last-of-type a span {
position: absolute;
top: 91px;
left: 14px;
}
.house .house-bd .more {
float: right;
position: relative;
top: -143px;
left: -40px;
width: 224px;
height: 143px;
background-color: #fff;
}
.house .house-bd .more h3 {
font-size: 22px;
font-weight: 400;
color: rgb(23, 23, 23);
line-height: 143px;
padding-left: 12px;
}
.house .house-bd .more p {
position: absolute;
top: 90px;
left: 13px;
}
.house .house-bd .more1 {
position: relative;
top: -91px;
left: 1071px;
width: 48px;
height: 48px;
border: 2px solid #ff6700;
background-color: transparent;
border-radius: 50%;
}
.house .house-bd .more1::before {
position: relative;
font-size: 20px;
color: #ff6700;
top: 8px;
left: 13px;
font-family: 'icomoon';
content: '\ea3c';
}
/* .house-max-one {
position: relative;
top: -80px;
height:
} */
/* dian */
.house .house-bd .dian {
float: right;
position: relative;
top: -143px;
left: -273px;
width: 224px;
height: 143px;
background-color: #fff;
}
.house .house-bd .dian h3 {
font-size: 22px;
font-weight: 400;
color: rgb(23, 23, 23);
line-height: 143px;
padding-left: 12px;
}
.house .house-bd .dian p {
position: absolute;
top: 90px;
left: 13px;
}
.house .house-bd .dian1 {
position: relative;
top: -91px;
left: 833px;
width: 48px;
height: 48px;
border: 2px solid #ff6700;
background-color: transparent;
border-radius: 50%;
}
.house .house-bd .dian1::before {
position: relative;
font-size: 20px;
color: #ff6700;
top: 8px;
left: 13px;
font-family: 'icomoon';
content: '\ea3c';
}
.view {
margin-top: 30px;
position: relative;
margin-bottom: 30px;
}
.view-bd {
position: relative;
}
.view .view-hd p {
font-size: 22px;
font-weight: 200;
}
.view .view-hd a {
position: absolute;
top: 10px;
left: 1093px;
font-size: 16px;
}
.view .view-bd .view-flex {
display: flex;
}
.view .view-bd .view-flex li {
min-width: 296px;
height: 285px;
background-color: #fff;
}
.view .view-bd .view-flex li:nth-child(-n+3) {
margin-right: 10px;
}
.view .view-bd .view-flex li a img {
width: 296px;
height: 180px;
}
.view .view-bd .view-flex li a p {
padding-top: 30px;
font-size: 16px;
color: black;
text-align: center;
}
.view .view-bd .view-flex li a i {
color: #e4e4e4;
font-size: 12px;
padding-left: 83px;
}
/* 播放三角 */
.view .view-bd .view-flex li a span {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 12px;
border: 2px solid #fff;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 137px;
}
.view .view-bd .view-flex li a span::after {
font-family: 'icomoon';
content: '\e905';
font-size: 22px;
color: rgb(255, 255, 255);
position: absolute;
top: -2px;
left: 4px;
}
/* 视频1 */
.view .view-bd .view-flex li:nth-child(1) a span {
left: 10px;
}
/* 视频2 */
.view .view-bd .view-flex li:nth-child(2) a span {
left: 320px;
}
.view .view-bd .view-flex li:nth-child(3) a span {
left: 630px;
}
.view .view-bd .view-flex li:nth-child(4) a span {
left: 940px;
}
.foot {
margin-top: 20px;
}
.foot .foot-hd {
position: relative;
padding: 27px 0;
border-bottom: 1px solid #e4e4e4;
}
.foot .foot-hd .foot-hd-flex {
display: flex;
}
.foot .foot-hd .foot-hd-flex li {
width: 19.8%;
height: 25px;
font-size: 16px;
line-height: 25px;
text-align: center;
}
.foot .foot-hd .foot-hd-flex li:nth-child(-n+4) {
border-right: 1px solid #e4e4e4;
}
.foot .foot-hd .foot-hd-flex .fix::before {
font-family: 'icomoon';
content: '\e908';
padding-right: 10px;
font-size: 22px;
}
.foot .foot-hd .foot-hd-flex .seven::before {
font-family: 'icomoon';
content: '\ea2e';
font-size: 22px;
position: absolute;
left: 283px;
}
.foot .foot-hd .foot-hd-flex .shiwu::before {
font-family: 'icomoon';
content: '\e984';
padding-right: 10px;
font-size: 19px;
}
.foot .foot-hd .foot-hd-flex .amazing::before {
font-family: 'icomoon';
content: '\e9da';
padding-right: 10px;
font-size: 19px;
}
.foot .foot-hd .foot-hd-flex .city::before {
font-family: 'icomoon';
content: '\e948';
padding-right: 10px;
font-size: 19px;
}
.foot .foot-bd {
padding: 40px 0;
margin-left: 185px;
}
.foot .foot-bd dl {
float: left;
width: 160px;
margin-right: 15px;
}
.foot .foot-bd dl dt {
font-size: 16px;
}
.foot .foot-bd dl dd:nth-child(-n+11) {
margin-top: 10px;
}
.foot .foot-bd dl dd:first-of-type {
margin-top: 20px;
}
.foot .foot-bd .foot-bd-right {
position: relative;
bottom: 112px;
right: -20px;
float: right;
width: 251px;
text-align: center;
border-left: 1px solid #7d7d7d;
}
.foot .foot-bd .foot-bd-right .phone {
font-size: 22px;
line-height: 1;
color: #ff6700;
}
.foot .foot-bd .foot-bd-right p {
margin: 0 0 5px 0;
font-size: 12px;
}
.foot .foot-bd .foot-bd-right a {
display: inline-block;
line-height: 2;
width: 120px;
height: 30px;
color: #ff6700;
font-size: 14px;
background-color: #fff;
border: 1px solid #ff6700;
}
.foot .foot-bd .foot-bd-right a::before {
font-family: 'icomoon';
content: '\e907';
line-height: 2;
}
.max-foot {
margin-top: 10px;
padding-top: 15px;
background-color: #e4e4e4;
}
.max-foot .max-foot-container a {
display: inline-block;
margin: 0 3px;
}
.max-foot .max-foot-container a:first-of-type {
padding-left: 80px;
}
.max-foot .max-foot-container .foot-two {
padding-left: 140px;
}
.max-foot .max-foot-container i:first-of-type {
padding-left: 140px;
}
.max-foot .max-foot-container i {
margin: 0 3px;
}
.max-foot .max-foot-container .img-two {
padding-left: 140px;
}
.max-foot .max-foot-container img {
width: auto;
height: 28px;
}
/* 小米提示栏 */
.left-fixed {
position: fixed;
top: 265px;
right: 70px;
}
/* 主轴为垂直方向,起点在上 */
.left-fixed .fixed-flex {
display: flex;
flex-direction: column;
}
.left-fixed .fixed-flex li {
width: 27px;
height: 42px;
text-align: center;
line-height: 42px;
background-color: #fff;
border-top: 1px solid #cdcccc;
border-left: 1px solid #cdcccc;
border-right: 1px solid #cdcccc;
}
.left-fixed .fixed-flex li:last-of-type {
margin-top: 20px;
border-bottom: 1px solid #cdcccc;
}
.left-fixed .fixed-flex li a img {
width: 20px;
height: 20px;
}
/* 三角 */
.left-fixed .fixed-flex .sanjiao {
display: none;
position: fixed;
top: 279px;
right: 90px;
width: 0px;
height: 12px;
border: 8px solid #fff;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
}
/* 动画 */
@keyframes frames {
from {
height: 0px;
}
to {
height: 142px;
}
}
.left-fixed .fixed-flex .zhengfangxing {
/* 缓慢弹出的动画 */
overflow: hidden;
/* 绑定动画名字并且设置持续时间 */
animation-name: frames;
animation-duration: 1s;
position: fixed;
top: 222px;
right: 107px;
width: 130px;
background-color: #fff;
}
.left-fixed .fixed-flex .zhengfangxing img {
padding-top: 10px;
}
.left-fixed .fixed-flex .zhengfangxing span {
color: #aaa6a6;
}
/* 三角弹出 */
.left-fixed .fixed-flex .num:hover .sanjiao {
display: block;
}
/* 鼠标经过变色的效果 */
.foot .foot-bd .foot-bd-right a:hover {
background-color: #ff6700;
color: #fff;
}
/* 视频特效 */
.view .view-bd .view-flex li a:hover span {
background-color: #ff6700;
border-color: #ff6700;
}
.view .view-hd a:hover {
color: #ff6700;
}
.house .house-max-hd .a-2:hover {
color: #ff6700;
}
.house .house-max-hd .A-1:hover {
color: #ff6700;
text-decoration: underline;
}
.house .house-max-hd .A-2:hover {
color: #ff6700;
text-decoration: underline;
}
.ff6700:hover {
color: #ff6700;
}
.f-more:hover {
color: #ff6700;
}
.f-more:hover+.more {
color: #ff6700;
background-color: rgba(255, 255, 255, 0.2);
}
/* 下载App */
.header {
position: relative;
}
.App {
display: none;
position: absolute;
top: 23px;
right: 556px;
z-index: 99;
width: 0px;
height: 0px;
text-align: center;
border: 8px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.App .erweima img {
position: absolute;
top: 9px;
right: -45px;
/* 缓慢弹出的动画 */
overflow: hidden;
/* 绑定动画名字并且设置持续时间 */
animation-name: Jframes;
animation-duration: 1s;
}
.header .left .download:hover .App {
display: block;
}
@keyframes Jframes {
from {
height: 0px;
}
to {
height: 90px;
}
}
/* 上浮动画 */
.up:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
transform: translate(0, -5px);
}
/* 上浮的时间 */
.up-time {
transition: all 0.3s;
}
.up-dian:hover+.v {
transform: translate(0, -5px);
}
以上为网页的css样式代码,还有一些必备的基础css样式.
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li 的小圆点 */
li {
list-style: none;
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
/* a:hover {
color: #c81623;
} */
button,
input {
/*宋体 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 去除默认边框 */
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
以上代码,均能正常运行,图片以及字体图标可在网上自行下载
图片:小米商城官网
字体图标:Icon Font & SVG Icon Sets ❍ IcoMoon
并未使用js等添加动画,所有的动画效果均用css实现.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
