练习题
1.5k
等59人参与
优秀作业 2

根据下面HTML结构,完成图示布局效果,编写对应CSS代码:

<style>
/* 代码编写区域 */

</style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
代码块
复制 预览
复制成功!
代码块
复制 预览
复制成功!

图片描述

练习题示例

要求如下:

  1. main盒子,宽高均自适应可视区,带有浅蓝色背景
  2. 1、3子项,宽高100px,上下居中,分居两侧
  3. 2子项,宽度自适应剩余容器,高度自适应父容器
  4. 浏览器改变大小时,相关盒子尺寸及位置发生相应变化







先动手实现下,在查看参考答案哦。
  • 1
  • 1
代码块
复制 预览
复制成功!
代码块
复制 预览
复制成功!









## 参考答案
body {
    margin: 0;
}
.main {
    width: 100vw;
    height: 100vh;
    background: skyblue;
    display: flex;
    align-items: center;
}
.main div:nth-of-type(1) {
    width: 100px;
    height: 100px;
    background: pink;
}
.main div:nth-of-type(2) {
    flex-grow: 1;
    background: greenyellow;
    align-self: stretch;
}
.main div:nth-of-type(3) {
    width: 100px;
    height: 100px;
    background: pink;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
代码块
复制 预览
复制成功!
代码块
复制 预览
复制成功!
我的作业
去发布

登录后即可发布作业,立即

全部作业

学习学习

0
评论
提交于  2023-09-13 09:08:08

登录后即可查看更多作业,立即

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号