对于作业效果的疑问

这就是我电脑上的效果，虽然截图截得不太全面，但是首先第一我在我的电脑上的效果真的跟效果图差不多，第二我没有上传错作业。我可以发誓。所以我真的不知道为什么我的作业到了老师的电脑中就变样了

理论上来说，前端工程师是要把网页做的跟效果图一模一样。可能是你写的不太规范吧，可以仔细看下老师给的点评。

同学，这个是你的作业效果，老师不知道你说的你的作业做的很好难道是上传错作业了？

关于你的作业中的问题老师都给了你详细的评价，以及如何修改，一下是作业中的评价：

作业问题如下：

【代码规范方面】

1、 CSS代码，缺少注释，建议添加适当的注释，方便后期进行维护。

【网页整体】

1、 水平方向出现滚动条，原因如下图，在设置宽度为100%的时候，在设置边框，或者左右的内外边距，都会导致宽度超出100%。

【顶部】

1、 始终固定在页面的顶部，不随页面滚动。建议：可设置定位。

【banner区域】

1、 如下：遮罩上有一块并没有遮罩住，原因如下，顶部的高度时60px，所以这里应该是padding-top:60px;

2、 整个表单应该嵌套在form表单里面，示例：

<form action="">

       <input type="text" />

</form>

3、 表单在实现居中方面有误差。在定位的情况下，实现水平居中，建议：设置left:50%，然后就设置margin-left：-自身宽度的一半，即可实现水平居中。所以这里margin-right的值应该是-255px;

4、 提交按钮，鼠标划过时，按钮没有边框，建议：可在鼠标移入的时候，设置border:none;

【about】

1、 上部分，没有实现居中，建议：这里不需要设置左右的内外边距，直接给父级设置text-align: center;属性即可。例：

2、 中间部分没有实现居中。建议：这部分可使用一个盒子包裹，然后给盒子设置具体的宽度，然后设置margin:0 auto;来实现整体居中，内部可以安照从左到右布局，首先是左侧小标题，其次是中间的图片，然后为右侧的两个小区域。左侧的文字区域因一部分在图片上。可用定位来实现。

3、 下部分整体没有实现宽度100%显示。建议给包裹整个区域的盒子设置宽度100%；因一行显示4列。可给每个图片或文字区块设置宽度25%；（这里虽然给存放图片的盒子设置了25%，但是图片并没有充满盒子，所以可以给图片设置宽度100%，即：与父级的盒子宽一直）。文字区域的宽度也要设置25%哦。这部分布局有些乱还错位，建议：好好审查下，按照从左到右，从上到下，一步步的来设置。

4、 下部分，缺少每个文字部分的区块指向图片的箭头。当前的阶段可使用空div，然后设置边框通过定位来完成。建议：若有兴趣也可以尝试使用伪类:before和:after来完成，这个我们相关的课程会讲到，也可以自己查找相关的资料来尝试。

【GALLERY区】

1、 上部分，实现居中，可以参考about区域，进行设置。

2、 如下图，使用相对定位，有使用top，但是相对定位实际是占位的，这就导致了，下面到的超出，建议：这里可使用绝对定位。

3、 图片部分。没有实现居中，建议：可给包裹图片的盒子，设置固定的宽度，宽度 = 各个单元的宽度 + 各个单元内外边距的宽度。然后在设置margin:o auto;属性使其居中。

4、 建议：相同的样式，可统一设置，不需要每个都写一遍哦。

如果还是有疑问可以在问答区进行提问，我们的助教会针对你的问题做出解答的。

以上字体加粗部分是老师对你作业的评价，不知道你还有什么疑问。