编辑日报内容...

5月27日日报

今天完成的事情：

今天任务5又被打回来了，师兄给我提了一些错误，比如白边等，还有CSS编码规范的问题。

1、白边问题

解决： 1.首先设置padding与margin为0后，发现问题并未得到结局。 2.查看原图，发现原图边缘存在少许白边，应该是在切图时留下的白边造成的。 3.重新切图，白边问题消失

2、图标比例过大

解决： 重新设置图片的高度和宽度，按照PSD原文档，width=27px;height=33px;

3、两个盒子之间没有间距

解决： 按照PSD文档，在两行div之间加入height=20px的空div

4、字体宽度不够，border也是

解决： 调整字体的横向间距采用letter-space属性

5、字体颜色不对

解决： 修改字体颜色

6、未对齐

原因： 未对齐的原因时最后一行采用了与其他行不一样的定位方式，采用了absolute定位，导致后面的内容难以与上面对齐。 解决： 保持这几行样式一致，并且要保证在屏幕宽度变窄的情况下，内容能够正常换行，并且行的高度能够自适应。

代码：

.list-item{

position: relative;

padding: 2em 3em;

margin-left: 3em;

border-bottom: 1px solid #999999;

white-space: nowrap;

}

.text-gray{

color: #999999;

font-size: 3.2em;

display: inline-block;

letter-spacing: 0.1em;

padding-right: 1em;

border-right: 1px solid #999999;

vertical-align: middle;

}

.text-main{

font-size: 3.2em;

display: inline-block;

white-space: pre-wrap;

margin-left: 1em;

vertical-align: middle;

}

<div class="list-item">

<div class="text-gray" style="position: relative;top: 50%;vertical-align:middle; ">自我介绍</div>

<div class="text-main" style="position: relative;width: 70%;font-size: 2.8em;vertical-align: middle;">可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富。</div>

</div>

1.设定white-space:nowrap是为了保证在宽度变小的时候，两个并排的div始终保持在同一行 2.设定vertical-align:保证了两个子div始终与父div的行中间线保持对齐。

7、border宽度不一致

原因： 因为在实现横线的时候，并没有使用border属性，而是直接用了div来画了一个宽度为1px的矩形框，发现这种方法会出现这种bug，之所以出现这种bug的原因我也不是很清楚（(lll￢ω￢)，要避免使用这种方法。 解决： 添加border属性，设置相应的padding和margin.

8、底部按钮使用按钮标签，自带标签是带有相关属性和功能的。

解决： 采用button标签

9、实现首尾固定。

解决： 采用fixed定位方式。

明天计划的事情：

 重构任务6，特别注意CSS代码规范和之前遇到的bug问题。

遇到的问题：

采用div写的横线在多次使用的情况下，会存在宽度不一致的情况，要避免使用div来直接写一条横线，遇到横向的分割线考虑使用border属性。

收获：

了解了CSS编码规范，养成良好的编码习惯是成长过程中必不可少的一环 然后通过师兄对我的任务的检查，发现了许多BUG，通过修改这些BUG，能够使自己清楚的了解到自己到底犯了什么错误，然后才能在以后的工作/学习中去避免再次犯错。