大家好，今天我将向你分享38个可以用来创建漂亮样式的 CSS 工具。1、Layoutit Grid地址：https://grid.layoutit.com/Layoutit grid 是一个 CSS Grid 布局生成器。使用干净的编辑器可以快速绘制网页布局，并获取HTML和CSS代码以快速启动你的下一个项目。你也可以在 CodePen上看到代码！2、Sar
......
322
0
0
2022-11-11
:checked （选择所有选中的表单元素）如：input:checked ；:disabled （选择所有禁用的表单元素）如：input:disabled ；:empty （选择所有没有子元素的p元素）如：p:empty ；:enabled （选择所有启用的表单元素）如：input:enabled ；:first-of-type （选择每个父元素是p元素的
......
307
0
0
2022-11-11
按我想法的话，CSS 网格布局（grid）和弹性布局（Flexbox）应该同时出现才对，这样网页布局方案就变得完整了。事实是，弹性布局先出现，因为使用弹性布局创建类网格（grid-type）系统比使用浮动更加便捷，于是我们便得到了许多基于 Flexbox 的网格系统。实际上，Flexbox 的优势并不是用来创建网格系统，这也是为什么有时我们在用它创建网格系统
......
339
0
0
2022-11-11
UI的自我修养APP切图命名推荐一本书，关于字体设计，也关于设计师。@左佐工作室 的《设计师的自我修养》，他在开篇把设计师按旧时的称谓分为了徒、工、匠、师、家、圣。来说下我对“徒、工、匠、师、家、圣”理解。徒——对某行还不是很了解，正处于刚开始学习的阶段，也就是所谓的的菜鸟。工——巧饰也,象人有规榘也（MLGB，别装逼，说人话）。就是“美工”（你才是美工，你
......
251
0
0
2022-11-08
响应式布局简明示例，响应式布局最好同时也是自适应布局，然后再配合css3媒体查询，来达到完美的响应式布局。css3的媒体查询ie9一下是不支持的，这太遗憾了，不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件，引用方式如下：<!--[if lt IE 9]>
<script src
......
313
0
0
2022-11-07
块级格式化上下文（Block Formatting Context）是网页CSS视觉渲染的一部分，并用于决定块盒子的布局。在定位体系（Positioning Scheme）中它属于常规流（Normal Flow）。根据W3C所言：浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block
......
342
0
0
2022-11-04
新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。但是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是完全免费的 WebApp，这些 WebApp能够为模板，渐变，甚至浏览器属性的前缀生成 CSS3 代码。如果你是前端开发者，这些资源可以帮助你节省很多时间，并可以为以后的项目提供可
......
288
0
0
2022-11-04
知道了CSS3三剑客之一的transform可以用来让原本规规矩矩的元素产生变形，平移，旋转一样的旋转，接下来使用第二个特性，transition属性，增加变化过程中的过渡效果。Transition允许CSS的 属性值 在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法
......
279
0
0
2022-10-31
一、开启栅格布局（display:grid）–父容器栅格布局能将网页分成简单的行和列；Grid（网格）模块为display属性提供了一个新的值：grid。当你将任何元素的display属性设置为grid时，那么这个元素就是一个网格容器（grid container），他的所有直接子元素就成了网格项（grid items）；如下：.box容器下 .box>
......
363
0
0
2022-10-26
清除浮动，新手朋友往往不是很明白。如果不清除浮动对float进行闭合，在FF中往往会出错，网上是有很多文章讲过，我们先用一个非常简洁易用实例开始吧！给需要闭合的DIV（class为clearfix）加上如下的CSS样式即可：.clearfix:after{content:”.”;display:block;height:0;clear:both;visibi
......
291
0
0
2022-10-25
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。一 基本语法在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：p:before {}不过，在 CSS3 中为了区别伪元素和伪类为伪元素
......
341
0
0
2022-10-25
每天一点PS·点缀生活色彩▼WEB字体或者点击文章最后的阅读原文都可以下载的哦！Valentina – valentines day fontTelefonoAleksandraC VintageBroken Records by designer Timo KuilderBENNUDISENOEdelsansPasta SimplaFolkPolarisC
......
433
0
0
2022-10-22
原效果：实现效果：代码：<div> 打败苹果，十年巨亏，全球在线音乐第一股的转型之痛</div>
<style>
div{
width: 200px;
white-space: nowrap; /* 文本不换行 */
overflow: hidden;
......
298
0
0
2022-10-14
Chrome 浏览器有意改变<link rel="stylesheet">的加载方式，当其出现在<body>中时，这一变化将更加明显。笔者决定在本文中进行详细说明这种改变可能带来影响与好处。一.目前CSS文件的加载方式<head>
<link rel="stylesheet" href="/all-of-my-st
......
273
0
0
2022-09-27
一、兼容性一些CSS文章，或者CSS文档，兼容性什么的都是放在最后。又不是什么见不得人的事情，来，直接开篇就亮刺刀。兼容性还行， 除了IE不支持，其他浏览器基本上都绿油油，目前自娱自乐，内网项目什么的都是可以用用的。二、all是干嘛用的all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direct
......
313
0
0
2022-09-26