发表于: 2019-05-04 02:16:08

2 941


一、今天完成的事情

1.修改任务4:

①css颜色统一为十六进制格式;

②修改字体大小、颜色;

③设置最大宽度,使用overflow: hidden隐藏溢出;

④以写长方行的方式画竖线;

⑤flex布局实现div元素垂直居中(https://www.cnblogs.com/moqiutao/p/4807792.html)

⑥设置鼠标悬停变成手型;

⑦修改input placeholder字体颜色:

因为placeholder是css3新增属性,故对不同浏览器做不同设定(-webkit代表safari、chrome浏览器私有属性;-moz,代表

firefox浏览器私有属性;-ms代表ie浏览器私有属性)。

2.学习CSS自适应布局(尺寸和定位),先思考布局,再写代码;了解圣杯布局(双飞翼布局);float、inline-block;

了解background属性。

3.任务5:

①PS切图:合并图层,复制到新建图层裁剪后保存;

②计算div.profile中图片的尺寸比例;

③了解div与span区别及用法;

④添加纵向滚动条,横向设置隐藏;

二、明天计划的事情

1.用手机测试页面,发现很多元素发生偏移和变形,需要重新修改。

2.学习CSS代码规范。

三、遇到的问题

1.div.list2右边距设置无效。

解决方法:width设置为auto。

2.自我介绍内容过多则会挤压div.label,导致label文字变成竖排。

解决方法:使用white-space: nowrap设置文本不自动换行。

4.竖线丢失。

解决方法:在.line2添加flex-shrink: 0,使竖线不发生收缩。

3.自我介绍内容被footer遮挡。

解决方法:设置div.list2下边距和footer等高。

四、收获

对盒子模型、布局、代码规范等亟待进一步学习和完善。



返回列表 返回列表
评论

    分享到