轻项目 结果代码汇总

（一）

实现如下表单,附上预览地址。其中性别和取向是单选，爱好是多选

• 结果代码：表单代码

（二）css选择器

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

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

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

4.实现如下三角形 [

三角形

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

• 结果代码：
  效果1-边框
  效果2-按钮
  效果3-表格
  效果4-三角
  效果5-card

（三）css常见样式2

1.使用 CSSsrpite 实现如下效果【效果范例】. ps: 图片下载地址

2.在iconfont上搜索"饥人谷"， 使用字体图标实现代码1中的效果

注意：由于 jsbin 不支持上传文件，所以你 不应该 在 jsbin 上使用本地链接来制作 iconfont！你应该使用 阿里的 CDN 链接！！！

图片合并可以使用这个线上地址 csssprites.com192

在生产环境中使用的图片都需要经过压缩再使用，线上压缩图片地址 tinypng.com132

• 结果代码：
  图片css-sprite
  [iconfont](）

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

1.实现如下alert效果，效果范例

2.实现如下表单效果， 效果范例

3.实现如下模态框效果， 效果范例

4.实现如下导航栏效果，效果范例

• 结果代码：
  alert效果
  表单效果
  模态框效果
  导航栏效果

（五）css布局

1.实现 图中 第一列第5个布局

2.实现 图中 第2列第1个布局

3.实现 图中 第3列第1个布局

4.实现如下页面 页面范例

5.实现图中效果

• 结果代码：
  1.单栏布局
  2.三栏布局
  3.圣杯布局
  4.双飞翼布局
  5.风景列表

（六）css综合

2.垂直居中有几种实现方式，给出代码范例

3.实现如下效果，每种效果都只使用一个html 标签来实现 效果范例

• 结果代码：
  用html标签实现效果