代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } .top{ height: 40px; background-color: #333333; text-align: center; } ul{ list-style: none; } ul li{ float: left; text-align: center; line-height: 40px; } .left ul{ margin-left: 350px; } .right ul{ margin-left: 1355px; } .right li:last-child a{ width: 80px; margin-left: 14px; } .right li:last-child a:hover{ color: orange; background-color: #fff; } a{ display: block; color: #b0b0b0; font-size: 12px; padding: 0 6px; text-decoration: none; } a:hover{ color: #fff; } </style> </head> <body> <div class="top"> <div class="left"> <ul> <li><a href="#">小米商城</a></li> <li><a href="#">MIUI</a></li> <li><a href="#">IoT</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> <li><a href="#">下载app</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">Select Location</a></li> </ul> </div> <div class="right"> <ul> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li><a href="#">消息通知</a></li> <li><a href="#">购物车(0)</a></li> </ul> </div> </div> </body> </html>
效果图:
07-01
3629
07-23
227
03-03
8281
05-25
440
03-29
413