|
|
@@ -0,0 +1,128 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* css reset */
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 公共样式 */
|
|
|
+ /* 页面主宽度且居中 */
|
|
|
+ .main-width {
|
|
|
+ width: 1226px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ /* 清除浮动 */
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部导航栏 start */
|
|
|
+ .top-nav {
|
|
|
+ height: 40px;
|
|
|
+ background-color: #333;
|
|
|
+ color: #b0b0b0;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-nav a {
|
|
|
+ color: #b0b0b0;
|
|
|
+ /* 字体样式 比如斜体 */
|
|
|
+ /* font-style: normal; */
|
|
|
+ /* 取消下划线 */
|
|
|
+ text-decoration:none ;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .top-nav .sep{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #424242;
|
|
|
+ margin: 0 3px;
|
|
|
+ }
|
|
|
+ .top-nav .top-nav-left{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .top-nav .top-nav-right{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .top-nav .top-nav-right .tnr-link{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .top-nav .top-nav-right .tnr-car{
|
|
|
+ float: left;
|
|
|
+ width: 120px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b0b0b0;
|
|
|
+ background-color: #424242;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ /* 顶部导航栏 end */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <div class="top-nav">
|
|
|
+ <div class="main-width clearfix">
|
|
|
+ <div class="top-nav-left">
|
|
|
+ <a href="#">小米官网</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">小米商城</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">小米澎湃OS</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">小米汽车</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">云服务</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">IoT</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 Location</a>
|
|
|
+ </div>
|
|
|
+ <div class="top-nav-right">
|
|
|
+ <div class="tnr-link">
|
|
|
+ <a href="#">登录</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">注册</a>
|
|
|
+ <span class="sep">|</span>
|
|
|
+ <a href="#">消息通知</a>
|
|
|
+ </div>
|
|
|
+ <div class="tnr-car">
|
|
|
+ <span>购物车(0)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <div class="nav"></div>
|
|
|
+ <!-- 轮播图区域 -->
|
|
|
+ <div class="swiper"></div>
|
|
|
+ <!-- bnner 区域 -->
|
|
|
+ <div class="banner"></div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
