发表于: 2018-07-28 10:18:02
1 660
写了好久不小心按了刷新,然后全没了,重新写一遍23333
一、今天完成的事情
1、footer部分排版
footer部分使用的position定位方式是fixed;使之左右下的位置分别为0,靠近底端;
中间2个元素使用flex布局。(默认flex布局的元素是没有间距的是吗??)
分别设置padding和margin数值来达到图示效果:
2、背景图片设置
分为2个大块,左边img,右边是文字和图标;
头像用的是absolute定位;右侧大的div设置好间距,与头像并列;
其中右侧小图标也是使用的absolute;
3、文字部分设置
第一行使用的是大div套小div来画竖线;设置好间距;
第二行要注意的是图片和文字并列,如何垂直居中:
搜到来一个解决方法:
.contain2 img
{
vertical-align: middle;
}
在图片下面设置可以实现;这里不换行,使用的排列方式是图标+span+图标+span;
4、下面3行都是一样的布局:
使用来大div套2个小div来实现,都用float:left;但是发现设置后大div宽度变为0;
搜到的解决方法:
.contain3:after
{
content:"";clear:both;display:block;
}
对大div进行设置,可以解决不适应的问题。
5、最后一行布局
要解决2个问题:
左侧宽度固定,随高度自适应垂直居中;
右侧自适应右侧,切不能掉到左侧下面。
使用flex布局。左侧设置flex-shrink:0;保证宽度不变;
居中方式:align-items:center;可垂直居中;
最后解决行高问题,用line-height来设置。
二、遇到的问题
1、没有滚动条
发现内容超出页面时没有滚动条,设置:
main
{
overflow: auto;
}
但是滚动条范围只有页面1半。设置body高度和main高度后发现好了一点。
2、图片和文字垂直居中
.contain2 img
{
vertical-align: middle;
}
3、并列div使用float时不适应
.contain3:after
{
content:"";clear:both;display:block;
}
三、明日计划
1、查看学习资料——《CSS Sprite雪碧图》
2、通过搜索引擎查看如何用css模拟下拉框
3、预习任务6
四、收获
1、熟悉了如何使用flex布局实现各种效果:
包括并列宽度设置;对齐设置;伸缩设置等;
2、对盒子模型进一步的熟悉,尤其是padding、margin的使用,border设置;
3、熟悉如何根据需要选择position定位,如relative,absolute,fixed;
4、图片如何与文字垂直居中;
5、并列div如何使用float;
6、行间距的设置。
评论