<!DOCTYPE html>
<html lang="zh">
<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">
<!-- 引入重置样式文件 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 引入基础样式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入字体图标对应的样式文件 -->
<link rel="stylesheet" href="fa/css/all.min.css">
<!-- 引入本页定制的样式文件 -->
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="favicon.ico">
<title>仿小米官网</title>
</head>
<body>
<!-- 顶部导航条 -->
<!-- 顶部导航条外部容器 -->
<div class="topbar-wrapper">
<div class="topbar w clearfix">
<ul class="service">
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">IoT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证照</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li>
<a class="app" href="javascript:;">
下载App
<!-- 添加一个弹出层 -->
<div class="qrcode">
<img src="img/download.png" alt="">
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<ul class="shop-cart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车（0）
</a>
</li>
</ul>
<ul class="user-info">
<li><a href="javascript:;">登录</a></li>
<li class="line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
<!-- 创建一个头部的外部容器 -->
<div class="header-wrapper">
<div class="header w clearfix">
<!-- 创建logo -->
<h1 class="logo" title="小米">
小米官网
<a class="home" href="/"></a>
<a class="mi" href="/"></a>
</h1>
<!-- 创建中间导航条的容器 -->
<div class="nav-wrapper">
<ul class="nav clearfix">
<li class="all-goods-wrapper">
<a class="all-goods" href="#">全部商品分类</a>
<!-- 创建左侧导航菜单 -->
<ul class="left-menu">
<li>
<a href="#">
手机 电话卡
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
电视 盒子
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
笔记本 平板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
家电 插线板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
出行 穿戴
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
智能 路由器
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
电源 配件
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
健康 儿童
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
耳机 音箱
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
生活 箱包
<i class="fas fa-angle-right"></i>
</a>
</li>
</ul>
</li>
<li class="show-goods"><a href="#">小米手机</a></li>
<li class="show-goods"><a href="#">Redmi 红米</a></li>
<li class="show-goods"><a href="#">电视</a></li>
<li class="show-goods"><a href="#">笔记本</a></li>
<li class="show-goods"><a href="#">家电</a></li>
<li class="show-goods"><a href="#">路由器</a></li>
<li class="show-goods"><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<!-- 创建一个弹出层 -->
<div class="goods-info">
</div>
</ul>
</div>
<!-- 创建搜索框的容器 -->
<div class="search-wrapper">
<form class="search" action="#">
<input type="text" class="search-inp">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
</div>
<!-- 创建一个banner的容器 -->
<div class="banner-wrapper">
<div class="banner w">
<ul class="img-list">
<li>
<a href="#">
<img src="./img/banner1.jpg" alt="">
</a>
</li>
仿小米官网首页的一个html+css练习demo.zip （35个子文件） 
code_21212 img 
2.jpg 92KB
download.png 3KB mi-home.png 388B banner4.jpg 271KB 1.jpg 91KB mi-logo.png 1KB banner3.jpg 322KB icon-slides.png 1KB banner1.jpg 348KB banner5.jpg 240KB 3.jpg 69KB banner2.jpg 65KB css 
reset.css 1KB index.min.css 5KB base.css 616B index.css 7KB favicon.ico 1KB
index.html 10KB fa webfonts fa-brands-400.woff 85KB fa-brands-400.ttf 126KB
fa-brands-400.svg 675KB fa-solid-900.woff 96KB fa-solid-900.eot 188KB fa-solid-900.ttf 187KB fa-brands-400.woff2 73KB fa-regular-400.woff2 13KB fa-brands-400.eot 127KB fa-regular-400.eot 34KB fa-regular-400.woff 16KB fa-regular-400.svg 141KB fa-regular-400.ttf 33KB fa-solid-900.woff2 74KB fa-solid-900.svg 820KB css all.css 68KB all.min.css 55KB资源评论
土豆片片
- 粉丝: 1883
最新资源
- (源码)基于Java和Spring Boot的小区物业管理系统.zip
- (源码)基于Spring Boot框架的健美操评分系统.zip
- (源码)基于Java和Spring等框架的沙县小吃点餐系统.zip
- (源码)基于Spring Boot框架的影院订票系统.zip
- (源码)基于Spring Boot框架的水果购物后台管理系统.zip
- (源码)基于Spring Boot框架的社区医院管理服务系统.zip
- (源码)基于Spring Boot框架的心灵治愈交流平台.zip
- (源码)基于Spring Boot框架的大学生就业服务平台.zip
- (源码)基于Java Spring框架的综合信息管理系统.zip
- (源码)基于Java和Spring+SpringMVC+MyBatis框架的课程在线教育资源管理系统.zip
- (源码)基于Spring Boot框架的OA办公系统.zip
- (源码)基于Spring Boot框架的创业及咨询管理系统.zip
- (源码)基于Java和Springboot框架的交流互动系统.zip
- (源码)基于Spring Boot框架的智慧图书管理系统.zip
- (源码)基于Spring Boot框架的体育馆使用预约平台.zip
- (源码)基于Spring Boot框架的在线答题练习平台.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
