/** layui-v2.3.0 MIT License By https://www.layui.com */.layui-inline,img { display: inline-block; vertical-align: middle} .layui-rate,li { list-style ...
转载
2021-08-08 07:53:00
1341阅读
2评论
目录结构 引用路径 <link rel="stylesheet" href="../static/layui/css/layui.css" type="text/css"/> application.properties spring.mvc.static-path-pattern=/static/
转载
2021-02-13 19:47:00
308阅读
2评论
使用插件(layui.css)对原本样式的影响作者:吱韩菌 下面是我最近做的一个页面遇到的问题,在页面设计到一半时,发现后半部分的页面涉及到的样式效果较多、代码量较大的缘故,于是打算用插件完成一些样式效果。我所用到的插件是layui.css和layui.all.js。 引用插件之后的效果: 未引用插件之前: 引用插件之后的效果: 鼠标移入: 未引用插件之前: 引用插件后在页面发现部分样式发生改变,
转载
2024-09-29 14:51:47
33阅读
css代码技巧 文章目录css代码技巧前言一、减少要改动的地方1.1 当某些值相互依赖时,应该把它们的相互关系用代码表达出来1.2 代码量少和代码易维护有时候不可兼得1.3 灵活控制1.4 使用currentColor变量简化代码1.5 使用inherit继承关键字二、视觉设计2.1 文本容器的内边距问题三、分栏布局的栏个数四、简写和展开式属性合理使用总结 前言一、减少要改动的地方1.1 当某些值
转载
2024-10-27 21:20:42
18阅读
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.or
原创
2019-06-03 13:52:00
214阅读
开门见山的说,transition、transform和translate这三者经常有人搞混,先把这三者做一个简单解释:
transform是 转换,指的是改变所在元素的外观,它有很多种手段(转换函数)来改变外观,例如 位移、缩放、旋转 等,而其中的位移的函数名就叫translate,所以说,translate是transform的一部分。
transition是 过渡,指的是某个CSS属性值如何
转载
2024-06-24 18:27:06
196阅读
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果,可以简单理解为变形一、2D转换1、移动(translate)2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位①语法:  
转载
2024-06-28 00:03:55
59阅读
http://www.w3school.com.cn/css/index.asp
原创
2023-04-11 11:59:31
153阅读
input文本框 li+a的做法)。一个search大盒子里面包含2个表单。
原创
2023-07-06 15:56:46
185阅读
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。我们一般有三种方式:display:none, opacity:0;filter:alpha(opacity=0-100;, visibility:hidden。但这三种方式有何区别?一、三种隐藏方式的区别1、display:none(1)、浏览器不会生
转载
2024-10-22 21:04:49
22阅读
一、什么是SASSSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。二、安装和使用2.1 安装SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。假定你已经安装好了Ruby,
今天分享的是前端哥之前在做项目的时候遇到的一个需求,h5端需要很多的图标并且需要后台控制,当时设计师也比较忙,刚好前端框架用的layui,前端哥想了想就结合css字体图标font-awesome制作的这个字体图标选择插件,然后前端哥就整理一下代码分享到我的个人网站,希望对你有所帮助
原创
2023-01-27 11:04:36
232阅读
在实用价值的前提之下,我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中,发挥着重要的作用。layui 的动画全部采用 CSS3,因此不支持 ie8 和部分不支持 ie9。使用方式动画的使用非常简单,直接对元素赋值动画特定的 class 类名即可。如:其中 layui-anim 是必须的,后面跟着的即是不同的动画类
<div class="layui-anim layu
原创
2024-01-08 23:41:12
383阅读
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui 示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.
Sass和Less之间的区别是:1、Less在JS上运行,Sass在Ruby上使用;2、两者编写变量的方式不同;3、在Less中仅允许循环数值,而在Sass中可以遍历任何类型的数据;4、Sass有Compass,Less有Preboot。本教程操作环境:Windows7系统、Dell G3电脑。Sass和Less都是一种CSS预处理器,那么它们之间有什么差异?本篇文章就给大家介绍Sass和Less
转载
2024-03-26 08:32:13
92阅读
首先,Less 是 css 的预处理语言。less 文件的扩展名是.less ,需要将它进行编译,转化为.css文件,浏览器才可以使用。将 .less 转化为 .css 一般有三种方式: 1. Koala 自动监视编译 / Webpack / FIS 2. Sublime 插件 less2css 自动编译 && Lessc
转载
2024-03-11 23:31:00
546阅读
四、Sass、LESS和Stylus转译成CSSSass、LESS和Stylus源文件(除了LESS源文件在客户端下运行之外)都不能直接被浏览器直接识别,这样一来,要正常的使用这些源文 件,就需要将其源文件转译成浏览器可以识别的CSS样式文件,这也是使用CSS预处理器很关键的一步,如果这一步不知道如何操作,那么意味着写出来的代码 不可用。接下来按同样的方式,分别来看看三者之间是如何将其源文件转译成
less就是css的扩展语言
1变量
定义变量:
1. @width: 10px;
2. @color:#f00;
使用:
1. div a{
2. font-size:@width;
3. color:@color;
4. }
编译为:
1. div a{
2. font-size:10px;
3. color:#f00;
4. }
2 混合
混合(Mixin)是一种将一组属性从一个规则集
一、了解SASSsass是css的另一种写法,是对css添加了规则,封装了方法,让css代码变得更有复用性,结构更加清晰,也更便于维护二、安装SASS2.1首先前提是安装了npm,可以直接在项目中终端输入npm i sass安装sass就可以了$ npm i sass2.2 或者使用window+R,打开cmd,在里面输入也是可以三、 如何使用SASSSASS的使用过程3.1 创建首先创建一个.s
转载
2024-10-22 07:41:54
368阅读
通俗的来讲,Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,从而可以让Css更具维护性,主题性,扩展性。本文为Less入门与语法梳理教程。其中包括了一些入门级例子,适合于对Less有入门级了解的开发者查阅。LESS 源文件的引入方式与标准CSS文件的引入方式一样:复制代码