|
@@ -1,70 +1,143 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
<html lang="en">
|
|
|
|
|
+
|
|
|
<head>
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
<title>Document</title>
|
|
|
<style>
|
|
<style>
|
|
|
|
|
+ @font-face {
|
|
|
|
|
+ font-family: "iconfont";
|
|
|
|
|
+ /* Project id 4628991 */
|
|
|
|
|
+ src: url('http://at.alicdn.com/t/c/font_4628991_227qwyy7mkwh.woff2?t=1721634317431') format('woff2'),
|
|
|
|
|
+ url('http://at.alicdn.com/t/c/font_4628991_227qwyy7mkwh.woff?t=1721634317431') format('woff'),
|
|
|
|
|
+ url('http://at.alicdn.com/t/c/font_4628991_227qwyy7mkwh.ttf?t=1721634317431') format('truetype');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .iconfont {
|
|
|
|
|
+ font-family: "iconfont" !important;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-style: normal;
|
|
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon-search:before {
|
|
|
|
|
+ content: "\e739";
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon-cart:before {
|
|
|
|
|
+ content: "\e600";
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
/* css reset */
|
|
/* css reset */
|
|
|
- body,ul,p{
|
|
|
|
|
|
|
+ body,
|
|
|
|
|
+ ul,
|
|
|
|
|
+ p {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
}
|
|
}
|
|
|
- li{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
list-style: none;
|
|
list-style: none;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/* css 工具类 */
|
|
/* css 工具类 */
|
|
|
- .clearfix::after{
|
|
|
|
|
|
|
+ .clearfix::after {
|
|
|
content: "";
|
|
content: "";
|
|
|
display: block;
|
|
display: block;
|
|
|
clear: both;
|
|
clear: both;
|
|
|
}
|
|
}
|
|
|
- .content{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .content {
|
|
|
width: 1226px;
|
|
width: 1226px;
|
|
|
- margin:0 auto;
|
|
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ body {
|
|
|
|
|
+ font-family: "Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif";
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 头部导航 css start */
|
|
/* 头部导航 css start */
|
|
|
- .header-nav{
|
|
|
|
|
|
|
+ .header-nav {
|
|
|
background-color: #333;
|
|
background-color: #333;
|
|
|
color: #b0b0b0;
|
|
color: #b0b0b0;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
line-height: 40px;
|
|
line-height: 40px;
|
|
|
}
|
|
}
|
|
|
- .header-nav .content{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .content {
|
|
|
height: 40px;
|
|
height: 40px;
|
|
|
}
|
|
}
|
|
|
- .header-nav .hn-left{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .hn-left {
|
|
|
float: left;
|
|
float: left;
|
|
|
}
|
|
}
|
|
|
- .header-nav .hn-right{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .hn-right {
|
|
|
float: right;
|
|
float: right;
|
|
|
}
|
|
}
|
|
|
- .header-nav li{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav li {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .header-nav .hn-right ul{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .hn-right ul {
|
|
|
float: left;
|
|
float: left;
|
|
|
}
|
|
}
|
|
|
- .header-nav li:nth-child(even){
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav li:nth-child(even) {
|
|
|
color: #424242;
|
|
color: #424242;
|
|
|
}
|
|
}
|
|
|
- .header-nav li:nth-child(odd):hover{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav li:nth-child(odd):hover {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
}
|
|
}
|
|
|
- .header-nav .hn-right .car-content{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .hn-right .car-content {
|
|
|
float: right;
|
|
float: right;
|
|
|
background-color: #424242;
|
|
background-color: #424242;
|
|
|
color: #b0b0b0;
|
|
color: #b0b0b0;
|
|
|
padding: 0 20px;
|
|
padding: 0 20px;
|
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .hn-right .car-content:hover {
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .hn-right .car-content:hover span {
|
|
|
|
|
+ color: #ff6700;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .car-content:hover .car-info {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .car-info {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ width: 240px;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ top: 40px;
|
|
|
|
|
+ text-align: center;
|
|
|
}
|
|
}
|
|
|
- .header-nav .download-btn{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .download-btn {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
}
|
|
}
|
|
|
- .header-nav .download-btn .appcode{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .download-btn .appcode {
|
|
|
display: none;
|
|
display: none;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
@@ -73,10 +146,12 @@
|
|
|
width: 124px;
|
|
width: 124px;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
- .header-nav .download-btn:hover .appcode{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .download-btn:hover .appcode {
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
- .header-nav .download-btn .appcode::before{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .download-btn .appcode::before {
|
|
|
content: "";
|
|
content: "";
|
|
|
width: 0;
|
|
width: 0;
|
|
|
height: 0;
|
|
height: 0;
|
|
@@ -88,21 +163,24 @@
|
|
|
/* margin: -30px auto 0; */
|
|
/* margin: -30px auto 0; */
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
- top:-20px;
|
|
|
|
|
|
|
+ top: -20px;
|
|
|
margin-left: -10px;
|
|
margin-left: -10px;
|
|
|
}
|
|
}
|
|
|
- .header-nav .appcode img{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .appcode img {
|
|
|
width: 90px;
|
|
width: 90px;
|
|
|
height: 90px;
|
|
height: 90px;
|
|
|
/* 上 左右 下*/
|
|
/* 上 左右 下*/
|
|
|
- margin:18px auto 0;
|
|
|
|
|
|
|
+ margin: 18px auto 0;
|
|
|
}
|
|
}
|
|
|
- .header-nav .appcode p{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .header-nav .appcode p {
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
|
|
+
|
|
|
<body>
|
|
<body>
|
|
|
<div class="container">
|
|
<div class="container">
|
|
|
<!-- 头部导航 -->
|
|
<!-- 头部导航 -->
|
|
@@ -130,7 +208,7 @@
|
|
|
<li>|</li>
|
|
<li>|</li>
|
|
|
<li>协议规则 </li>
|
|
<li>协议规则 </li>
|
|
|
<li>|</li>
|
|
<li>|</li>
|
|
|
- <li class="download-btn">下载app
|
|
|
|
|
|
|
+ <li class="download-btn">下载app
|
|
|
<div class="appcode">
|
|
<div class="appcode">
|
|
|
<img src="./img/download.png" alt="二维码">
|
|
<img src="./img/download.png" alt="二维码">
|
|
|
<p>小米商城APP</p>
|
|
<p>小米商城APP</p>
|
|
@@ -149,17 +227,23 @@
|
|
|
<li>消息通知</li>
|
|
<li>消息通知</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
<div class="car-content">
|
|
<div class="car-content">
|
|
|
- <span>购物车(0)</span>
|
|
|
|
|
|
|
+ <span><i class="iconfont icon-cart"></i> 购物车(0)</span>
|
|
|
|
|
+ <div class="car-info">
|
|
|
|
|
+ <p>购物车中还没有商品，赶紧选购吧!</p>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 顶部导航 -->
|
|
<!-- 顶部导航 -->
|
|
|
- <div class="top-nav"></div>
|
|
|
|
|
|
|
+ <div class="top-nav">
|
|
|
|
|
+ <i class="iconfont icon-search"></i>
|
|
|
|
|
+ </div>
|
|
|
<!-- 轮播图区域 -->
|
|
<!-- 轮播图区域 -->
|
|
|
<div class="slider-content"></div>
|
|
<div class="slider-content"></div>
|
|
|
<!-- 商品展示区域 -->
|
|
<!-- 商品展示区域 -->
|
|
|
<div class="goods-content"></div>
|
|
<div class="goods-content"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</body>
|
|
</body>
|
|
|
|
|
+
|
|
|
</html>
|
|
</html>
|
