作业样式要求：
作业代码：
<!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> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; } input { outline: none; } .container { width: 1226px; margin: 0 auto; } .header .left img { width: 56px; height: 56px; } .head { display: flex; justify-content: space-between; align-items: center; } .head .mid ul { display: flex; } .head .mid ul li { margin-right: 30px; } .head .mid ul a { color: #757575; } .head .mid ul a:hover { color: orange; } .head .right { position: relative; } .head .right input { width: 245px; height: 40px; border: 1px solid #757575; border-radius: 5px; } .head .right span { display: inline-block; width: 52px; height: 40px; line-height: 40px; position: absolute; right: 0; } /* banner */ .banner { position: relative; margin-top: 20px; } .nav { position: absolute; top: 0; left: 0; } .nav ul { background-color: rgba(105, 101, 101, .6); width: 234px; height: 460px; font: 18px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; padding: 20px 0px; } .nav ul li { display: flex; justify-content: space-between; padding: 0px 30px; } .nav ul li a { display: inline-block; width: 234px; height: 42px; line-height: 42px; color: aliceblue; } .nav ul li:hover { background-color: orange; } .banner i { display: inline-block; width: 41px; height: 69px; font-size: 30px; } .a { position: absolute; top: 50%; margin-top: -33.5px; left: 240px; } .b { position: absolute; top: 50%; margin-top: -33.5px; right: 0; } .banner .circle { width: 200px; position: absolute; right: 15px; bottom: 15px; } .banner .circle span { display: inline-block; width: 10px; height: 10px; background-color: pink; border-radius: 50%; } /* banner end */ </style> </head> <body> <div class="header"> <div class="container head"> <div class="left"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png" alt=""></div> <div class="mid"> <ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">平板</a></li> <li><a href="#">家电</a></li> <li><a href="#">路由器</a></li> <li><a href="#">服务中心</a></li> <li><a href="#">社区</a></li> </ul> </div> <div class="right"> <input type="text"> <span>搜索</span> </div> </div> </div> <div class="banner container"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0942f8338bc19a2cde9394479fc123c8.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""> <div class="nav"> <ul> <li> <a href="#"> 手机 </a> <span>></span> </li> <li> <a href="#"> 电视 </a> <span>></span> </li> <li> <a href="#"> 家电 </a> <span>></span> </li> <li> <a href="#"> 笔记本 平板 </a> <span>></span> </li> <li> <a href="#"> 出行 穿戴 </a> <span>></span> </li> <li> <a href="#"> 耳机 音响 </a> <span>></span> </li> <li> <a href="#"> 健康 儿童 </a> <span>></span> </li> <li> <a href="#"> 生活 箱包 </a> <span>></span> </li> <li> <a href="#"> 智能 路由器 </a> <span>></span> </li> <li> <a href="#"> 电源 配件 </a> <span>></span> </li> </ul> </div> <i class="a"> <</i> <i class="b">></i> <div class="circle"> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
完成样式：
