div+css布局
3是我的结果
4是效果图
不知道哪里出错![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/dbce800aff4430ac9966d4d83c456dde-0.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/3136b7a83777b4a25e578991062ddcbd-1.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/15838a8df0c4e69f382d64fd54263559-2.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/2daabe77cfe9f253aa9cb5cbae165f80-3.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/dbce800aff4430ac9966d4d83c456dde-0.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/3136b7a83777b4a25e578991062ddcbd-1.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/15838a8df0c4e69f382d64fd54263559-2.png)
![](https://userblink.csdnimg.cn/20210510/m0_56312452/pic/2daabe77cfe9f253aa9cb5cbae165f80-3.png)
参考一下我给你修改好的吧,下次如果提问,最好把代码贴上来,不然你的问题无人问津。
满意的话,记得采纳答案,谢谢。
动态演示图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top01 {
background-color: #f00;
padding: 0px 50px 100px 50px;
width: 100px;
text-align: center;
float: left;
}
.top02 {
float: right;
background-color: green;
padding: 0px 20px 20px 20px;
text-align: center;
}
.daohacgtiao {
padding: 0px 0px 20px 50px;
background-color: green;
text-align: center;
clear: both;
}
#box {
width: 100%;
display: flex;
margin-top: 5px;
}
.body000 div {
background-color: #05ecf7;
margin: 0 0 10px;
width: 300px;
height: 200px;
text-align: center;
}
.a00 {
width: 100%;
}
.a00 div {
margin: 0px 10px 10px 10px;
}
.body04 {
height: 300px;
background-color: #87CEEB;
text-align: center;
}
.body05 {
height: 300px;
background-color: #87CEEB;
text-align: center;
}
.body06 {
width: 300px;
height: 600px;
background-color: purple;
float: left;
text-align: center;
}
.last {
background-color: pink;
padding: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="top01">logo</div>
<div class="top02">语言选择</div>
</div>
<div class="daohacgtiao">导航条</div>
<div id="box">
<div class="body000">
<div class="body010">客户服务</div>
<div class="body020">精彩视频</div>
<div class="body030">征信系统共享成员</div>
</div>
<div class="a00">
<div class="body04">核心业务</div>
<div class="body05">征信系统问答</div>
</div>
<div class="body06">征信动态</div>
</div>
<div class="last"></div>
</body>
</html>