随笔分类 - CSS
1
摘要:拉窗帘效果 第一次看到这种效果的时候,感觉很惊艳,以为是js实现的,实际上纯HTML+CSS就能实现。 表现 上下两个白色区域都是正常的页面滚动行为,中间有颜色区域比较特殊,“拉窗帘效果”的文字滚动到一定位置后停止了,直到蓝色窗帘完全拉起之后才继续滚动,并且,在窗帘底部穿过文字时,文字呈现两种颜色。
阅读全文
摘要:一 最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考…… (ps:四个 是项目名,略去了) 二 JS最初是用来给界面添加交互的,近几年,前端火的原因则主要是因为JS,新技术
阅读全文
摘要:Web Component不是新东西,几年前的技术,但是受限于浏览器兼容性,一直没有大规模应用在项目里,直到现在(2018年年末),除IE仍不支持之外,其它主流浏览器都支持web component。
阅读全文
摘要:前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常 渲染截图: 正常渲染截图应该是: 完整demo: 复现环境: Mac mini OS 10.11.6 chrome 65+ 给chr
阅读全文
摘要:有一个元素div,它有一个子元素ul,给div添加一个:hover样式{color: red},挡鼠标hover div时,字体变红。 当鼠标hover div时,ul字体变红,鼠标hover ul的滚动条,同样会触发div的:hover,ul的字体仍然显示红色,在“window版chrome 57
阅读全文
摘要:要实现这样的效果 第一反应是直接在placeholder属性值里输入\n换行,如: 浏览器直接输出了它,类似地输入<br/>也行不通 解决方法是换成 效果立竿见影, 是unicode字符中的换行符。 另外用js直接设置textarea的placeholder属性值为'1、texta
阅读全文
摘要:打开天猫随便点了个链接,加载了一张大的背景图片,该图片从非常模糊到正常显示有一个过程,深入了解一下它的实现过程。 打开控制台,禁用Cache,模拟2G网络,刷新页面 查看请求列表,浏览器先请求了一张缩略图,设置为div的背景图片,div宽高等同于整个页面,效果看起来就像页面已经显示出来一样 在缩略图
阅读全文
摘要:今天翻了一下《css权威指南》选择器章节,看到伪类选择器,也叫语言选择器:lang(language),顾名思义它会根据html设置的语言应用对应样式,如: 会作用在这个P元素上 效果就是p里的文字全部显示为红色,en代表英文,然而不管p元素里的文字的是中文英文还是法文,都会应用此样式。 lang属
阅读全文
摘要:第一种:已知元素宽、高兼容:IE6+源码:css使元素垂直居中 demo:第二种:元素宽、高未知兼容:IE8+源码:css使元素垂直居中 我要居中demo:要兼容IE6/7,需增加一个div,这个方法比较巧妙,利用了left、top的百分比值是相对于父元素的宽度这点特性css使元素...
阅读全文
摘要:一看到“2D矩阵”这个高大上的名词,有的同学可能会有种畏惧感,“矩阵”,看起来好高深的样子,我还是看点简单的吧。其实本文就很简单,你只需要有一点点css3 transform的基础就好。没有前戏,直奔主题2D矩阵指的是元素在2D平面内发生诸如缩放、平移、旋转、拉伸四种变化,在css3中对应4个方法分...
阅读全文
摘要:checkbox只有两种值:选中(checked)或未选中(unchecked)。它可以有任何值,但是表单提交时checkbox的值只能是checked或unchecked。它的默认值是unchecked,你可以在HTML中这样控制它: 视觉上,checkbox有三种状态:checked、unche
阅读全文
摘要:如果你还不了解grunt,或者只是听过它的名字而没有去研究过它,那么这篇入门级的文章就是为你写的,相信看完你就会爱上grunt!grunt是什么?grunt是一个非常好的自动化工具,你只管codeing,它会自动帮你将代码合并(concat)、压缩(uglify)、语法检查(jshint)、自动编译...
阅读全文
摘要::first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解:误解一:认为E:first-child选中E元素的第一个子元素。误解二:认为E:first-child选中E元素的父元素的第...
阅读全文
摘要:最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单,分别是border-radius、伪元素、css3关键帧以及animation动画。 首先整理一下大概的思路:整个圆分为AB两部分,左右都是半圆,上面盖了一个背景色为白色的小圆,如右图,简单布
阅读全文
摘要:历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 2022-12-1更新 截止目前,兼容性问题基本没有了,因为微软已经放弃维护低版本IE,只需要一行css整站置灰 // 一行css整站置灰body{ filter: grayscale(10
阅读全文
摘要:什么是line-height(行高)?line-height设置1.5和150%有什么区别?这是一个比较常见的css面试题,带着这个问题往下看。所谓行高是指一段文字中某一行的高度吗?具体来说不是。w3school是这样定义的: line-height 属性设置行间的距离(行高),该属性会影响行...
阅读全文
摘要:最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级。做为一个合
阅读全文
摘要:开发者往往是在一个又一个的坑中成长起来的,自学的开发者尤其如此,刚刚填完一个坑,转身又掉进另一个坑。有些坑很容易就跳出来了,也有些坑能整了一天都没头绪,第二天早上一来发现后面就有一架通往坑外的梯子,坑爹啊,问题原来这么简单!我今天就踩了一个比较坑的坑,好在花了几分钟就跳出来了。事情是这样的:今天在做...
阅读全文
摘要:最近在读《编写可维护的javascript》这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解。一、编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致。 1、缩进:一种是利用制表符缩进,一种是使用空格符缩进,各有利弊,任选一种,保持一致即可。个人比较喜欢制表符缩...
阅读全文
1