随笔分类 -  css

通过CSS设计模式搭建自己系统的CSS架构
摘要：theme: qklhk-chocolate 传统的CSS书写风格是随意命名，堆叠样式，造成了混乱不堪的结果，复杂页面的样式书写通常会出现几百行甚至上千行的代码，CSS设计模式在实际应用中的横空出世拯救了样式混乱，代码行数冗余的局面。例如：BEM设计模式通过BEM的命名规范语义化了类名，ITCSS设 阅读全文
posted @ 2021-06-04 17:20 孙凯亮 阅读(591) 评论(1) 推荐(0)
CSS设计模式介绍
摘要：一、 常见CSS设计模式分析 oocss Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。 OOCSS是以面向对象的思想去定义样式，将抽象（结构）和实现（样式）分离，抽离公共代码。 区分结构和样式 在定义一个可重用性的组件库时，我们仅创建基础的 阅读全文
posted @ 2021-05-27 14:17 孙凯亮 阅读(752) 评论(0) 推荐(4)
css快速生成图形代码
摘要：https://www.html.cn/tool/css-clip-path/ 阅读全文
posted @ 2020-12-02 16:45 孙凯亮 阅读(264) 评论(0) 推荐(0)
div 环形排列
摘要：javascript-按圆形排列DIV元素(一) 分析 效果图： 一、分析图： 绿色边框内：外层的DIV元素,相对定位; 白色圆形框：辅助分析的想象形状; 白点：为白色圆形的圆心点，中心点，点o; 圆心角：角NOG; 黄色：需要按圆形排列的，绝对定位的DIV元素; 红色点：为每个黄色DIV的坐标点; 阅读全文
posted @ 2019-03-27 20:03 孙凯亮 阅读(3059) 评论(0) 推荐(1)
圣杯布局
摘要：CSS 圣杯布局升级版 多个固定宽度一个自适应宽度 1.一个div固定，一个div自适应宽度。两种情况，固定在左或者在右。 HTML： <div class="box1"> <div class="main"> 内容自适应宽度 </div> <div class="aside"> 侧栏固定宽度 </ 阅读全文
posted @ 2018-03-02 16:13 孙凯亮 阅读(194) 评论(0) 推荐(0)
livereload
摘要：1.浏览器端 下载 安装 2.Sublime text3端 下载/PCIP安装，在windows环境下无效 https://github.com/Grafikart/ST3-LiveReload 安装 解压，重命名，拷贝到packages中 配置 {"enabled_plugins": ["Simp 阅读全文
posted @ 2017-10-09 10:12 孙凯亮 阅读(321) 评论(0) 推荐(0)
CSS3 filter 模糊滤镜的应用
摘要：CSS3 filter 模糊滤镜的应用 在segmentfault上回答过的一个问题，如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解，只觉得滤镜应该只是应用于图片上的。而且各大网站的demo也清一色的图片加滤镜效果。 直到不久前进入nodejitsu的介绍页面，点击登录按钮之后出现弹窗，看 阅读全文
posted @ 2017-05-27 14:08 孙凯亮 阅读(1420) 评论(0) 推荐(0)
解决ios手机页面overflow scroll滑动很卡的问题
摘要：解决ios手机页面overflow scroll滑动很卡的问题 解决ios手机页面overflow scroll滑动很卡的问题 今天在IOS系统上测试 webAPPApp的时候发现使用了position:fixed/absolute时，DIV容器里面下滑动没有像普通页面一样顺畅，手滑到哪就停到哪。感 阅读全文
posted @ 2017-05-25 11:36 孙凯亮 阅读(2318) 评论(0) 推荐(0)
响应式网页设计:rem、em设置网页字体大小自适应
摘要：「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？ IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支 阅读全文
posted @ 2017-04-26 16:38 孙凯亮 阅读(496) 评论(0) 推荐(0)
（转）CSS的Sprites技术
摘要：Css Sprites 技术逐渐流行，各大网站上都可以看到它的身影。 但从本质上，Css Sprites 只是 Css 技术的一个使用小窍门，初学者也能快速上手。 Css Sprites 简单解释：定制元素的长和宽，把元素变成一个取景框，然后通过背景图片的相对位移来显示图片中需要的部分。 以下就用一 阅读全文
posted @ 2016-03-25 13:46 孙凯亮 阅读(201) 评论(0) 推荐(0)