发表于： 2020-05-04 22:54:48
1 1439
今天的任务：
今天主要重写任务56，其中不适用bs的框架问题并不大，原本的bs默认样式并不是很符合任务要求。
其中注意使图片自适应DIV垂直居中与水平居中，主要是利用的table表格中：vertical-align:middle; 这个属性，
以及利用display:table; 将DIV模拟成table.
在img标签上套了一个span,可以利用display:table-cell;
将其模拟成类似表格的TD元素，这样vertical-align:middle;垂直居中起到效果。
使用overflow隐藏图片超过部分；
注意盒子包裹的范围，因为一根线包在盒子里导致整个盒子的内容无法居中。
使用less的主体部分如下：
body {
background-color: #fafafa !important;
}
.header {
display: flex;
justify-content: space-between;
color: white;
background-color: #66cccc;
button {
border: none;
background-color: #66cccc;
}
.btn:hover, .btn:active, .btn:focus {
color: white;
border: none;
background-color: #55a5a5;
}
}
.main {
.main1, .main2 {
display: flex;
margin: 10px 0;
background-color: white;
input {
border: none;
box-shadow: none;
background-color: white;
}
}
span {
font-size: 20px;
line-height: 24px;
color: #cfcfcf;
text-align: center;
vertical-align: middle;
padding: 0 25px;
margin: 5px;
border-right: 1px solid #cfcfcf;
}
}
返回列表
评论