来源：前端自课
已同步整理网站地址:https://www.yuque.com/hr_iu/web/rlgpkd
实现一个幻灯片效果
动画实现
点击播放 GIF 0.0M
幻灯片常用的CSS样式整理
有关文本CSS样式
文本溢出略
文本换行问题
: 只对英文起作用, 以字母作为换行依据
: 只对英文起作用, 以单词作为换行依据
: 只对中文起作用, 强制换行
: 强制不换行, 都起作用
文字的阴影text-shadow
参数介绍:x偏移量, y偏移量, 模糊程度, 颜色
文字之间的间距
表示段落的缩进距离, 表示的是字与字之间的间距
文本竖向排列
文本渐变效果
设置placeholder样式
兼容不同的浏览器的问题:-webkit-, -ms-, -o-, -moz-
滚动条问题
ios页面滑动卡顿的问题
设置滚动条样式
实现隐藏滚动条 同时又可以滚动
onerror处理图片异常
如果图片出现异常, 将新的图片地址赋给当前的img标签src属性并且将当前的onerror指令设为空, 以免进入死循环情况
用户有关的事件
使得元素鼠标事件失效
禁止用户选择页面中的内容
开启硬件加速GPU
页面动画出现闪烁问题
字母小写转换
解决vertical-align属性不生效
在使用vertical-align:middle实现垂直居中的时候, 经常会发现不生效的情况. 这里需要注意它生效需要满足的条件:
作用环境:父元素设置line-height. 需要和height一致. 或者将display属性设置为table-cell, 将块元素转化为单元格.
作用对象:子元素中的inline-block和inline元素.
