首页用html+css写一个小米网页头部

用html+css写一个小米网页头部

时间: 2023-05-26 15:01:28 浏览: 111

<!DOCTYPE html> <html> <head> <title>小米官网</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header"> <div class="logo"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/266e2814ef4db753016f22a7631b4432.png?thumb=1&w=120&h=120" alt="小米官方网站logo"> </div> <nav class="nav"> <ul> <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="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> </ul> </nav> <div class="search"> <form> <input type="text" placeholder="搜索..."> <button type="submit">搜索</button> </form> </div> <div class="cart"> <a href="#"> <i class="iconfont"></i> <span>购物车</span> </a> </div> </div> </body> </html> <style> .header { display: flex; align-items: center; justify-content: space-between; padding: 20px; background-color: #f5f5f5; } .logo img { width: 50px; } .nav ul { display: flex; list-style: none; margin: 0; padding: 0; } .nav a { display: block; padding: 10px; color: #333; text-decoration: none; } .search input { border-radius: 20px; border: none; padding: 5px 10px; } .search button { background-color: #ff6700; color: #fff; border: none; padding: 5px 10px; border-radius: 20px; margin-left: 10px; cursor: pointer; } .cart a { display: flex; align-items: center; color: #333; text-decoration: none; } .cart a i { font-size: 20px; margin-right: 5px; } </style>

阅读全文