前端技术(七)——less 教程

2024-09-09 05:28
文章标签 技术 教程 前端 frontend less

本文主要是介绍前端技术(七)——less 教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、less简介

1. less是什么？

less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网:https://lesscss.cn/

2. less编译工具

koala 官网 http://koala-app.com/

3. less中的嵌套规则

1.基本嵌套规则

⑴ css中的标签嵌套的写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;}#wrap .inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}</style>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
</html>

在这里插入图片描述

⑵ less中嵌套标签中样式设置的写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/less">*{margin: 0;padding: 0;}#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}}</style>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

样式如下：

在这里插入图片描述

4. 使用koala将less文件编译成css文件

⑴ 先将之前的less样式拆分到css文件夹中的test.less文件中

拆分前的：
在这里插入图片描述
拆分后的
在这里插入图片描述

test.less

*{margin: 0;padding: 0;
}
#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}
}

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/less" href="css/test.less"/>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

结果为：
在这里插入图片描述

⑵ 通过koala将.less文件编译成.css文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将.less编译后生成的.css文件引入的html文件中
在这里插入图片描述

test.css文件

* {margin: 0;padding: 0;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

结果如下：
在这里插入图片描述

5. less中的注释

以 // 开头的注释，不会被编译到css文件中
以 /**/包裹的注释会被编译到css文件中

6. less中的变量

使用@来声明一个变量：@pink:pink;
1.作为普通属性值来使用: @pink
2.作为选择器和属性名来使用: @{selector的值}
3.作为URL： @{url}

.less不使用变量和.less使用变量对比
在这里插入图片描述
编译前的.less文件和编译后生成的.css文件对比
在这里插入图片描述

编译前的.less

/*多行注释*/
//单行注释
@color:pink;//作为普通值来使用
@m:margin;//作为属性名来使用
@selector:#wrap;//作为选择器*{@{m}: 0;padding: 0;
}
@{selector}{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @color;height: 100px;width: 100px;}
}

.less编译后生成的.css文件

/*多行注释*/
* {margin: 0;padding: 0;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffc0cb;height: 100px;width: 100px;
}

在这里插入图片描述

7. 变量的延迟加载和&的使用

⑴ 变量的延迟加载

在这里插入图片描述

⑵ &的使用

在这里插入图片描述

在这里插入图片描述
编译前的.less

*{margin: 0;padding: 0;
}
#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;//&符号主要用于引用父选择器，及 #wrap .inner &:hover{background-color: darkblue;}}
}

.less编译后生成的.css文件

* {margin: 0;padding: 0;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap .inner:hover {background-color: darkblue;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

效果如下：
在这里插入图片描述

二、less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

不用混合时候less的写法
在这里插入图片描述
编译生成.css文件
在这里插入图片描述
test.less文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}.inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

1. 普通混合和不带输出的混合改造

在这里插入图片描述
在这里插入图片描述
test.less文件

.juzhong{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong;}.inner2 {.juzhong;}
}

test.css文件

.juzhong {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

2. 带参的混合

在这里插入图片描述
由图可以看出来，通过带参混合的方式给css设置不同的样式。大大简化了代码。
在这里插入图片描述
test.less文件

.juzhong(@w,@h,@c){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @c;height: @h;width: @w;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong(100px,100px,yellow);}.inner2 {.juzhong(50px,50px,green);}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100px;width: 100px;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #008000;height: 50px;width: 50px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

3. 带参数并且有默认值的混合

在这里插入图片描述
在这里插入图片描述
test.less文件

.juzhong(@w:200,@h:100,@c:yellow){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @c;height: @h;width: @w;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong();}.inner2 {.juzhong();}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100;width: 200;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100;width: 200;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

4. 命名参数

使用带参并且有默认值的混合的时候，想给部分参数设置，这时候可以使用名称参数来区分是给哪个参数设值的。
在这里插入图片描述

在这里插入图片描述
test.less文件

.juzhong(@w:200,@h:100,@c:yellow){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @c;height: @h;width: @w;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong(@c:yellow);}.inner2 {.juzhong(@w:100px,@c:blue);}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100;width: 200;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #0000ff;height: 100;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

5.匹配模式

传值的时候定义一个字符，在使用的时候使用哪个字符，就调用哪条规则
在这里插入图片描述
编译后的

在这里插入图片描述
sjx.less文件

.sjx(@_){width: 0px;height: 0px;overflow: hidden;
}.sjx(T,@w,@c){border-width:@w;border-color: transparent  transparent  @c transparent ;border-style:dashed dashed solid dashed  ;
}.sjx(B,@w,@c){border-width:@w;border-color: @c transparent  transparent   transparent ;border-style:solid dashed dashed  dashed  ;
}.sjx(L,@w,@c){border-width:@w;border-color:  transparent @c  transparent   transparent ;border-style: dashed solid dashed  dashed  ;
}.sjx(R,@w,@c){border-width:@w;border-color:  transparent   transparent   transparent @c;border-style: dashed  dashed  dashed  solid;
}

test.less文件

@import "./sjx.less";
#wrap{.sjx(B,100px,red);
}

