铁柱%* 2021-05-10 22:31 采纳率: 87.5%
浏览 22
已采纳

div+css布局 3是我的结果 4是效果图 不知道哪里出错

div+css布局 3是我的结果 4是效果图 不知道哪里出错
  • 写回答

1条回答 默认 最新

  • wanmeikakaxi 2021-05-11 09:17
    关注

    参考一下我给你修改好的吧，下次如果提问，最好把代码贴上来，不然你的问题无人问津。

    满意的话，记得采纳答案，谢谢。

    动态演示图

    代码 

    <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 MATLAB卫星二体模型仿真
  • ¥15 怎么让数码管亮的同时让led执行流水灯代码
  • ¥20 SAP HANA SQL Script 。如何判断字段值包含某个字符串
  • ¥85 cmd批处理参数如果含有双引号，该如何传入？
  • ¥15 fx2n系列plc的自控成型机模拟
  • ¥15 时间序列LSTM模型归回预测代码问题
  • ¥50 使用CUDA如何高效的做并行化处理，是否可以多个分段同时进行匹配计算处理？目前数据传输速度有些慢，如何提高速度，使用gdrcopy是否可行？请给出具体意见。
  • ¥15 基于STM32，电机驱动模块为L298N，四路运放电磁传感器，三轮智能小车电磁组电磁循迹（两个电机，一个万向轮），如何通过环岛的原理及完整代码
  • ¥20 机器学习或深度学习问题？困扰了我一个世纪，晚来天欲雪，能饮一杯无？
  • ¥15 c语言数据结构高铁订票系统