<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.two{
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
width: 70%;
height: 40px;
float: left;
}
.three{
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
width: 30%;
height: 40px;
float: right;
}
.father{
width: 1500px;
height: 100px;
position: relative;
top: 40px;
}
.son1{
width: 56px;
height: 56px;
position: absolute;
left: 14%;
top: 22px;
}
.son2{
list-style: none;
display: flex;
justify-content: space-around;
position: absolute;
top: 41px;
left: 25%;
width: 950px;
height: 100px;
}
.son3{
position: absolute;
top: 40px;
right: 0%;
}
.father2{
width: 1500px;
height: 460px;
background-image: url(../图片/4962de27885a8eb6b437a2ec63e0e9ec.jpg);
background-size: cover;
position: absolute;
top: 140px;
left: 6%;
}
.son4{
position: relative;
list-style: none;
color: white;
background-color: grey;
width: 300px;
height: 460px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
ul li{
margin-left: 30px;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
小米官网
<span>|</span>
小米商城
<span>|</span>
小米澎湃OS
<span>|</span>
loT
<span>|</span>
云服务
<span>|</span>
天星数科
<span>|</span>
有品
<span>|</span>
小爱开发平台
<span>|</span>
资质政策
<span>|</span>
协议规则
<span>|</span>
下载app
<span>|</span>
Select Location
</div>
<div class="three">
登录
<span>|</span>
注册
<span>|</span>
消息通知
<span>|</span>
购物车
</div>
</div>
<div class="father">
<div class="son1">
<img src="D:\HTML\图片\屏幕截图 2023-11-25 132020.png" alt="" width="56px" height="56px">
</div>
<ul class="son2">
<li>Xiaomi手机</li>
<li>Redmi手机</li>
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
<div class="son3">
<input type="text">
</div>
</div>
<div class="father2">
<ul class="son4">
<li>手机</li>
<li>电视</li>
<li>家电</li>
<li>笔记本 平板</li>
<li>出行 穿戴</li>
<li>耳机 音箱</li>
<li>健康 儿童</li>
<li>生活 箱包</li>
<li>智能 路由器</li>
<li>电源 配件</li>
</ul>
</div>
</body>
</html>
作业6.。
最新推荐文章于 2024-08-13 21:58:24 发布