css
南乡人
这个作者很懒,什么都没留下…
展开
-
CSS-禁止文字选中的办法
CSS方法 <div style="user-select:none;"> 不可选取 </div> JS 方法 <div onselectstart="return false;"> 不可选取 </div> 利用JS方法的话,如果不是从这个div开始选取的,而是从其他BOX选取连着这个,那么也会被选择上。所以用CSS的方法禁止选取比较稳妥。 ...原创 2020-01-02 14:29:21 · 330 阅读 · 0 评论 -
css - 初始化样式表
初始化样式的原因 浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异。 <h1>标题1标签在不同浏览器的盒子模型</h1> 火狐 谷歌 淘宝初始化代码 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol,...原创 2019-12-28 10:18:39 · 213 阅读 · 0 评论 -
CSS3-纯css实现TodoList
利用兄弟选择器配合伪元素自定义单复选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...原创 2019-12-27 14:43:20 · 866 阅读 · 0 评论 -
CSS3-幻灯片
利用绝对定位和交错动画实现镜头拉伸背景效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g...原创 2019-12-27 14:16:22 · 209 阅读 · 0 评论 -
CSS-旋转日光特效
预览 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...原创 2019-12-27 14:10:06 · 301 阅读 · 0 评论 -
CSS-毛玻璃效果
利用backdrop-filter实现毛玻璃背景效果 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2019-12-27 10:49:49 · 127 阅读 · 0 评论 -
CSS 文字渐变效果
关键点 背景色绘制区域 浏览器兼容 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g...原创 2019-12-27 10:00:30 · 181 阅读 · 0 评论 -
CSS3动画 -- 充电效果
1.0 基础实现版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-12-26 11:21:20 · 1294 阅读 · 1 评论 -
CSS——结构与布局
自适应内部元素 height默认会自适应其内容的高度 为使width也可以自适应可以添加 width:min-content; 表格布局 table-layout 默认属性是auto, 自动表格布局算法 table { table-layout: fixed; // 固定表格布局算法,默认平均分配宽度而不是根据内容 width: 100%; } 选择多个元素 场景...原创 2019-09-13 11:01:11 · 135 阅读 · 0 评论