Skip to content

angelayun/ppt-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

一些css技巧

  1. 用css画如下图形

image 2. 使用boder画图标 3. 灵活使用currentColor 4. 基于ex单位的天然垂直居中对齐 5. 灵活使用margin的auto属性来实现右对齐 6. content的妙用实现tooltip效果 7. content实现代码显示行号效果 8. 在页面上实时编辑并显示样式 9. text-indent实现按键动态效果 10. 改变默认文档流实现改变图标方向 11. outline的妙用 12. text-align的妙用

伪类的一些妙用

  1. 使用:target来实现tab标签切换
  2. 使用:checked来实现tab标签切换
  3. 使用:checked来自定义复选框样式
  4. 使用:valid来实现input框删除icon
  5. 使用透明边框实现等高布局 6

用css实现的一些loading效果

  1. 文字...
  2. 小圆点loading
  3. 大圆圈loading

推荐的居中方式(宽度不限定、兼容性好)

  1. 使用margin特性
  2. 使用vertical-align

线性渐变的一些使用场景

  1. 使用线性渐变实现三角
  2. 使用线性渐变来画加/减号图标
  3. 使用线线渐变实现代码的斑马条纹背景
  4. 给文本渐变背景

纯css实现波浪效果

  1. 方式一
  2. 方式二
  3. 方式三

单标签画斜线

  1. 方式一
  2. 方式二
  3. 方式三
  4. 方式四

背景图片的混合模式

  1. 通过渐变改变背景图片颜色 单一颜色、变亮模式
  2. 通过渐变改变背景图片颜色 渐变颜色 变亮模式
  3. 多个渐变颜色hover时动效显示
  1. 背景图片叠加 变亮模式
  2. 文本背景为图片

脑动题

SEO 以图换字的方式有哪些?

  1. 方式一
  2. 方式二
  3. 方式三
  4. 方式四
  5. 方式五
  6. 方式六
  7. 方式七
  8. 方式八
  9. 方式九
  10. 方式十

单标签实现如下图片可以有哪些方式?

image

  1. 方式一
  2. 方式二
  3. 方式三
  4. 方式四
  5. 方式五
  6. 方式六
  7. 方式七
  8. 方式八

类似如下图片,单标签实现有哪些方式

image

  1. 方式一
  2. 方式二
展示这个例子主要是想说明background默认是从border开始的,所以我们使用虚线边框就可以看到背景色了

image

透明边框

About

just a ppt show

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published