|
|
@@ -6,7 +6,7 @@
|
|
|
<title>Document</title>
|
|
|
<style>
|
|
|
/* css reset */
|
|
|
- body,ul{
|
|
|
+ body,ul,p{
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
@@ -43,12 +43,17 @@
|
|
|
.header-nav li{
|
|
|
display: inline-block;
|
|
|
}
|
|
|
+
|
|
|
.header-nav .hn-right ul{
|
|
|
float: left;
|
|
|
}
|
|
|
.header-nav li:nth-child(even){
|
|
|
color: #424242;
|
|
|
}
|
|
|
+ .header-nav li:nth-child(odd):hover{
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
.header-nav .hn-right .car-content{
|
|
|
float: right;
|
|
|
background-color: #424242;
|
|
|
@@ -56,6 +61,46 @@
|
|
|
padding: 0 20px;
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
+ .header-nav .download-btn{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .header-nav .download-btn .appcode{
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -62px;
|
|
|
+ box-shadow: 0 1px 5px #aaa;
|
|
|
+ width: 124px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .header-nav .download-btn:hover .appcode{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .header-nav .download-btn .appcode::before{
|
|
|
+ content: "";
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ display: block;
|
|
|
+ border-top: 10px solid rgba(0, 0, 0, 0);
|
|
|
+ border-left: 10px solid rgba(0, 0, 0, 0);
|
|
|
+ border-right: 10px solid rgba(0, 0, 0, 0);
|
|
|
+ border-bottom: 10px solid #fff;
|
|
|
+ /* margin: -30px auto 0; */
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top:-20px;
|
|
|
+ margin-left: -10px;
|
|
|
+ }
|
|
|
+ .header-nav .appcode img{
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ /* 上 左右 下*/
|
|
|
+ margin:18px auto 0;
|
|
|
+ }
|
|
|
+ .header-nav .appcode p{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -85,7 +130,12 @@
|
|
|
<li>|</li>
|
|
|
<li>协议规则 </li>
|
|
|
<li>|</li>
|
|
|
- <li>下载app </li>
|
|
|
+ <li class="download-btn">下载app
|
|
|
+ <div class="appcode">
|
|
|
+ <img src="./img/download.png" alt="二维码">
|
|
|
+ <p>小米商城APP</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
<li>|</li>
|
|
|
<li> Select Location</li>
|
|
|
</ul>
|
