<!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>小米</title>
<link rel="stylesheet" href="./小米.css">
</head>
<body>
<div class="box">
<div class="box1">
<ul>
<li class="wenzi">小米官网</li>
<li class="sep">|</li>
<li class="wenzi">小米商城</li>
<li class="sep">|</li>
<li class="wenzi">MIUI</li>
<li class="sep">|</li>
<li class="wenzi">loT</li>
<li class="sep">|</li>
<li class="wenzi">云服务</li>
<li class="sep">|</li>
<li class="wenzi">天星数科</li>
<li class="sep">|</li>
<li class="wenzi">有品</li>
<li class="sep">|</li>
<li class="wenzi">小爱开放平台</li>
<li class="sep">|</li>
<li class="wenzi">企业团购</li>
<li class="sep">|</li>
<li class="wenzi">资质证照</li>
<li class="sep">|</li>
<li class="wenzi">协议规则</li>
<li class="sep">|</li>
<li class="wenzi">下载app</li>
<li class="sep">|</li>
<li class="wenzi">Select Location</li>
</ul>
</div>
<div class="box2">
<ul>
<li class="wenzi">登陆</li>
<li class="sep">|</li>
<li class="wenzi">注册</li>
<li class="sep">|</li>
<li class="wenzi">消息通知</li>
</ul>
</div>
<div class="box3">
<ul>
<li class="wenzi">购物车(0)</li>
</ul>
</div>
</div>
<div class="box4">
<ul>
<li>手机</li>
<li>查看更多></li>
</ul>
</div>
<div class="box5">
<img class="left" src="./1.jpg">
<div class="right">
<ul>
<li>
<img src="./2.jpg">
<p class="文字1">Redmi Note 12 Turbo</p>
<p class="文字2">狂暴引擎 超强性能释放</p>
<p class="文字3">1999元起</p>
</li>
<li>
<img src="./3.jpg">
<p class="文字1">Redmi K60</p>
<p class="文字2">骁龙8+ | 2K高光直屏 | 5500mAh</p>
<p class="文字3">2499元起<del>2699元</del></p>
</li>
<li>
<img src="./4.jpg">
<p class="文字1">Redmi K60 Pro</p>
<p class="文字2">【第二代骁龙8】狂暴引擎</p>
<p class="文字3">3299元起<del>3599元</del></p>
</li>
<li>
<img src="./5.jpg">
<p class="文字1">Redmi Note 12 Pro 极速版</p>
<p class="文字2">高通骁龙778G</p>
<p class="文字3">1699元起</p>
</li>
<li>
<img src="./6.jpg">
<p class="文字1">Xiaomi 13 限量定制色</p>
<p class="文字2">全新第二代骁龙8</p>
<p class="文字3">4999元</p>
</li>
<li>
<img src="./7.jpg">
<p class="文字1">Xiaomi 13 Pro</p>
<p class="文字2">全新第二代骁龙8</p>
<p class="文字3">4999元起</p>
</li>
<li>
<img src="./8.jpg">
<p class="文字1">Xiaomi 13</p>
<p class="文字2">全新第二代骁龙8</p>
<p class="文字3">3999元起</p>
</li>
<li>
<img src="./9.jpg">
<p class="文字1">Redmi Note 12 5G</p>
<p class="文字2">三星OLED护眼屏 | 骁龙5G芯</p>
<p class="文字3">1199元起</p>
</li>
</ul>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.box{
display: flex;
width: 1226px;
height: 40px;
background-color:#333;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.box1{
width: 800px;
}
.box1 ul{
display: flex;
justify-content: space-between;
align-items: center;
}
.box2{
width: 140px;
}
.box2 ul{
display: flex;
justify-content: space-between;
}
.box3{
display: flex;
width: 120px;
height: 40px;
background-color: #424242;
justify-content: center;
align-items:center;
}
.wenzi{
font-size: 12px;
color: #b0b0b0;
}
.sep{
font-size: 12px;
color: #616361;
}
.box4{
width: 1226px;
height: 58px;
background-color: #F5F5F5;
}
.box4 ul{
display: flex;
justify-content: space-between;
}
.box4 ul li:nth-child(1){
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.box4 ul li:nth-child(2){
font-size: 16px;
line-height: 58px;
color: #424242;
}
.box5 {
display: flex;
justify-content: space-between;
width: 1226px;
height: 628px;
background-color: #F5F5F5;
margin: 0 auto;
}
.left {
width: 234px;
height: 628px;
}
.right ul {
width: 978px;
height: 628px;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
align-content: space-between;
}
.right ul li{
width: 200px;
background-color: #ffff;
}
.文字1{
font-size: 14px;
font-weight: 400;
color: #333;
}
.文字2{
font-size: 12px;
color: #b0b0b0;
line-height: 40px;
}
.文字3{
color: #ff6700;;
line-height: 40px;
}
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
