小米官网首页

阅读：评论：0

小米官网首页

<!DOCTYPE html>
<html>
<head><title>小米</title><style>body {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;}.navbar {height: 50px;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;}.navbar ul {list-style: none;margin: 0;padding: 0;display: flex;}.navbar li {margin-right: 20px;}.search-box {padding: 10px;display: flex;align-items: center;margin-top: 20px;}.search-box input[type="text"] {border: none;padding: 5px;font-size: 14px;width: 200px;}.search-box button {float: right;background-color: #ff6700;color: #fff;border: none;padding: 5px 10px;font-size: 14px;cursor: pointer;}.content {display: flex;align-items: flex-start;}.left-box {flex: 1;padding: 20px;}.image {width: 100%;display: block;}</style>
</head>
<body><div class="navbar"><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></ul><div class="search-box"><input type="text" placeholder="请输入搜索关键词"><button type="submit">搜索</button></div></div><div class="content"><div class="left-box"><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></ul></div><div class="right-box"><img class="image" src="./小米.jpeg" width="400" height="250"></div></div>
</body>
</html>

本文发布于:2024-02-01 12:56:17，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170676337936747.html

上一篇：【车间调度】论文阅读复现——effective neighbourhood functions for the flexible job shop problem

下一篇：小米官网首页代码示例

标签：小米首页官网

留言与评论（共有 0 条评论）