作者｜Mike Taylor译者｜薛命灯单页面应用程序（SPA）的异步 JavaScript 为改善 Web 应用程序的用户体验提供了绝佳的机会。CSS 框架（如 Bootstrap）使得开发人员能够在处理结构和行为时快速提供样式。可惜的是，SPA 和 CSS 框架提供的解决方案都相对复杂，传统上分离的关注点（如 HTML 结构、CSS 风格和 JS 行为）
......
280
0
0
2022-04-06
在国内，我想大家基本上都是用阿里的iconfont图标库，这里介绍10个其他的开源图标库，下面列出的所有库都是完全开源的，因为我已经检查了许可条款和条件。Font Awesome我相信我们大多数人至少使用过一次Font Awesome图标，直到现在为止，因为它们是最早发布的高度流行的开源图标库之一。截至目前，他们的图库中总共有1,588个免费图标和7,842
......
458
0
0
2022-04-05
介绍titanic是在Github上开源的一组免费的动画图标，可以将其简单的运用到网页中，而且代码及其简单，但是动画效果却很不错，动画图标和静态图标的不同之处在于它可以让你的网页更加富有活力，让产品更加具备视觉吸引力，一起来看看！开源首页https://github.com/icons8/titanic如何安装使用？安装使用及其简单，可以通过CDN或npm安
......
283
0
0
2022-04-04
谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。基本概念Web Components 由这四种技术组成自定义元素 (Custom Elements)HTML模板 (HTML T
......
308
0
0
2022-04-04
在前端的学习中我们可以选择的框架是比较多的，我们可以根据不同项目的特点来进行选择适合的框架，那么今天我们就来说说有关于：“bootstrap如何垂直居中？”的这个问题吧！下面是小编收集整理的相关资料希望对大家有所帮助。一、图片的垂直居中我们来看下面这段代码：<div class="container"><div class="nav fle
......
493
0
0
2022-04-03
介绍loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图，可供参考！Github就这样一个小小的库也收获了9.5k的stars，以下是其仓库源地址https://github.co
......
345
0
0
2022-04-03
作者：Patrik Kiss 译者：前端小智 来源：dev1.Animista网站地址:http://animista.net/网站描述:在线生成 css 动画Animista是一个在线动画生成器，同时也是一个动画库，它为我们提供了以下功能1. 选择不同的动画我们可以选择想要的动画类型（例如entrance/exist），除了可以选择某个动画（例如，scal
......
307
0
0
2022-03-31
今天在写uni-app项目的时候学到一个不错的API，今天记录一下。CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。当我们把flex-shrink设置为0的时候就是不让元素挤压。该柔性收缩属性指定多少项目会缩小相对的其余项目柔性容
......
247
0
0
2022-03-30
点击右上方红色按钮关注“web秀”，让你真正秀起来前言作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。CSS实用技巧第一讲：文字处理本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。文本
......
251
0
0
2022-03-30
用一个CSS属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。现在添加魔术CSSclamp(minimum, preferred, maximum);
在这里！你已经完成了✌说明clamp()的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和
......
279
0
0
2022-03-29
本文已经过原作者 Ahmad Shadeed 授权翻译大家看到这个标题可能会以为小智是不是又写错别字了 ，响应式高度设计？你认真的吗？因为“响应式Web设计”通常是在多个宽度和设备尺寸上检查浏览器。我们一般通过减小宽度调整水平方向的响应能力，但是我很少看到通过减小浏览器高度来进行垂直响应的考虑。此时，智米么内心可能有一丝的波动，并带有许些疑问：我们需要降低浏
......
239
0
0
2022-03-29
animate.css是一款强大且实用的css动画库，目前github的stars量69K以上教程使用的是最新版本4.1.1一、安装1、通过npm工具安装npm install animate.css --save
2、html文件直接导入github搜索moment直接下载源码文件包<link rel="stylesheet" href="./cs
......
345
0
0
2022-03-27
1.直角三角形（1）等边直角三角形制作 <style>
.box1 {
/* 盒子的宽度、高度、行高、字体大小都设置为0 */
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/* 利用边框的四个边的宽度、线型、颜色属性，设置三角形 */
/*
......
307
0
0
2022-03-27
1.CSS样式初始化不同的浏览器对有些HTML标签属性的默认值是不同的，为消除这种差异，需要对CSS进行初始化，即通过设置样式及其属性值，替代浏览器默认的属性值。2.京东首页CSS初始化（1）CSS初始化样式引入方式采用引入外部样式表的方式进行CSS初始化（2）相关代码解读/* 京东CSS初始化 */
/* *为通配符，表示html所有标签 */
*
......
363
0
0
2022-03-27
radio、checkbox和switch应该是一个比较常用的html标签，尤其是在中后台ERP系统里面更为常见。不过浏览器自带的样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，自定义样式就被提出来了。实现思路纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个inp
......
766
0
0
2022-03-27