<!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: 0;
margin: 0;
}
.banner{
width: 1226px;
height: 600px;
background-color: antiquewhite;
overflow: hidden;
}
ul{
list-style: none;
}
.head{
width: 1226px;
height: 40px;
background-color: black;
padding: 10px;
}
.head1{
display: flex;
width: 780px;
height: 25px;
background-color: blue;
align-items: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
color:white;
padding-left: 1px;
float: left;
}
.head1 a{
font-size: 12px;
padding: 3px;
}
.head2{
position: relative;
display: flex;
width: 300px;
height: 25px;
background-color: blue;
align-items: center;
justify-content: left;
margin-top: 10px;
margin-bottom: 10px;
color:white;
padding-left: 1px;
float: right;
}
.head2 a{
font-size: 12px;
padding: 3px;
}
.head3{
position: absolute;
width: 80px;
height: 20px;
background-color: red;
left: 1146px;
top: 24px;
}
.head3 a{
color: white;
font-size: 12px;
}
.body{
width: 1226px;
height: 100px;
background-color: white;
}
.logo {
width: 62px;
height: 100px;
background-color: green;
float: left;
display: flex;
}
.pc{
width: 56px;
height: 56px;
padding-top: 20px;
}
.logol{
position: relative;
display: flex;
width: 1164px;
height: 100px;
background-color: blueviolet;
float: right;
align-items: center;
justify-content: left;
}
.logol a{
padding-left: 30px;
}
.input{
position: absolute;
left: 900px;
top: 100px;
width: 200px;
height: 50px;
}
.book1{
width: 234px;
height: 460px;
background-color:yellow ;
float: left;
}
.book3{
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
}
.book3 li{
padding-top: 20px;
}
/* .book2{
width: 992px;
height: 460px;
background-color: orange;
float: right;
}*/
.foot{
position: relative;
width: 1226px;
height: 460px;
background-color: brown;
background-image: url(../图库/小米watch3.webp);
background-size: cover;
}
.left{
position: absolute;
width: 41px;
height: 69px;
left: 234px;
top: 200px;
background-color:blanchedalmond;
}
.right{
position: absolute;
width: 41px;
height: 69px;
left: 1185px;
top: 200px;
background-color:blanchedalmond;
}
.left :hover{
background-image: url(../图库/leftb.png);
}
.right :hover{
background-image: url(../图库/rightb.png);
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li class="head">
<div class="head1">
<a>小米官网</a>|
<a>小米商城</a>|
<a>小米澎湃OS</a>|
<a>loT</a>|
<a>云服务</a>|
<a>天星数科</a>|
<a>有品</a>|
<a>小爱开放平台</a>|
<a>资质证照</a>|
<a>协议规则</a>|
<a>下载app</a>|
<a> Select Location</a>
</div>
<div class="head2">
<a>登录</a>|
<a>注册</a>|
<a>消息通知</a>
</div>
<div class="head3">
<a>购物车(0)</a>
</div>
</li>
<li class="body">
<div class="logo">
<a ><img src="../图库/logo-mi2.png" alt="" class="pc"></a>
</div>
<div class="logol">
<a>Xiaomi手机</a>
<a>Redmi手机</a>
<a>电视</a>
<a>笔记本</a>
<a>平板</a>
<a>家电</a>
<a>路由器</a>
<a>服务中心</a>
<a>社区</a>
</div>
<div class="input">
<input type="text" placeholder="小米" width="200px" height=100"px">
</div>
</li>
<li class="foot">
<div class="book1">
<ul class="book3">
<li>手机 ></li>
<li>电视 ></li>
<li>家电 ></li>
<li>笔记本 平板 ></li>
<li>出行 穿戴 ></li>
<li>耳机 音箱 ></li>
<li>健康 儿童 ></li>
<li>生活 箱包 ></li>
<li>智能 路由器 ></li>
<li>电源 配件 ></li>
</ul>
</div>
<!-- <div class="book2">
</div>-->
<div class="left">
<img src="../图库/left.png" alt="">
</div>
<div class="right">
<img src="../图库/right.png" alt="">
</div>
</li>
</ul>
</div>
</body>
</html>
前端作业4
于 2023-11-30 03:12:53 首次发布