test.css文件

#wrap {border-width: 100px;border-color: #ff0000 transparent transparent transparent;border-style: solid dashed dashed  dashed  ;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="sjx"></div></div>
</body>
</html>

在这里插入图片描述

6. arguments变量

什么是@arguments 变量：@arguments 代表所有的可变参数

注意：

@arguments 代表所有可变参数，参数的先后顺序就是()括号内的参数的顺序
赋值时，值的位置和个数是一 一对应的。只有一个值时，把值赋值给第一个；有两个值时，把值赋值给第一个和第二个……以此类推；需要注意的是如果想给第一个和第三个赋值，不能写(值
1，值 3)，必须把原来的默认值写上去

在这里插入图片描述
在这里插入图片描述

test.less文件

.border(@w,@style,@c){border: @arguments;
}
#wrap .sjx{.border(1px,solid,red);
}

test.css文件

#wrap .sjx {border: 1px solid #ff0000;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="sjx"></div></div>
</body>
</html>

在这里插入图片描述

三、less运算

‌Less支持算术运算，包括加法(+)、减法(-)、乘法(*)和除法(/)，这些运算可以对任何数字、颜色或变量进行操作。‌ Less中的运算功能提供了灵活性，使得开发者能够更方便地处理样式计算，尤其是在需要动态调整样式属性时。这些运算不仅限于数值计算，还包括颜色和单位之间的计算，尽管在某些情况下，单位换算可能不会发生，或者换算结果可能被忽略（例如，从px到cm的转换）
在这里插入图片描述
在这里插入图片描述
test.less文件

.border(@w,@style,@c){border: @arguments;
}
#wrap .sjx{.border(1+100px,solid,red);
}

test.css文件

#wrap .sjx {border: 101px solid #ff0000;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="sjx"></div></div>
</body>
</html>

在这里插入图片描述

四、less继承

1. 用less混合模式

样式

在这里插入图片描述
juzhong.less文件

.juzhong(@w,@h,@c){position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: @w;height: @h;background-color: @c;
}

test.less文件

*{margin: 0px;padding: 0px;
}
@import "mixin/juzhong.less";
#wrap{position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;.inner{&:nth-child(1){.juzhong(100px,100px,pink);}&:nth-child(2){.juzhong(50px,50px,deeppink)}}
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner">inner1</div><div class="inner">inner2</div></div>
</body>
</html>

test.css文件

* {margin: 0px;padding: 0px;
}
#wrap {position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;
}
#wrap .inner:nth-child(1) {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 100px;height: 100px;background-color: #ffc0cb;
}
#wrap .inner:nth-child(2) {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50px;height: 50px;background-color: #ff1493;
}

2. 用less继承模式

样式：

在这里插入图片描述
juzhong.less文件

.juzhong{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.juzhong:hover{background-color: deepskyblue!important;
}

juzhong.css文件

.juzhong {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.juzhong:hover {background-color: deepskyblue!important;
}

test.less文件

*{margin: 0px;padding: 0px;
}
@import "mixin/juzhong.less";
#wrap{position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;.inner{&:extend(.juzhong);&:nth-child(1){width: 100px;height: 100px;background-color: pink;}&:nth-child(2){width: 50px;height: 50px;background-color: deeppink;}}
}

test.css文件

* {margin: 0px;padding: 0px;
}
.juzhong,
#wrap .inner {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.juzhong:hover {background-color: deepskyblue!important;
}
#wrap {position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;
}
#wrap .inner:nth-child(1) {width: 100px;height: 100px;background-color: pink;
}
#wrap .inner:nth-child(2) {width: 50px;height: 50px;background-color: deeppink;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner juzhong">inner1</div><div class="inner">inner2</div></div>
</body>
</html>

案例分析
在这里插入图片描述

五、 less避免编译

避免编译的格式：

*{margin: 10*10px;padding: ~"cacal(10*10px)";
}

在这里插入图片描述

这篇关于前端技术(七)——less 教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1150287。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Ubuntu固定虚拟机ip地址的方法教程

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接，所以ip地址会不停地变化，接下来我们就讲述ip如何固定 2、如果apt安
阅读更多...
PyCharm 接入 DeepSeek最新完整教程

PyCharm 接入 DeepSeek最新完整教程

《PyCharm接入DeepSeek最新完整教程》文章介绍了DeepSeek-V3模型的性能提升以及如何在PyCharm中接入和使用DeepSeek进行代码开发,本文通过图文并茂的形式给大家介绍的... 目录DeepSeek-V3效果演示创建API Key在PyCharm中下载Continue插件配置Con
阅读更多...
Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll
阅读更多...
在不同系统间迁移Python程序的方法与教程

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术（如Docker）、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术（如 docker）1. 创
阅读更多...
Spring Boot整合log4j2日志配置的详细教程

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》：本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
MySQL8.2.0安装教程分享

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2