admin管理员组文章数量:1567742
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>王臻的小米
</title>
<!--公共级样式-->
<link rel="stylesheet" href="css/common.css">
<!--页面级样式-->
<!--rel的意思是关联 stylesheet的意思是样式表-->
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="font/font-gouwuche/iconfont.css">
<link rel="stylesheet" href="font/font-fangdajing/iconfont.css">
<link rel="stylesheet" href="font/font-dayuhao/iconfont.css">
<link rel="stylesheet" href="font/font-xiaoyuhao/iconfont.css">
</head>
<body>
<!--广告-->
<div class="banner"></div>
<!--通栏显示-->
<div class="nav">
<!--居中-->
<div class="nav-1">
<ul id="ulleft">
<li><a href="#">小米商城 </li>
<li><a href="#">MIUI </li>
<li><a href="#">IoT </li>
<li><a href="#"> 云服务 </li>
<li><a href="#">天星数科 </li>
<li><a href="#">有品</li>
<li><a href="#">小爱开放平台 </li>
<li><a href="#"> 资质证照 </li>
<li><a href="#"> 协议规则 </li>
<li><a href="#"> 下载app </li>
<li><a href="#"> 智能生活 </li>
<li><a href="#"> Select Location </li>
</ul>
<!--使用字体图标
1.引入inconfont字体文件
2.挑选相应图标类名，应用于界面
-->
<ul id="ulright">
<li class="cart">
<span class="iconfont icon-gouwuche1">购物车(0)</span>
</li>
<li><a href="#"> 消息通知 </li>
<li><a href="#"> 注册 </li>
<li><a href="#"> 登录 </li>
</ul>
</div>
<div class="center-box header-box">
<div class="logo-box">
<img src="images/mi-logo.png" alt="mi-logo">
</div>
<ul class="menu-box">
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi 红米</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>
</ul>
<div class="search-box">
<input type="text" placeholder="请输入搜索内容" >
<a class="search-btn" href="#">
<div class="fangdajing"><span class="iconfont icon-fangdajing fangdajing"></span></div>
</a>
</div>
</div>
<!--轮播图-->
<!--关于导航栏的定位的问题
定位要关于相关的内容的父类来进行定位
如下的cate-box 的定位要关于slide-box进行定位
-->
<div class="center-box slide-box">
<!--装图片的容器-->
<div class="img-box">
<img src="images/lunbo.webp" alt="">
</div>
<!--左侧分类容器-->
<!--如果没写入内容的时候高度为0-->
<div class="cate-box">
<ul class="cate-list">
<li class="main-menu">手机 电话卡
<span class="iconfont icon-dayuhao"></span>
<div class="sub-menu-box">
<ul>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
<ul>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
<ul>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
<ul>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</div>
</li>
<li class="main-menu">电视 盒子
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">笔记本 显示器
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">家电 插线板
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">出行 穿戴
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">智能 路由器
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">电源 配件
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">健康 儿童
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">耳机 音响
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
<li class="main-menu">生活 箱包
<span class="iconfont icon-dayuhao"></span>
<ul class="sub-menu-box">
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
<li class="sub-menu">
<img class="sub-img" src="images/sub-menu01.webp" alt="">
<span class="sub-text">小米11</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="center-box channel-box">
<ul class="channel-left">
<li>
<div class="img-top">
<a href="#" alt=""><img src="images/channel01.png">小米秒杀</a>
</div>
</li>
<li>
<div class="img-top">
<a href="#"><img src="images/channel02.png" alt="">企业团购<a>
</div>
</li>
<li>
<div class="img-top">
<a href="#"><img src="images/channel03.png" alt="">F码通道<a>
</div>
</li>
<li>
<div class="img-bottom">
<a href="#"><img src="images/channel04.png" alt="">米粉卡<a>
</div>
</li>
<li>
<div class="img-bottom">
<a href="#"><img src="images/channel05.png" alt="">以旧换新<a>
</div>
</li>
<li>
<div class="img-bottom">
<a href="#"><img src="images/channel06.png" alt="">话费充值<a>
</div>
</li>
</ul>
<div class="channel-right">
<a class="right-img">
<img src="images/img03.jpg" alt="">
</a>
<a class="right-img">
<img src="images/img04.jpg" alt="">
</a>
<a class="right-img">
<img src="images/img05.jpg" alt="">
</a>
</div>
</div>
<!--小米闪购-->
<div class="main-content">
<div class="center-box">
<!--标题-->
<div class="sale-header-box">
<div class="center-box ">
<!--标题-->
<h2 class="flashsale-header">小米闪购</h2>
<!--按钮-->
<div class="btn-box">
<span class="iconfont icon-xiaoyuhao1"></span>
<span class="iconfont icon-dayuhao"></span>
</div>
</div>
</div>
<!--内容-->
<div class="sale-content">
<div class="sale-time">
<div class="start-time">14点场</div>
<img class="light" src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="">
<div class="end-text">距离结束还有</div>
<div class="end-time">
<span class="time-num">05</span>
<span class="time-syb">:</span>
<span class="time-num">34</span>
<span class="time-syb">:</span>
<span class="time-num">52</span>
</div>
</div>
<!--shift加f 代码格式化-->
<div class="sale-list-box">
<ul class="sale-list-wapper">
<li class="sale-list">
<a href="#">
<img class="sale-list-photo" src="images/shangou01.webp">
<h3 class="sale-list-header">小米净水器400G增强版 白色</h3>
<div class="sale-list-text">RO反渗透，大流量直出纯净水</div>
<div class="sale-list-price-box">
<span class="sale-list-price">1098元</span>
<span class="sale-list-price-after">1499元</span>
</div>
</a>
</li>
<li class="sale-list">
<a href="#">
<img class="sale-list-photo" src="images/shangou02.webp">
<h3 class="sale-list-header">小米净水器400G增强版 白色</h3>
<div class="sale-list-text">RO反渗透，大流量直出纯净水</div>
<div class="sale-list-price-box">
<span class="sale-list-price">1098元</span>
<span class="sale-list-price-after">1499元</span>
</div>
</a>
</li>
<li class="sale-list">
<a href="#">
<img class="sale-list-photo" src="images/shangou03.webp">
<h3 class="sale-list-header">小米净水器400G增强版 白色</h3>
<div class="sale-list-text">RO反渗透，大流量直出纯净水</div>
<div class="sale-list-price-box">
<span class="sale-list-price">1098元</span>
<span class="sale-list-price-after">1499元</span>
</div>
</a>
</li>
<li class="sale-list">
<a href="#">
<img class="sale-list-photo" src="images/shangou04.png">
<h3 class="sale-list-header">小米净水器400G增强版 白色</h3>
<div class="sale-list-text">RO反渗透，大流量直出纯净水</div>
<div class="sale-list-price-box">
<span class="sale-list-price">1098元</span>
<span class="sale-list-price-after">1499元</span>
</div>
</a>
</li>
<li class="sale-list-photo" class="sale-list">
11
</li>
<li class="sale-list-photo" class="sale-list">
22
</li>
</ul>
</div>
</div>
</div>
<!--广告图位-->
<a href="#" class="center-box banner">
<img src="images/img07.webp" alt="">
</a>
</div>
</body>
</html>
版权声明：本文标题：仿写小米页面的html 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726414653a1069662.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论