今天完成的事情
任务八第一个页面进行代码优化，试着加响应式
明天计划的事情
后两个页面代码调整、加响应式
遇到的问题
友情链接用了列表，加响应式小屏显示时，列表标志与列表项距离好远，不能居中；鼠标hover列表项上面时，添加的boder也没有居中
收获
1.bootstrap网格布局的应用，.col-xs- .col-sm- .col-md- .col-lg-可以设置不同数字来适应盒子在不同设备上所占空间，只要一行里面的沾满12格，就可以不用加.row
2.媒体查询：@media screen and (max-width: 300px) { }，可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。花括号里面写不同屏幕下的样式。媒体查询加栅格布局就可以很好实现自适应
3.flex布局
1.容器的属性
（1）flex-direction属性决定主轴的方向（即项目的排列方向）：
flex-direction：row |row-werse |column |column-reverse主轴为水平方向，起点在左/右；主轴为垂直方向，起点在上沿/下沿
（2） flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap：nowrap |wrap | wrap-reverse;不换行/换行，第一行在上方/换行，第一行在下方。
（3 ）flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
（4 ）justify-content属性定义了项目在主轴上的对齐方式
justify-content：flex-start | flex-end | center | space-between | space-around左对齐/右对齐/居中/两端对齐，项目之间的间隔都相等/每个项目两侧的间隔相等
（5）align-items属性定义项目在交叉轴上如何对齐
align-items：flex-start | flex-end | center | baseline | stretch交叉轴的起点对齐/交叉轴的终点对齐/交叉轴的中点对齐/项目的第一行文字的基线对齐如果项目未设置高度或设为auto，将占满整个容器的高度
（6）align-content没看懂
2.项目的属性（3 4 5没看懂）
（1）order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
（2）flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
（3 ）flex-shrink
（4 ）flex-basis
（5）flex
（6）align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
align-self: auto | flex-start | flex-end | center | baseline | stretch
返回列表
评论