一个很实用的css技巧简析】的更多相关文章

我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个有序怎么做更方便.简单. 当然,这个功能很简单: 可以手动写死... 可以循环插入dom,用索引做前缀.原生循环或者利用框架的循环 也可以用三行搓手手(css)自动计数 今天主要说说如何用css来计数 原理与介绍 原理很简单,利用伪元素的content + counter()/counters()…
创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); } } clip-path也能用来进行其他规则…
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测,并附加全部案例下载地址.http://pan.baidu.com/s/1geUcAcF 1.背景图片清晰度不够,明明原图很清楚,但是在浏览器看不清楚. 解决方案 #login-main { width: 100%; height: 100%; background: url("../img/log…
本文给出一个很实用的服务端和客户端进行TCP通信的小例子.具体实现上非常简单,只是平时编写类似程序,具体步骤经常忘记,还要总是查,暂且将其记下来,方便以后参考. (1)客户端程序,编写一个文件client.c,内容如下: #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <string.h> #include <sys/types.h> #include <…
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是对用CSS建站感兴趣还是仅仅拿它让你的博客更有feel,打好基础才能盖高楼.下面让我们来看看一些对于初学者实用的CSS常识: 1.使用reset.css 火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同.这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表.…
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%…
前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分享一下. clickoutside 的使用及效果 该指令的源码在 src/utils 下的 clickoutside.js.它功能是指令需要接收一个函数,当用户鼠标点击的区域在绑定指令的元素之外时,会触发该函数. 那么使用这个指令能够实现什么功能呢?我想到一个功能,就像我们常用的抽屉组件,在点击抽屉…
1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 2. 使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 /* add bord…
摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>&…
前段时间发了个TCP通信的例子,现在再来一个UDP通信的例子.这些可以作为样本程序,用到开发中.“裸写”socket老是记不住步骤,经常被鄙视…… 下面的例子很简单,写一个UDP的server用于收包,写一个UDP的client用于发包并接收来自server的回复.其中UDP的client写了两个,一个是不需要connect的,另一个是带上connect的,两个client实现的功能是一样的.从效率上,带上connect的UDP肯定效率稍微高一些.不过UDP的connect和TCP里面非常不一样…