打赏

随笔分类 -  CSS

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

1
点击右上角即可分享
微信分享提示