Atwood定律:凡是能用JavaScript写出来的,最终都会用JavaScript写出来

 

CSS3 counter 的用法

counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上,它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:counter-reset: count 0/*标识计数器count从1开始*/ counter-reset: count2 2 /*标识计数器count2 从3开始*/ counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器,count1,count2,count3*/ counter-increment 表明计数器实
ngtwewy 2020-05-22    CSS   

什么是加载占位图(Skeleton Screen Loading)

Skeleton Screen(加载占位图)是近年流行的加载控件,通常表现形式是在界面上待加载区域填充灰色的占位图,与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。Skeleton Screen这个概念最早出自Google产品总监,《Web表单设计》作者,Luke Wroblewski于2013年9月17日发表的博文《Mobile Design Details: Avoid The Spinner》里。(博文地址:http://www.lukew.com/ff/entry.asp?1797 )代码: @keyframes placeHolderShi
ngtwewy 2020-04-20    CSS   

Flex 布局 space-between 最后一行左对齐最佳实践

在使用 flex 布局时,设置 justify-content: space-between,如果一行有三个 div,那最后一行如果不满三个元素,就会出现下面的情况,如何使最后一个 div 向左对齐呢。有两种方法:方法一:这种方法的缺点是,最后一个 div 左外边距是0。div:after { content: ""; flex: auto; } 方法二:创建几个空的 div,貌似这种方法最合适了
ngtwewy 2020-04-20    CSS   

如何让网页变灰 CSS3 filter(滤镜) 属性

代码示例:html{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) } CSS3 filter(滤镜) 属性CSS 语
ngtwewy 2020-04-04    CSS   

CSS 实现三角形

将一个div的宽度和高度设置为0,然后设置边框样式.triangle{ width: 0; height: 0; border-top: 50px solid black; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; } 将一个div的border都设置成50px粗,并且不同颜色,结果如下图所示:把边框宽度设置成50px,计算机处理时,在边框交接处,一边占用一半的面积。将左右下边框设置成transparent,就可以画出一个三角形.tri
ngtwewy 2020-03-17    CSS   

rem 单位手机页面适配

物理像素:顾名思义,就是设备屏幕上的实际像素。也就是说这个手机被出厂造出来的时候,这个屏幕上有多少个像素点,他的物理像素就是多少;设备独立像素:也叫做逻辑像素(对于前端来说,和我们的css像素是一样的),这个不同的设备是不一样的。在viewport为ideal-viewport模式时, 如iphone6此时的viewport为375px,代表着我们在css中写375px就可以达到全屏的效果;在移动端中会使用rem方案,来做不同设备间的适配:(function () { function changeRootFont() { var designWidth = 750, rem2px = 1
ngtwewy 2019-11-26    CSS   

排除选择器

css :not()排除函数css:not()函数用来排除选择,not(x),其中的x为css选择器,但是x不能是not选择器,也就是说:not()排除选择器不能嵌套使用。css:not()排除选择器使用.sibcont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; } .sibcont ul{ margin:0; padding:0; list-style:none; } .sibcont ul li{ color:#C91010; font-size:13px;
ngtwewy 2019-11-16    CSS   

SASS/SCSS 快速上手

编码规则SASS首先会检查代码文件的Unicode BOM(byte order mark),然后是@charset声明,再然后是底层运行Ruby的字符串编码,如果这些都未进行设置,将会默认以UTF-8编码输出CSS文件。@charset 'utf-8'; #app { background: url('../assets/背景图片.png'); } 建议代码开头位置显式定义@charset "encoding-name";,让SASS能够按照给定的字符集编译输出。特性概览CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开
ngtwewy 2019-10-05    CSS   

CSS动画-旋转球

/*!Loading CSS*/ #contain { width: 300px; height: 100px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; opacity: 0; animation: fadeIn 2s 1; animation-fill-mode: for
ngtwewy 2019-03-30    CSS   

Bootstrap 3.7 导航组件响应式CSS样式

.navbar{ margin-bottom: 0px; background-color: #fff; border-right: 0px; border-left:0px; border-radius: 0px; } .navbar-brand { padding:10px 15px; } .navbar-brand img{ height: 30px; } @media (min-width: 768px) { .navbar-wrapper {margin-top: 20px;} .navbar
ngtwewy 2019-03-02    CSS   

使用 linear-gradient 创建渐变背景色的背景

.page-header { color: #fff; text-align: center; background-color: #5FC3E4; background-image: linear-gradient(120deg, #E55D87, #5FC3E4); } CSS linear-gradient() 函数 gradient 美[ˈɡreɪdiənt] n. (尤指公路或铁路的) 坡度,斜率,倾斜度; (温度、压力等的) 变化率,梯度变化曲线; #grad1 { height: 100px;
ngtwewy 2019-01-06    CSS   

Normalize.css 和 CSS Reset 的区别

CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动,把人家全拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家锅都扔炉子里烧了,自己看着办吧。 Normalize.css 是改良派。他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间,那就改掉。士农工商,
ngtwewy 2018-08-23    CSS   

CSS实现单行、多行文本溢出显示省略号

CSS实现单行、多行文本溢出显示省略号(…) 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号,如下。 实现方法: display: -webkit-box; -webkit
ngtwewy 2018-06-08    CSS   

CSS中比一像素还要细的边框

那么CSS中的1px是什么?浏览器是怎么渲染它的? 网页在一个叫viewport的东西里渲染,可以理解为画布,画布被分成 N x M 个小方格,1个CSS像素,就是其中的一个小方格。 一,viewport又是什么? 网页在viewport上渲染,可以想像在PS上画东西时,上面也有个画布,这个画布分割了 N x M 个方格,N是它的宽度,M是它的高度。宽高都可以任意设置,所以说viewport是虚拟的。假设设置宽度是400,那么浏览器显示区域的横向将被分为400份,CSS的1px占的宽度就是显示区域的 1/400。如果是980,那就是1/980。 viewport值不一样时,对页
ngtwewy 2018-05-13    CSS   

CSS移动端在有弹出层时如何禁止底层的滚动

在一个网页中,如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时,底层也会跟着滚动。 这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。 我之前也遇到过,最初也是各种阻止默认事件啊,PC有用,但是移动端一点用也没有。 后来是加了 html,body{ height:100%, overflow:hidden } 但是这样做会导致内容返回顶部。 后来研究了下天猫,他们也没有很好的解决,有的地方底部仍然可以滑动。 研究过苏宁易购,他们做的比较有意思,先记录下当前的位置,虽然底部内容也是可以滑动的,当弹出层关闭后,再返回那个位置。当然他们的
ngtwewy 2018-03-27    CSS