云计算作业3

Aigircsia

95人浏览 · 2025-12-25 19:05:37

Aigircsia · 2025-12-25 19:05:37 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网匹配版</title>
    <style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft Yahei", sans-serif;
  }
.header {
  width: 100%;
  padding: 15px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  }
.logo {
  width: 50px;
  height: 50px;
  background-color: #ff6700;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  }
.nav-top {
  display: flex;
  gap: 20px;
  margin-left: 20px;
  }
.nav-top a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  }
.search-box {
  display: flex;
  align-items: center;
  }
.search-box input {
  padding: 8px 10px;
  border: 1px solid #eee;
  outline: none;
  width: 200px;
  }
.search-box button {
  padding: 8px 15px;
  border: 1px solid #eee;
  background-color: white;
  cursor: pointer;
  margin-left: -1px;
  }
.container {
  display: flex;
  width: 100%;
}
.sidebar {
  width: 180px;
  background-color: #555;
  color: white;
  padding: 20px 0;
  font-size: 16px;
}
.sidebar-item {
  padding: 12px 25px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  }
.sidebar-item:hover {
  background-color: #ff6700;
  }

.banner {
  flex: 1;
  height: 400px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  position: relative;
  }
.banner-control {
  font-size: 30px;
  color: #999;
  cursor: pointer;
  z-index: 1;
        }
        .banner-content {
            text-align: left;
            max-width: 500px;
        }
        .banner-content .tag {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            margin-bottom: 10px;
        }
.banner-content h2 {  
   font-size: 42px;
   font-weight: bold;
   margin-bottom: 10px;
}
.banner-content p {
            font-size: 18px;
            color: #666;
            margin-bottom: 30px;
        }
.banner-btn {
            padding: 12px 30px;
            background-color: #c29969;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
.banner-img img {
            height: 300px;
        }
.banner-dots {
            position: absolute;
            bottom: 20px;
            right: 50px;
            display: flex;
            gap: 10px;
        }
.banner-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
.banner-dot.active {
            background-color: #666;
        }
.bottom-area {
            display: flex;
            padding: 20px 50px;
            gap: 20px;
        }
.service-card {
            width: 180px;
            background-color: #555;
            color: white;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 20px;
            text-align: center;
        }
   .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }
.product-row {
            flex: 1;
            display: flex;
            gap: 20px;
        }
.product-card {
            flex: 1;
            background-color: #f8f8f8;
            padding: 20px;
            text-align: center;
        }
 .product-card img {
            height: 150px;
            margin-bottom: 10px;
        }
 .product-card h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }
.product-card p {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">MI</div>
        <div class="nav-top">
            <a href="#">Xiaomi手机</a>
            <a href="#">REDMI手机</a>
            <a href="#">电视</a>
            <a href="#">笔记本</a>
            <a href="#">平板</a>
            <a href="#">家电</a>
            <a href="#">路由器</a>
            <a href="#">服务中心</a>
            <a href="#">社区</a>
        </div>
        <div class="search-box">
            <input type="text" placeholder="电饭煲">
            <button></button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-item">手机 &gt;</div>
            <div class="sidebar-item">电视 &gt;</div>
            <div class="sidebar-item">家电 &gt;</div>
            <div class="sidebar-item">笔记本 平板 显示器 &gt;</div>
            <div class="sidebar-item">出行 穿戴 &gt;</div>
            <div class="sidebar-item">耳机 音箱 &gt;</div>
            <div class="sidebar-item">健康 儿童 &gt;</div>
            <div class="sidebar-item">生活箱包 &gt;</div>
            <div class="sidebar-item">智能 路由器 &gt;</div>
            <div class="sidebar-item">电源 配件 &gt;</div>
        </div>
        <div class="banner">
            <div class="banner-control">&lt;</div>
            <div class="banner-content">
                <div class="tag">
                    <span>小米上新</span>
                </div>
                <h2>XIAOMI Sound 2 Max</h2>
                <p>强大音质 精简至极</p>
                <button class="banner-btn">立即查看</button>
            </div>
            <div class="banner-img">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b07a5c020c2c37f08a6dcc01316350ae.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="Xiaomi Sound 2 Max">
            </div>
            <div class="banner-control">&gt;</div>
            <div class="banner-dots">
                <div class="banner-dot active"></div>
                <div class="banner-dot"></div>
                <div class="banner-dot"></div>
                <div class="banner-dot"></div>
                <div class="banner-dot"></div>
            </div>
        </div>
    </div>
    <div class="bottom-area">
        <div class="service-card">
            <div class="service-item">
                <span>保障服务</span>
            </div>
            <div class="service-item">
                <span>企业团购</span>
            </div>
            <div class="service-item">
                <span>F码通道</span>
            </div>
            <div class="service-item">
                <span>米粉卡</span>
            </div>
            <div class="service-item">
                <span>以旧换新</span>
            </div>
            <div class="service-item">
                <span>话费充值</span>
            </div>
        </div>
<div class="product-row">
            <div class="product-card">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e981f78d2ac17c504975a719cb8b069d.png?w=632&h=340" alt="xiaomi 15系列">
                <h3>xiaomi 15系列</h3>
                <p>徕卡光学 | 骁龙8至尊版</p>
            </div>
            <div class="product-card">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8aa523aada018ed7e291b8d5c99d5cc7.png?w=632&h=340" alt="REDMI K Pad">
                <h3>REDMI K Pad</h3>
                <p>天玑旗舰芯 9400+</p>
            </div>
            <div class="product-card">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ce384835b97655abd1448f3e45eb48ff.png?w=632&h=340" alt="xiaomi Watch S4">
                <h3>xiaomi Watch S4</h3>
                <p>41mm小巧手表 | 专业运动健康 | 8天长续航</p>
            </div>
        </div>
    </div>
</body>
</html>

码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产