ngtwewy

一,流光按钮 CSS 样式.btn{ width: 100px; height: 50px; border-radius: 50px; text-align: center; background-color:aqua; line-height: 50px; background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE); background-size: 400%; } @keyf

2021-09-22    CSS    104
ngtwewy

方法一,基本方法为每一份主题写一份 CSS 文件,批量替换颜色,例如 style.css、style.dark.css。如果需要切换模式的花,只需要 改变 link 指向的 CSS 文件路径。方法二,使用 SCSS 等工具引入颜色变量在方法一的基础上,生成多个 CSS 文件路径。方法三,使用CSS自定义属性(变量)CSS 原生变量支持,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。属性名需要以两个减号(--)开始,大小写敏感,属性值可以是任何有效的CSS值。和其他属性一样,

2021-07-16    CSS    288
ngtwewy

实现瀑布流有两种方法。HTML: 第一种,仅仅使用CSS即可实现.media-list.waterfall{ column-count: 3; //多列的列数 column-gap: 20px; //列间距 .media-image { break-inside: avoid; background-color: #5f5f5f; overflow: hidden; margin-bottom: 20px; border-radius: 5px; border: 1px solid #e7e7e7; i

2021-06-01    CSS    189
ngtwewy

display:inline-block是一种布局方法,它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以置身于inline水平的元素中。在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”。 display:inline-block元素之间空隙的产生原因和解决办法

2021-01-23    CSS    293
ngtwewy

怪异模式(quirks mode)是指在计算机领域中,一些网页浏览器为了维持对较旧的网页设计的向后兼容性,而使用的一种技术。怪异模式特点:1.采用的是IE盒模型,即将border和padding包含在了height和width中。在 IE 盒模型中,box width = content width + padding left + padding right + border left + border right, box height = content height + padding top + padding bottom + border top + border bottom

2021-01-23    CSS    367
ngtwewy

一,响应式网页设计响应式网页设计( RWD,Responsive Web Design) 这个术语,由伊桑・马科特( Ethan Marcotte )提出。他在AList Apart发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法,如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。 上面仅列举了其中一部分!不过,正如马科特等人所说,真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反,它是要从整体上颠覆我们当前设计网页的方法。以往我们先是针对桌面电

2021-01-20    CSS    281
ngtwewy

.head-section{ width: 100%; height: 360px; position: relative; z-index: -1; overflow: hidden; } .head-section::after{ content: ''; display: block; width: 160%; height: 200%; border-radius: 50%; position: absolute; left: 50%; top: -10

2020-12-23    CSS    315
ngtwewy

这个属性可以取消 pading 和 border 宽度对盒装模型的影响。语法box-sizing: content-box|border-box|inherit;content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承 box-sizing 属性的值。

2020-10-31    CSS    292
ngtwewy

瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。具体步骤:1.设置外部容器多列列数(column-count)和列间距(column-gap)2.设置内容条目的break-inside属性为avoid,使条目总体不被打断。 //最外层容器 //条目 //条目内容 ......... .container { column-count: 4; /

2020-08-11    CSS    300
ngtwewy

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 表明计数器

2020-05-22    CSS    325
ngtwewy

div高度是根据里面内容自适应撑开的,如果没有内容高度则为0;但div里面有内容高度仍是0,多半是因为元素浮动引起,div里面的元素浮动到其它地方,div里实际上没有内容,因而为0;用如下为例: 显示图片后,div高度可能为0,此时可以通过如下3种方式解决掉高度为0:1. 使用overflow属性:为div增加样式:style="overflow:visible" 这样即可撑满div,overflow可以取值:auto 出现滚动条;hidden:超过范围的隐藏(文字会显示不全)2. 增加div清除浮动:在被包含的元素下面,此例中为下面增加: 清除浮动后,将落入div中,不再浮

2020-04-24    CSS    287
ngtwewy

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

2020-04-20    CSS    596
ngtwewy

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

2020-04-20    CSS    647
ngtwewy

代码示例: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)

2020-04-04    CSS    404
ngtwewy

将一个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,就可

2020-03-17    CSS    307
ngtwewy

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

2019-11-26    CSS    414
ngtwewy

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;

2019-11-16    CSS    353
ngtwewy

编码规则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的

2019-10-05    CSS    417
随机推荐
CentOS 时间命令 timedatectl
Koa.js 路由 koa@router
Node.js 的图片处理模块 images 跨平台图像编解码库
HTTP 消息头 Content-Disposition
通过 Apache 代理访问 Node
Electron 简介
Linux 目录结构
sql 之 union && union all 以及安全问题
MySQL 数据库如何存储时间?Datetime 和 Timestamp 之间的抉择
Node.js 事件触发器模块 events