第三天:
<!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>
a{
position: relative;
display: inline-block;
width: 120px;
height: 58px;
background-repeat: no-repeat;
text-align: center;
line-height: 58px;
}
.abc{
position: absolute;
bottom: -250px;
left: 0px;
}
a:nth-child(1){
background-image: url(../images/bg1.png);
}
a:nth-child(2){
background-image: url(../images/bg2.png);
}
a:nth-child(3){
background-image: url(../images/bg3.png);
}
a:nth-child(4){
background-image: url(../images/bg4.png);
}
a:hover:nth-child(1){
background-image: url(../images/bg5.png);
}
a:hover:nth-child(2){
background-image: url(../images/bg6.png);
}
a:hover:nth-child(3){
background-image: url(../images/bg7.png);
}
a:hover:nth-child(4){
background-image: url(../images/bg8.png);
}
</style>
</head>
<body>
<a href="">111</a>
<a href="">222</a>
<a href="">333</a>
<a href="">444<img src="../images/1.gif" alt="" class="abc"></a>
</body>
</html>
第四天:
<!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>
a{
text-decoration: none;
color: black;
}
.biaoti a:hover{
color: orange;
}
.tubiao{
width: 170px;
}
.one{
margin-right: 200px;
margin-left: 200px;
}
li{
list-style-type: none;
}
.header ul{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
.father{
display: flex;
width: 1300px;
height: 500px;
background-color: gray;
flex-direction: row;
justify-content: space-around;
align-content: space-between;
flex-wrap: wrap;
}
.father1{
display: flex;
width: 200px;
height: 500px;
}
.father2{
display: flex;
width: 1100px;
height: 500px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.son{
display: flex;
position: relative;
width: 170px;
height: 500px;
flex-direction: column;
justify-content: space-around;
align-content: space-around;
}
.son ul{
padding: 0;
}
.son li{
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
.son li:hover{
background-color: orange;
}
.abc{
position: absolute;
right: -260px;
}
</style>
</head>
<body>
<div class="header one">
<ul>
<li class="tubiao"><img src="../小米官网/小米图标.png" alt=""></li>
<li class="biaoti"><a href="">Xiaomi手机</a></li>
<li class="biaoti"><a href="">Redmi手机</a></li>
<li class="biaoti"><a href="">电视</a></li>
<li class="biaoti"><a href="">笔记本</a></li>
<li class="biaoti"><a href="">平板</a></li>
<li class="biaoti"><a href="">家电</a></li>
<li class="biaoti"><a href="">路由器</a></li>
<li class="biaoti"><a href="">服务中心</a></li>
<li class="biaoti"><a href="">社区</a></li>
<li><form action="#"><input type="text"><button>提交</button></form></li>
</ul>
</div>
<div class="father one">
<div class="father1">
<div class="son1 son"><ul>
<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>
<li><a href="">生活 箱包</a></li>
<li><a href="">智能 路由器</a></li>
<li><a href="">电源 配件</a></li>
</ul></div>
</div>
<div class="father2">
<img src="../小米官网/小米图片.png" alt="" width="1100px" height="500px">
</div>
</div>
</body>
</html>
上述代码运行结果: