知乎首页的简单仿写

• HTML(5)+CSS(3)。静态页面仿写
• Github连接：https://github.com/nebulium/ZhiHu
• 大概布局以下，在此布局基础上进一步处理。
  

• 切图：图片非高清，不过是非重点。在设计的时候使用到的chrome插件：屏幕尺子（page ruler）和color zilla取色工具。

• 布局总结：header为position:fixed，且z-index较大。mancolumn和sidebar部分考虑到并不会自适应，设置为position:absolute，这里注意统一用top、left处理，若是一个用left，一个用right在浏览器缩放的时候会出现问题。而他们内部的div既有用浮动处理的、又有用position:relative/absolute处理的、以及margin/padding处理的。
• 有许多不足，待完善。
• TIPS：a. 给要进行调整布局的块元素先加上border，以便观察其位置、更加方便进行margin或者padding的调整。b. 一个一个模块（div）进行处理，然而习惯于从内往外进行设计，即先处理最里面的div，再一个个往外进行处理。c. 统一设置：*{margin: 0; padding: 0}d. 对于连接的处理：各部分的都有设计到连接<a>，她的处理比较特殊。除了有不一样的状态以外，还须要考虑到优先级的问题。e. 优先级是针对同一个元素来讲的。f. 下边界阴影：box-shadowg. 处理列表的时候注意到，在用css处理的时候须要考虑容器是否具备宽度或者高度（block），而且须要注意，有的时候相对margin或者padding，指的是两个“最近”的块元素之间的。h. input的placeholder属性，以及对其的css规则的处理（伪选择器）i. border-radiusj. 对于一些内联元素，想让其具备长高、但仍然是inline元素：inline-blockk. cardList的处理能够加深对于class和id的理解。而这里的class或者id就是暴露给后台的“接口”l. 文字环绕图片：将图片放在div中，用float和clear处理。