发表于: 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、行间距的设置。



返回列表 返回列表
评论

    分享到