当前位置：首页 > news >正文

小米网页设计

news 2026/7/1 14:59:46

<!DOCTYPE html>
<html lang="zh-CN">
<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;
}
.top {
height: 40px;
background-color: #333;
color: #b0b0b0;
font-size: 12px;
line-height: 40px;
padding: 0 20px;
}
.top a {
color: #b0b0b0;
text-decoration: none;
margin: 0 8px;
}
.top .right {
float: right;
}
.header {
height: 100px;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.logo img {
width: 100px;
}
.header-list {
display: flex;
list-style: none;
}
.header-list li {
margin: 0 15px;
}
.header-list a {
color: #333;
text-decoration: none;
font-size: 16px;
}
.search {
width: 200px;
height: 38px;
border: 1px solid #eee;
display: flex;
}
.search input {
flex: 1;
border: 1px solid black;
outline: none;
padding: 0 10px;
}
.search button {
width: 38px;
border: 1px solid black;
background-color: #fff;
}
.main {
display: flex;
margin: 10px 20px;
}
.sider {
width: 200px;
height: 500px;
background-color: #644140;
}
.sider-list {
list-style: none;
}
.sider-list li {
padding: 15px 20px;
color: white;
font-size: 14px;
}

.main2 img{
height: 500px;
}

.products {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 0 20px;
}
table{
width: 350px;
height: 187px;
border:none;
background-color:#5F5750 ;
border-collapse: collapse;
}
th,td{
border: 1px solid white;
}
tr img{
width: 40px;
height: 40px;
margin: 0 35px;
}
tr p{
color: white;
text-align: center;
}
.product {
width: 23%;
text-align: center;
}
.product img {
width: 350px;

}
</style>
</head>
<body>
<div class="top">
<span> 小米官网 | 小米商城 | 小米彭湃OS | 小米汽车 | 云服务 | loT | 有品 | 小爱开放平台 | 资质证照 | 协议规则 | 下载app | SelectLocation </span>
<div class="right">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
<a href="#">购物车</a>
</div>
</div>

<div class="header">
<div class="logo">
<img src="./小米商标.jpg" alt="小米logo">
</div>
<ul class="header-list">
<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 class="search">
<input type="text">
<button>🔍</button>
</div>
</div>

<div class="main">
<div class="sider">
<ul class="sider-list">
<li>手机</li>
<li>电视</li>
<li>家电</li>
<li>笔记本平板显示</li>
<li>出行穿戴</li>
<li>耳机音箱</li>
<li>健康儿童</li>
<li>生活箱包</li>
<li>智能路由器</li>
<li>电源配件</li>
</ul>
</div>
<div class="main1">
<div class="main2">
<img src="./小米图.webp">
</div>
</div>
</div>
<div class="products">
<div>
<table>
<tr>
<th><img src="./保障服务.png"><p>保障服务</p></th>
<th><img src="./企业团购.png"><p>企业团购</p></th>
<th><img src="./f码通道.png"><p>f码通道</p></th>
</tr>
<tr>
<td><img src="./m粉卡.png"><p>m粉卡</p></td>
<td><img src="./以旧换新.png"><p>以旧换新</p></td>
<td><img src="./话费充值.png"><p>话费充值</p></td>
</tr>
</table>
</div>
<div class="product">
<img src="./米图.png">
</div>
<div class="product">
<img src="./米图2.png">
</div>
<div class="product">
<img src="./米图3.png">
</div>
</div>
</body>
</html>