html+css简单静态小米官网
把之前做的改进了一下，其他的都是一样的布局
效果图：
新增了一些字体文件
不多说上代码
HTML代码：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 网站说明 -->
<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." />
<!-- 关键字 -->
<meta name="Keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title> 小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站
</title>
</title>
<!-- 字体图标样式 -->
<link rel="shortcut icon" href="mi_favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<!-- 公共样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 内容样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 轮播图样式 -->
<link rel="stylesheet" href="css/style.css">
<!-- 首页样式 -->
<link rel="stylesheet" href="css/index.css">
<!-- 底部样式 -->
<link rel="stylesheet" href="css/footer.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="topBar">
<div class="w">
<div class="topBar-left">
<a href="">小米商城</a>
<span class="sep">|</span>
<a href="">MIUI</a>
<span class="sep">|</span>
<a href="">loT</a>
<span class="sep">|</span>
<a href="">云服务</a>
<span class="sep">|</span>
<a href="">金融</a>
<span class="sep">|</span>
<a href="">有品</a>
<span class="sep">|</span>
<a href="">小爱开放平台</a>
<span class="sep">|</span>
<a href="">政企服务</a>
<span class="sep">|</span>
<a href="">下载app</a>
<span class="sep">|</span>
<a href="">select Region</a>
</div>
<div class="topBar-right">
<ul>
<li> <a href="">登陆</a></li>
<li> <span class="sep">|</span></li>
<li> <a href="">注册</a></li>
<li> <span class="sep">|</span></li>
<li><a href="">消息通知</a></li>
<li>
<a href="#" class="sp-cart">
购物车(0)
</a>
<div class="topbar-cart-menu">
<div class="topbar-cart-txt">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 导航栏end -->
<!-- logo -->
<div class="header">
<div class="container2 w">
<div class="logo">
<h1>
<a href="index.html" title="小米">小米</a>
</h1>
</div>
<!--导航菜单栏-->
<div class="nav">
<ul>
<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><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!--搜索部分-->
<div class="search">
<input type="search" name="goods" placeholder="请输入商品" id="s1">
<button type="submit" id="s2"></button>
</div>
</div>
</div>
<!-- 轮播图部分 -->
<div id="big_banner_wrap">
<div class="w">
<ul id="banner_menu_wrap">
<li class="active" img>
<a>手机 平板</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 600px; top: -20px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/minote.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/mi4.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/hongmi2.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/hongmi2a.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/note2.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/note2.jpg"></a><a>手机<a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/mipad.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/telcom.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/heyue.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/zhongxin.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/compare.jpg"></a><a>手机</a></li>
</ul>
</div>
</li>
<li>
<a>电视 盒子</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 600px; top: -62px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/tv40.jpg"></a><a>大米电视40英寸</a></li>
<li>
<a><img src="img/tv48.jpg"></a><a>大米电视48英寸</a></li>
<li>
<a><img src="img/tv49.jpg"></a><a>大米电视49英寸</a></li>
<li>
<a><img src="img/hezis.jpg"></a><a>大米电视55英寸</a></li>
<li>
<a><img src="img/hezis.jpg"></a><a>大米盒子</a></li>
<li>
<a><img src="img/hezis.jpg"></a><a>大米盒子MINI</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/dianshipeijian.jpg"></a><a>大米电视配件</a><span>选购</span></li>
</ul>
</div>
</li>
<li>
<a>路由器 智能配件</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 900px; top: -104px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/miwifi.jpg"></a><a>大米路由器</a></li>
<li>
<a><img src="img/miwifilite.jpg"></a><a>大米路由器 青春版</a></li>
<li>
<a><img src="img/air.jpg"></a><a>净化器</a></li>
<li>
<a><img src="img/xiaoyi.jpg"></a><a>摄像机</a></li>
<li>
<a><img src="img/scale.jpg"></a><a>体重称</a></li>
<li>
<a><img src="img/scale.jpg"></a><a>智能插头</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/miwifimini.jpg"></a><a>大米路由器MINI</a></li>
<li>
<a><img src="img/wifiExtension.jpg"></a><a>大米WIFI放大器</a></li>
<li>
<a><img src="img/yicamera.jpg"></a><a>运动相机</a></li>
<li>
<a><img src="img/water.jpg"></a><a>净水器</a><
最低0.47元/天 解锁文章
2028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
