随笔分类 -  css

css 实现手风琴效果
摘要：效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum 阅读全文
posted @ 2020-07-10 20:08 StackOcean 阅读(909) 评论(0) 推荐(0)
@media 媒体查询 prefers-reduced-motion 解读
摘要：当用户偏爱设置中没有勾选 就设置样式，这个属性只针对于苹果电脑，在React的 脚手架创建出的 就有下图这么一行 然后来看引自参考资料中的两张图片来理解以下： 参考资料： 1.https://www.w3cplus.com/css/add dark light mode for web.html 2 阅读全文
posted @ 2020-04-14 21:29 StackOcean 阅读(2269) 评论(0) 推荐(1)
bootstrap 响应式布局常见设计做法 真实网站案例解析
摘要：通常我们做一个网页，通常优先兼容 桌面端、平板端、手机端 三个端，其他则微调，那我们应该如何来做呢？ 一般会有设计师 给你三个设计稿，分别是 PC、ipad、mobile 也就是 电脑端、平板端、手机端 这三个设备的。 下面我用 EXLskills 来举个例子，来实际理解一下。 电脑端 ，一般采用 阅读全文
posted @ 2020-04-10 12:11 StackOcean 阅读(4241) 评论(0) 推荐(0)
解决 外边距折叠问题
摘要：当两个元素 时，如果两个元素分别向同一方向设置了各自的外边距，那么会产生合并，取其中最大正值。 如果其中一个元素是负的呢？ 答案: 正值 负值 得 正值 如果两个元素都是负值呢？ 答案：负值 负值 得 负值 总结： 1.如果存在负值，会是减法 2.如果是正值，则直接取大值 博主建议：上面的了解一下就 阅读全文
posted @ 2020-04-08 11:39 StackOcean 阅读(397) 评论(0) 推荐(0)
translate 和 translate3D 的区别
摘要：不定时更新 1.translate3D 可以调用GPU进行3D加速 2.translate 因为是 2D 移动，所以不能调用GPU进行3D加速 3.translate3D 可以在一个 z axis （Z轴） 方向进行移动，正值会感觉元素离你更近，负值会感觉更远，不像translate只能平移。 ht 阅读全文
posted @ 2020-04-08 10:49 StackOcean 阅读(3952) 评论(0) 推荐(0)
Flex布局 实现响应式导航模块
摘要：效果： 下面是代码： 上面是作者实践的效果，建议复制到编辑器观看，其中图标是采用了 iconfont svg 并配合 emmet 插件 的 lorem 生成的英文单词 原文：https://css tricks.com/flexbox bar navigation/ 阅读全文
posted @ 2020-04-06 21:46 StackOcean 阅读(506) 评论(0) 推荐(0)
目前最新清除浮动方式 兼容 IE8 及以上
摘要：将 group 类添加到任何需要清除浮动的父级元素即可，这行代码兼容 IE8 及以上，目前国内不少大网站也在采取这种做法。 提示: 现在2020年，开发模式基本都是Vue这类的，很少项目会去兼容 IE6 和 IE7 和 IE8了，Vue也是仅仅只支持IE9及以上而已, 而上面这行代码还兼容IE8及以 阅读全文
posted @ 2020-04-06 18:50 StackOcean 阅读(705) 评论(0) 推荐(0)
给html标签添加黑白滤镜 实现全站黑白效果
摘要：今天是 2020年4月4日，今日，全国哀悼。此刻，一起缅怀，为逝去的同胞！哀悼抗击新冠疫情牺牲烈士和逝世同胞。 百度今天网站效果： 代码： 在根标签上添加代码： 兼容各个浏览器 阅读全文
posted @ 2020-04-04 11:56 StackOcean 阅读(922) 评论(0) 推荐(1)
进阶CSS3 background-image的linear-gradient线性渐变 实用用法 条纹 中心点 方向 颜色过度
摘要：我们来了解一下 linear-gradient() 是什么呢？ 1.linear-gradient 是一个 CSS3 版本的新特性，所以存在兼容性，使用前可以看一下 can i use网，附上地址https://www.caniuse.com/#search=linear-gradient 2.是一 阅读全文
posted @ 2020-04-03 21:30 StackOcean 阅读(11126) 评论(2) 推荐(2)
解决多个盒子排列边框重叠问题 层级 + 负margin
摘要：提示： 图片看不清的话，如果你是谷歌chrome浏览器那么鼠标移到到图片上右键选择 新标签打开图片 实现思路： 1.利用负margin，全部格子往上移动一像素 2.解决边框丢失问题 3.想要给li加hover效果，发现下边框丢失？ 4. 原因是什么？ 是因为我们之前实现边框重叠用的负margin导致 阅读全文
posted @ 2020-04-02 09:03 StackOcean 阅读(979) 评论(0) 推荐(0)
nuxt 配置sass 下载失败 解决方式
摘要：设置一下sass包的下载站点就可以了 npm config set sass_binary_site https://npm.taobao.org/mirrors/node sass/ 阅读全文
posted @ 2020-04-01 14:58 StackOcean 阅读(350) 评论(0) 推荐(0)
对于过渡 transition 的transition-timing-function 属性讲解
摘要：transition timing function (过度调速方法） 作用：定义 从开始到结束 过程的过渡效果 复合写法： transition: 应用属性 过度过程时间 过度效果 过度效果开始时间; 效果总结： 1. linear 线性速度，和一条直线一样，开始到结束都是一样的速度，不快不慢，比 阅读全文
posted @ 2020-03-31 14:04 StackOcean 阅读(1361) 评论(0) 推荐(1)
利用div绘制细线居中
摘要：利用div配合css代码实现细线方式: 块级元素水平居中步骤： 设置宽度width 设置margin-left:auto; 设置margin-right:auto; 实现方法是，让其左右两边的外边距自动计算，达到水平居中的效果，因为块级元素默认占一整行的特性，所以需要设置width宽度才能实现 复合 阅读全文
posted @ 2017-12-15 17:39 StackOcean 阅读(1222) 评论(0) 推荐(0)