轻项目 范例代码汇总

（一）css常见样式1

• 代码

1. 实现如下效果: 【参考】

2. 实现如下按钮效果: 【参考】

3. 实现如下表格:【参考】

4. 实现如下三角形
   

   三角形

5. 实现如下Card: 【参考】

学习贴士
关于 box 阴影效果可参考
参考1
参考2

（二）css常见样式2

• 代码

1. 使用 CSSsrpite 实现如下效果【效果范例】. ps: 图片下载地址
2. 在iconfont上搜索"饥人谷"， 使用字体图标实现代码1中的效果

注意：由于 jsbin 不支持上传文件，所以你 不应该 在 jsbin 上使用本地链接来制作 iconfont！你应该使用 阿里的 CDN 链接！！！
学习贴士
图片合并可以使用这个线上地址 csssprites.com
在生产环境中使用的图片都需要经过压缩再使用，线上压缩图片地址 tinypng.com

（三） 浮动定位BFC边距合并

• 代码
  实现如下alert效果，效果范例
  实现如下表单效果， 效果范例
  实现如下模态框效果， 效果范例
  实现如下导航栏效果，效果范例
  学习贴士
  这是 CSS 的核心，多花点时间没关系
  哈哈，我们的 UI 库又添加了几个新成员
  （勘误：当父容器里有 绝对定位 的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度查看范例。视频中24:40分案例中子元素是绝对定位元素讲的是相对于父容器content的宽度是 有问题的 。）

（四）css布局

• 目标：
  实现 图中 第一列第5个布局
  实现 图中 第2列第1个布局
  实现 图中 第3列第1个布局
  实现如下页面 页面范例
  实现图中效果

学完视频 《Flex 布局》 就可以完成下面两个游戏啦。 第一个是青蛙游戏： 第二个是塔防游戏： http://www.flexboxdefense.com/

（五）css综合

说一说你平时写代码遵守的编码规范
垂直居中有几种实现方式，给出代码范例
实现如下效果，每种效果都只使用一个html 标签来实现 效果范例[

（六）个人简历与作品实战

完成如下作品展示页面，效果预览
完成如下个人简历页面

学习贴士
找工作的时候简历和作品是必不可少的。第一个作品展示页面用于展示日常写的效果、工具，等后续学了 JS 再持续优化吧
第二个是个人简历页面，写好效果后可以慢慢往里面添加点东西喽

（七）企业站实例

完成如下页面，线上地址

先看看实战注意要点
只完成 HTML CSS部分，不需要实现顶部导航栏效果
发挥自己的创造力给网站设定一个主题，比如展示一个产品、城市、企业形象、个人作品...，替换网站中的图片和文案。在实现的过程中不要求页面的还原度，只需要样式精美，代码规范

示例
方方做企业页面实战

（八）其他静态页面：

1. 魔兽页面实战
   实现如下魔兽宣传页面，预览地址

2. 漂亮的登录框
   漂亮的表单
   

   
   

3. 实现如下 报纸页面
   报纸页面

4. 【仿】网易云音乐客户端界面

难度比较高

要求 ：
1）只需要做静态页面
2）注意字体大小
3）关闭/最小化/最大化这一栏无需考虑
4）轮播目前还没有学到，可以自行了解
发挥你解决问题的能力吧