发表于： 2020-04-09 23:58:18
2 1379
今天完成的事情
- 了解了 background-image、background-size
- 任务 5 大致布局
明天计划的事情
- 继续做任务 5
遇到的问题
- 上部的背景图最开始我以为是在 main 里设置两个 div，然后用上边用 img 标签，下边用一个设置了 z-index 的块来遮挡住上边的图片，结果效果不对。后来发现是要设置为背景图片，并设置 background-size: cover。
- main 处的「自我介绍」还没搞出来，要求文本能够自动换行还能垂直居中。可能是搞两个 div 进行某种设置。
- footer 处的两个按钮还不知道怎么处理。横向拉伸时按钮和屏幕、两个按钮间的距离几乎没变。用 % 弄出来效果不太对。
收获
- vertical-align 只对行内元素 inline、表格单元格元素 table-cell 生效，不能用它垂直对齐块级元素。
- 图片和 span 水平垂直居中。
.box { height: 60px; border: 1px solid red; text-align: center;
}span { vertical-align: middle; line-height: 60px;
}img { vertical-align: middle;
}
返回列表
评论