发表于： 2017-03-30 21:06:17
2 728
今天完成的事情：完成任务5
明天计划的事情：
1.任务6中要求以bootstrap为基础布局，先了解一下；
2.完成任务6切图；
3.完成布局。
遇到的问题：
- 人物介绍面板背景不能自动拉伸，解决办法：查阅 background的各项属性，
background-repeat,默认重复，设置设no-repeat可实现不平铺重复。background-size：尺寸属性，background-size：cover；设置背景图片拉伸至填满背景区域，子背景区域宽度不定的情况下可以实现背景图片自动拉伸填充。
2.header中的两个元素“>” h和 字符段“个人简介”居中问题，理论上可以使用设置text-height，再通过text-alignui实现，但是，强行使用了flex布局，div里面只有两个元素的情况向强行加一个空的<span>，如下：
再通过justify-content:space-between;来实现居中。
3.地图button设置flex，在拉伸后出现变形，请教师兄发现是由于设置border-radius: 5%造成的，只要将弧度改成具体值即可。
更改前后效果对比。
收获：
看了官网任务中的介绍，想到使用<ul><li>标签，但是这个思路可能出了点偏差，用了下面的结构写完之后请教师兄发现竟然可以通过一组<ul>标签实现，哭死我了~
返回列表
评论