<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米官网</title> </head> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #757575; } a:hover { color: #fff; } li { list-style: none; } .title { width: 1600px; height: 40px; list-style: none; display: flex; justify-content: center; align-items: center; color: #b0b0b0; background: #333; } .nav { width: 1100px; height: 40px; margin-left: 100px; } .nav-list { width: 1100px; height: 40px; list-style: none; display: flex; height: 40px; } .nav-list li { width: 80px; height: 40px; text-align: center; line-height: 40px; margin-left: 5px; margin-right: 5px; font-size: 12px; } .Document { width: 400px; height: 40px; } .Document-list { width: 400px; height: 40px; list-style: none; display: flex; height: 40px; } .Document-list li { width: 80px; height: 40px; text-align: center; line-height: 40px; margin-left: 5px; margin-right: 5px; font-size: 15px; } #cart { width: 160px; height: 40px; font-size: 18px; } #download { position: relative; } #download:hover #app { transform:translate(0,0); transition-duration:1s; transition-timing-function:ease; } #app { position: absolute; width: 90px; height: 90px; text-align: center; display: block; text-decoration: none; transform: translate(0, -130px); } .title2 { width: 1600px; height: 100px; list-style: none; display: flex; justify-content: center; align-items: center; /* background: #333; */ } #logo { margin-left: 100px; margin-right: 250px; width: 100px; height: 100px; } #nav2 { width: 1500px; height: 100px; display: flex ; /* background: red; */ } #nav2-list { width: 900px; height: 100px; list-style: none; display: flex; height: 40px; } .active { width: 100px; height: 100px; color: black; line-height: 100px; text-align: center; line-height: 100px; } #search { width: 300px; height: 100px; text-align: center; line-height: 100px; display: flex; justify-content: center; align-items: center; } #search input { width: 180px; height: 50px; /* border-radius: 15px; */ border: 1px solid #b0b0b0; padding-left: 10px; } .active a:hover { color: black; } #line { width: 50px; height: 50px; border: 1px solid #b0b0b0; position: relative; } #search-icon { top:0; left:0; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 25px; position: absolute; } .body1 { width: 1600px; height: 500px; display: flex; } .body1-left { margin-left: 80px; width: 340px; height: 500px; background: #6b6a6a; } .body1-left-list li { width: 340px; height: 50px; display: flex; } .body1-left-list li a { width: 200px; height: 50px; color:white; line-height: 50px; font-size: 14px; padding-left: 30px; } .body1-left-list-icon { width: 140px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; padding-left: 50px; color: white; } .body1-right { width: 1180px; height: 500px; background: lightblue; } .body1-right div img { width: 1180px; height: 500px; } .body1-right { position: relative; } #body1-right-choose { width: 1180px; height: 10px; margin-left: 1000px; position: absolute; transform: translate(0,-50px); } #line a:hover #search-icon { color: #ff6700; } .body2 { margin-top: 20px; width: 1600px; height: 300px; display: flex; } #body2-left { margin-left: 80px; width: 340px; height: 300px; background: lightgray; } #body2-right { width: 1260px; height: 300px; } #body2-right ul { display: flex; } #body2-right ul li { margin-left: 20px; width: 360px; height: 300px; } #body3 { margin-left: 80px; margin-top: 50px; margin-bottom: 50px; width: 1600px; height: 200px; } #body4 { margin-left: 80px; margin-bottom: 50px; width: 1600px; height: 40px; display: flex; } #body-left { width: 1400px; height: 40px; } #body-right { width: 200px; height: 40px; } #body5 { width: 1600px; height: 820px; margin-left: 80px; } .box0 { width: 1600px; height: 820px; background-color: lightgray; border: 1px solid black; display: flex; } .box1 { width: 350px; height: 820px; background-color: lightgray; } .box2 { display: flex; flex-direction:row; width: 1250px; height: 820px; background-color: lightgray; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } #body5 li { width: 300px; height: 400px; background-color: white; text-align: center; margin: 0 0 12.5px 12.5px; } .price { color: orange; } .explain { color: lightgray; font-size: 12px; } .buy { color: black; } </style> <!-- <link rel="stylesheet" href="css/css-init.css"> --> <link rel="stylesheet" href="css/iconfont/iconfont.css"> <link rel="stylesheet" href="css/search/iconfont.css"> <link rel="stylesheet" href="css/arrow/iconfont.css"> <body> <head> <div class="title"> <div class="nav"> <ul class="nav-list"> <li><a href="#">小米官网</a></li> <li><a href="#">小米商城</a></li> <li><a href="#">小米澎湃OS</a></li> <li><a href="#">小米汽车</a></li> <li><a href="#">云服务</a></li> <li><a href="#">loT</a></li> <li><a href="#">有品</a></li> <li><a href="#">小爱开放平台</a></li> <li><a href="#">资质证照</a></li> <li><a href="#">协议规则</a></li> <li id="download"> <a href="#">下载app</a> <img id="app" src="../images/app.png" alt="app"> </li> <li style="font-size: 10px;"><a href="#">Select Location</a></li> </ul> </div> <div class="Document"> <ul class="Document-list"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">消息通知</a></li> <li id="cart"><a href="#"><span class="iconfont icon-gouwuchekong"></span>购物车(0)</a></li> </ul> </div> </div> <div class="title2"> <div id="logo"> <img src="../images/xiaomi.png" alt="logo" width="100" height="100"> </div> <div id="nav2"> <div> <ul id="nav2-list"> <li class="active"><a href="#">Xiaomi手机</a></li> <li class="active"><a href="#">Redmi手机</a></li> <li class="active"><a href="#">电视</a></li> <li class="active"><a href="#">笔记本</a></li> <li class="active"><a href="#">平板</a></li> <li class="active"><a href="#">家电</a></li> <li class="active"><a href="#">路由器</a></li> <li class="active"><a href="#">服务中心</a></li> <li class="active"><a href="#">社区</a></li> </ul> </div> <div id="search"> <input type="text" id="search-input" placeholder="小米"> <div id="line"> <a href="#"> <span class="iconfont" id="search-icon"></span> </a> </div> </div> </div> </div> <div class="body1"> <div class="body1-left"> <ul class="body1-left-list"> <li> <a href="#">手机</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">电视</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">家电</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">笔记本 平板 显示器</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">出行 穿戴</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">耳机 音箱</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">健康 儿童</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">生活 箱包</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">智能 路由器</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> <li> <a href="#">电源 配件</a> <div class="body1-left-list-icon"> <span class="iconfont"></span> </div> </li> </ul> </div> <div class="body1-right"> <div id="body1-right-img"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e4d161c85dab18a5b0f6f95743034ab.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="body1-right"> </div> <div id="body1-right-choose"> <div> <input class="choose" type="radio" id="choose1" name="choose" value="choose1" checked> <input class="choose" type="radio" id="choose2" name="choose" value="choose2"> <input class="choose" type="radio" id="choose3" name="choose" value="choose3"> <input class="choose" type="radio" id="choose4" name="choose" value="choose4"> <input class="choose" type="radio" id="choose5" name="choose" value="choose5"> <input class="choose" type="radio" id="choose6" name="choose" value="choose6"> </div> </div> </div> </div> <div class="body2"> <div id="body2-left"> <img src="../images/body2-left.png" alt="body2-left" width="340" height="300"> </div> <div id="body2-right"> <ul> <li><a href="#"><img src="../images/body2-right-1.png" alt="body2-right1" width="360px" height="300px"></a></li> <li><a href="#"><img src="../images/body2-right-2.png" alt="body2-right2" width="360px" height="300px"></a></li> <li><a href="#"><img src="../images/body2-right-3.png" alt="body2-right3" width="360px" height="300px"></a></li> </ul> </div> </div> <div id="body3"> <img src="../images/body3.png" alt="body3" width="1500px" height="200px"> </div> <div id="body4"> <div id="body-left"> <h3>手机</h3> </div> <div id="body-right"> <b>查看更多</b> <span class="iconfont"></span> </div> </div> <div id="body5"> <div class="box0"> <div class="box1"> <img src="../images/M15.png" width="350px" height="812.5px"> </div> <div > <ul class="box2"> <li> <img src="../images/90PM.png" width="300px" height="300px"> <p class="buy">REDMI K90 Pro Max</p> <p class="explain">第五代 骁龙8至尊版 | 超级像素护眼...</p> <br> <p class="price">3999元起</p> </li> <li> <img src="../images/90.png" width="300px" height="300px"> <p class="buy">REDMI K90</p> <p class="explain">骁龙8至尊版 | Sound by bose联合...</p> <br> <p class="price">2599元起</p> </li> <li> <img src="../images/17PM.png" width="300px" height="300px"> <p class="buy">xiaomi 17 Pro Max</p> <p class="explain">徕卡光影大师 移动摄像系统 | 徕卡 5X...</p> <br> <p class="price">5999元起</p> </li> <li> <img src="../images/17P.png" width="300px" height="300px"> <p class="buy">xiaomi 17 Pro</p> <p class="explain">徕卡光影大师 移动摄像系统 | 徕卡 5...</p> <br> <p class="price">4999元起</p> </li> <li> <img src="../images/17.png" width="300px" height="300px"> <p class="buy">xiaomi 17</p> <p class="explain">徕卡光学 Summilux 高速镜头 | 光影...</p> <br> <p class="price">4499元起</p> </li> <li> <img src="../images/15P+.png" width="300px" height="300px"> <p class="buy">REDMI Note 15 Pro+</p> <p class="explain">真抗摔 真防水 长续航</p> <br> <p class="price">1899元起 <span style="text-decoration: line-through;color: lightgray;">2499元起</span></p> </li> <li> <img src="../images/15P.png" width="300px" height="300px"> <p class="buy">REDMI Note 15 Pro</p> <p class="explain">真抗摔 真防水 长续航</p> <br> <p class="price">1349元起 <span style="text-decoration: line-through;color: lightgray;">1499元起</span></p> </li> <li> <img src="../images/15.png" width="300px" height="300px"> <p class="buy">REDMI Note 15</p> <p class="explain">真抗摔 真防水 长续航</p> <br> <p class="price">999元起</p> </li> </ul> </div> </div> </div> </head> </body> </html>