css-adv 前端能力提升练习

html/css布局实现技巧练习

css 练习布局命名由css-前缀开头

• 图片hover，1px公用边
• 不对称的全宽背景平铺
• 两列的经典布局（实现其中一列自适应？再优先加载？两列等高？）
• 简单的tab切换，要压住下边线哦
• 左小图，右自适应宽度的布局，小三角箭头的应用
• 箭头以及垂直排列
• tag标签，注意文字垂直居中，标签要水平对齐
• 表格布局小应用，如何变得更精美
• 复杂的下单列表
• 筛选排序功能
• 筛选价格功能
• 筛选项布局
• 产品列表
• tab切换变体，这个布局有些技巧
• 纯css实现半透明滑动板，两侧有滑道哦
• 这个布局点击横向滚动内容，每次4格但不超过最后一格以及垂直的滚动悬浮
• 文本两端对齐
• 文本垂直对齐
• 实现步骤条（纯css）
• header标题居中
• 选色器
• 模拟键盘

JS 实现练习

• 正则过滤练习

Git 分支操作

//关联远程分支
$ cd your_repo_root/repo_name
$ git fetch origin
$ git checkout gh-pages

//推送分支到远程
git push --set-upstream origin gh-pages