在写任何页面之前记得问自己一个问题 — 真的确定看清楚了吗？

要实现的页面

mockup

乍一看挺简单的一张页面，但是写完后和大神交流了下才发现，很多东西是我没有看清楚的，更或者说一些东西只看到了其中的一部分，写完反复感受了下大神提到的需要改进的地方，在这里简单总结了一下。

我们想的一样吗

有兴趣的可以试试按自己的想法划分一下这个页面，挺好玩的。

按功能块划分大的整体应该是分三部分的，依据有背景颜色、页面功能、重复性用户体验等......

比如上面这张页面，最开始有彩色背景图片那一部分应该属于Header部分，中间背景色是白色的应该属于页面的主体部分，中间浮起来的那个横条底色是白色的，所以应该和主体部分连在一起的...

再往下看，按理说最低部的那条白色的应该是footer，但是，再观察下就会发现上面的 Search Bo x和 Header 用的应该是同一套东西，所以从用户体验角度来考虑，根本不需要设计重复的 Search 框来放到页面相对来说比较醒目的部分，所以，自然这部分属于Footer会更合理些。

• Header
  Header部分也就是背景是街景图片的部分，模块包括Logo、Login部分，Search Box部分，该模块应该用<header>标签包起来

• Main
  Main部分也就是中间有白色背景的部分，模块包括浮起来的Agents框、HOW IT
  WORKS模块、WHY CHOOSE US模块、人物介绍模块，每个模块应该用<section>标签包起来

• Footer
  Footer部分也就是底部从背景是人物头像开始到完，包括Search Box模块、Navgation模板、Socia Link模块，该模块应该用<footer>标签包起来

整体的对齐

其实在开始之前，要注意观察下整体左右是有个边界线的，从上到下有些部分是有一些缩进了的，其他基本都是对齐的。

还有这里，能看出来上下基本是对齐的，所以纵向所有部分应该在同一个li内的。

同样功能的模块是有一定对齐效果的

图片的设置

就拿背景图片来说吧，一般分两种，一种比设备尺寸大的，一种比设备尺寸小的，前者一般设置background-size为contain来缩小背景图片以完全装入背景区，后者则可以设置为cover拉伸背景图片以完全覆盖背景区。

但是。通常给的图片长和宽和你要使用的长宽是不Match的，自然就需要做一些牺牲了—裁剪图片，但是作为一个要写这个页面的人，是需要考虑用户的视觉美感的，我们需要细细品味自己所用图片的内容和美感设计，就比如Header用的背景图，尽量调整图片的位置，让被裁剪掉的图片能保持其中的马路会处在页面整体的中间部分，那这就相对来说自然多了。

关于命名

经常写的时候，总会纠结在命名的问题上，到底是下划线好还是中划线好呢，其实很多东西已经有人总结成规范了，只是自己不知道而已。

总体来说尽量按功能命名相对合理些，如果命名地太局限，页面稍有改动，就需要多处改动了，所以，尽量保证扩展性和适应性尽可能地高。

同时尽量遵循三个原则—关注度分离、单一职责、DRY。

比如说有一个navgation块，命名为.nav，它有一些元素比如item，合理的命名应该是.nav__item，item又有一些属性比如被选中，就应该是中划线的形式—.nav--active

详情请阅读 BEM — It is a known fact that the right styleguide can significantly increase development speed, debugging, and the implementation of new features in legacy code.

还有关于样式的规范，一般应保证选择器简洁，保证一定的重用性等。

详情请阅读 OOCSS — make CSS modular and object-based

设置透明度

其实正确的做法是应该给input框的背景设置白色和半透明状态，placeholder的颜色就是白色，原因是设置了opacity的元素，其子元素也会成半透明状态，这就导致设置的placeholder的颜色也是半透明的，所以，应该只给 input框的背景设置白色和相应的半透明状态才是合理的。

哪些是伪元素

连接的线

title下面的短线

像这些暗色的装饰类的元素，内容不太突出的部分，用伪元素实现就相对来说合理些，像第一张图那条横线，给1和2设置伪元素::after肯定比自己写一条线然后裁啊裁，挪啊挪简单而且合理地多。

暗色的文本

讲真，自己看到暗色的段落的时候，就直接考虑设置透明度了，但其实是不对的，更合理地做法应该是所有看到的浅色的文本或者带有蒙板的图片都是靠颜色来控制的，而不是设置透明度看起来像灰色。