123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <!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;
- }
- /* 工具类 */
- /* 清除浮动 */
- .clearfix::after {
- content: "";
- display: block;
- clear: both;
- }
- /* 字体库 */
- /* 声明字体 */
- @font-face {
- /* 字体名称 声明*/
- font-family: "iconfont";
- /* 引入字体 */
- src: url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.woff2?t=1752545241384') format('woff2'),
- url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.woff?t=1752545241384') format('woff'),
- url('https://at.alicdn.com/t/c/font_4974983_ok50xp288v.ttf?t=1752545241384') format('truetype');
- }
- /* 字体图标 使用iconfont这个就是开始使用自定义字体图标*/
- .iconfont {
- /* 字体图标 引用 */
- font-family: "iconfont" !important;
- font-size: 16px;
- /* 字体图标 正常 */
- font-style:normal;
- /* 字体图标 平滑 */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- /* 购物车图标 */
- .icon-gouwuchekong:before {
- content: "\e600";
- }
- /* 头部导航 开始 */
- .header-nav-content {
- width: 1226px;
- margin: 0 auto;
- }
- .header-nav {
- background-color: #333;
- }
- .header-nav .header-nav-left {
- float: left;
- }
- .header-nav .header-nav-right {
- float: right;
- }
- .header-nav ul li {
- float: left;
- font-size: 12px;
- color: #b0b0b0;
- height: 40px;
- line-height: 40px;
- }
- .header-nav-right ul,
- .header-nav-right .car {
- float: left;
- }
- .header-nav ul li:nth-child(2n) {
- color: #424242;
- margin: 0 6px;
- }
- .header-nav ul li:nth-child(2n+1):hover {
- cursor: pointer;
- color: #fff;
- }
- .header-nav .car {
- color: #b0b0b0;
- background-color: #444;
- font-size: 12px;
- line-height: 40px;
- margin-left: 20px;
- padding: 0 15px;
- }
- .download-btn {
- position: relative;
- }
- .download-btn:hover .download-app {
- display: block;
- }
- .download-app {
- position: absolute;
- left: 50%;
- margin-left: -60px;
- box-shadow: 0 0 10px rgba(0, 0, 0, .5);
- padding: 15px;
- line-height: 20px;
- display: none;
- }
- .download-app img {
- width: 90px;
- }
- .download-app p {
- font-size: 12px;
- color: #424242;
- text-align: center;
- }
- .download-app i {
- position: absolute;
- top: -20px;
- left: 50%;
- margin-left: -10px;
- border-top: 10px solid transparent;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-bottom: 10px solid white;
- }
- /* 头部导航 结束 */
- </style>
- </head>
- <body>
- <div class="container">
- <!-- 头部导航 开始 -->
- <div class="header-nav">
- <div class="header-nav-content clearfix">
- <div class="header-nav-left">
- <ul>
- <li>小米官网</li>
- <li>|</li>
- <li>小米商城</li>
- <li>|</li>
- <li>小米澎湃OS</li>
- <li>|</li>
- <li>小米汽车</li>
- <li>|</li>
- <li>云服务</li>
- <li>|</li>
- <li>IoT</li>
- <li>|</li>
- <li>有品</li>
- <li>|</li>
- <li>小爱开放平台</li>
- <li>|</li>
- <li>资质证照</li>
- <li>|</li>
- <li>协议规则</li>
- <li>|</li>
- <li class="download-btn">下载app
- <!-- 下载APP二维码弹框 -->
- <div class="download-app">
- <i></i>
- <img src="./image/download.png" alt="img">
- <p>小米商城APP</p>
- </div>
- </li>
- <li>|</li>
- <li>Select Location</li>
- </ul>
- </div>
- <div class="header-nav-right">
- <ul>
- <li>登录</li>
- <li>|</li>
- <li>注册</li>
- <li>|</li>
- <li>消息通知</li>
- </ul>
- <div class="car">
- <span> <i class="iconfont icon-gouwuchekong"></i> 购物车(0)</span>
- </div>
- </div>
- </div>
- </div>
- <!-- 头部导航 开始 -->
- </div>
- </body>
- </html>
|