发表于： 2020-03-09 22:21:14
1 1257
今日完成的事
学习bootstrap4新特性 弹性盒
应用bootstrap于任务中
<header class="d-flex justify-content-around align-items-center">
<div class="btn_wrap row">
<div class="btn_top btn_top_l d-flex justify-content-around align-items-center">找雇主</div>
<div class="btn_top btn_top_r d-flex justify-content-around align-items-center">找护工</div>
</div>
</header>
<main>
header {
height: 6.8vh;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #5fc0cd;
/* outline: 1px solid red; */
}
/* 按键容器 */
.btn_wrap {
width: 39.6vw;
height: 5.4vh;
background-color: #55a8b3;
border-radius: 8px;
}
/* 共同样式 */
.btn_top {
width: 50%;
height: 100%;
border-radius: 8px;
font-size: 1.2em;
}
.btn_top_l {
background-color: #55a8b3;
color: #fff;
}
.btn_top_r {
background-color: #fff;
color: #55a8b3;
}
明日计划
学习雪碧图的自适应
遇到的问题
bootstrap教程中有很多特殊的类名
经查询为辅助类
例 p-2 mb-3
p为padding m为margin b为bottom 每数字1 为0.25rem
图片为bootstrap css部分源代码
参考https://www.w3cschool.cn/mdui/mdui-ntzo241k.html
收获
会应用bootstrap中的弹性盒
返回列表
评论