前端能力提升练习

练习 html/css 布局实现，提升技巧能力。

说明：以下的每个练习并没有特别的说明，你要仅仅通过截图，发现其实现时需要注意的事项 ，并联系布局技巧，你可以尝试练习去发现其中的奥秘...

  1. hover切换背景，中间线共用
  2. 全宽的不对称topbar
  3. 经典的两列布局，定宽？自适应？
  4. tab切换的下边线
  5. 圆形遮罩还有箭头怎么做好呢？
  6. 垂直文字，怎么做最好？
  7. tags标签，丰富的色彩变化怎么实现方便
  8. 表格实现
  9. 产品/订单列表
  10. 排序hover及选中的样式变化
  11. 最高价最低价，兼容性及交互问题很多
  12. 搜索筛选列表
  13. 经典的产品列表
  14. 这个选中状态有点技巧，出边界了
  15. operbar 浮动操作面板
  16. 模拟表格实现动态宽度

敬请关注相对完美的解决方案...

简单指导

  1. 使用margin负边距实现
  2. 定位，巧用宽度50%
  3. 经典两列布局，左定宽，右自适应且优先加载
  4. 要压住下边框，考虑到随页面滚动跟随
  5. 遮罩+css箭头
  6. 交互
  7. tags标签
  8. 经典的产品列表
  9. 订单列表
  10. 默认hover及选中状态，注意处理好公共边
  11. 聚焦时显示操作面板
  12. 筛选条件
  13. 经典产品列表