html弹性盒子布局,div+css3弹性盒子(flex box)布局「建议收藏」

html弹性盒子布局,div+css3弹性盒子(flex box)布局「建议收藏」一、CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新布局模式。CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。首先要明白几个概念:主轴:Flex容器的主轴主要用来配置Flex项目,默…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、CSS3 弹性盒子(Flex Box)

弹性盒子是CSS3的一种新布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

首先要明白几个概念:

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为main start 和main end。

交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start和 cross end。

设置了 display: flex 的父元素被称之为 flex 容器(flex container)。

在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)元素。

e12d3da9dc05?from=timeline

概念释义

二、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

Basic support (single-line flexbox)

29.0 21.0 -webkit-

11.0

22.0 18.0 -moz-

6.1 -webkit-

12.1 -webkit-

Multi-line flexbox

29.0 21.0 -webkit-

11.0

28.0

6.1 -webkit-

17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示,从左到右:

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

弹性盒子布局自动一行填满且不随浏览器大小而变化

四、CSS3 弹性盒子常用属性

属性

描述

flex-direction

指定弹性容器中子元素排列方式

flex-wrap

设置弹性盒子的子元素超出父容器时是否换行

flex-flow

flex-direction 和 flex-wrap 的简写

align-items

设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

align-content

修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐

justify-content

设置弹性盒子元素在主轴(横轴)方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

flex-direction: row | row-reverse | column | column-reverse;

e12d3da9dc05?from=timeline

四种方向row | row-reverse | column | column-reverse

属性值

描述

row

默认值。元素将水平显示,正如一个行一样。

row-reverse

与 row 相同,但是以相反的顺序。

column

元素将垂直显示,正如一个列一样。

column-reverse

与 column 相同,但是以相反的顺序。

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-direction:column;结果

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

描述

nowrap

默认值。规定元素不拆行或不拆列。

wrap

规定元素在必要的时候拆行或拆列。

wrap-reverse

规定元素在必要的时候拆行或拆列,但是以相反的顺序。

flex-wrap: nowrap | wrap | wrap-reverse;

可以取三个值:

(1) nowrap (默认):不换行。

e12d3da9dc05?from=timeline

nowrap

(2)wrap:换行,第一行在上方。

e12d3da9dc05?from=timeline

wrap

(3)wrap-reverse:换行,第一行在下方。

e12d3da9dc05?from=timeline

wrap-reverse

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*flex-direction:column;*/

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-wrap:wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-direction:column;flex-wrap:wrap;

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

/* flex-flow: */

flex-flow:column wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

/*

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

flex-flow:

例:flex-flow:row wrap;

* * */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-flow:row wrap;

4. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

描述

flex-start

默认值。项目位于容器的开头。

flex-end

项目位于容器的结尾。

center

项目位于容器的中心。

space-between

项目位于各行之间留有空白的容器内。(两端对齐,项目之间的间隔都相等)

space-around

项目位于各行之前、之间、之后都留有空白的容器内。(每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.)

e12d3da9dc05?from=timeline

分布图

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;*/

/*justify-content:space-around;*/

/*

flex-start 默认值。项目位于容器的开头。

flex-end 项目位于容器的结尾。

center 项目位于容器的中心。

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内

*/

}

.item{width: 100px; height: 200px;}

.item1-1{ background:red;height: 100px}

.item1-2{ background:orange;width: 300px;}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认 justify-content: flex-start;

justify-content:flex-end

e12d3da9dc05?from=timeline

justify-content:flex-end;

justify-content:center

e12d3da9dc05?from=timeline

justify-content:center;

justify-content:space-between; /*两端对齐,项目之间的间隔都相等。*/

e12d3da9dc05?from=timeline

justify-content:space-between;两端对齐,项目之间的间隔都相等

justify-content:space-around;每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

e12d3da9dc05?from=timeline

justify-content:space-around;每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.

5. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

描述

stretch

默认值。项目被拉伸以适应容器。

center

项目位于容器的中心。

flex-start

项目位于容器的开头。

flex-end

项目位于容器的结尾。

baseline

项目位于容器的基线上。

e12d3da9dc05?from=timeline

image

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items: stretch;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认align-items: stretch;如果项未设置高度或设为auto,将占满整个容器的高度

align-items:flex-start;

e12d3da9dc05?from=timeline

align-items:flex-start;交叉轴的起点对齐

align-items:flex-end;

e12d3da9dc05?from=timeline

align-items:flex-end;交叉轴的终点对齐

align-items:center;

e12d3da9dc05?from=timeline

align-items:center;交叉轴的中点对齐

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:baseline;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;} /* 修改文字开始的位置 通过padding来修改*/

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

align-items:baseline;项目的第一行文字的基线对齐

align-content 定义了多根轴线的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

描述

flex-start

与交叉轴的起点对齐。

flex-end

与交叉轴的终点对齐。

center

与交叉轴的中点对齐。

space-between

与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around

每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)

轴线占满整个交叉轴。

e12d3da9dc05?from=timeline

align-content 多根轴线的对齐方式

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

align-content: stretch;

/*

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center:与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; }

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6
1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认align-content:stretch;

align-content:flex-start;

e12d3da9dc05?from=timeline

align-content: flex-start;

align-content: flex-end;

e12d3da9dc05?from=timeline

align-content: flex-end;

align-content:center;

e12d3da9dc05?from=timeline

align-content: center;

align-content:space-between;

e12d3da9dc05?from=timeline

align-content: space-between;与交叉轴两端对齐,轴线之间的间隔平均分布。

align-content:space-around;

e12d3da9dc05?from=timeline

align-content:space-around;每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

五、flex-item项的常用属性(弹性子元素属性)

属性

描述

order

设置弹性盒子的子元素排列顺序。

flex-grow

设置或检索弹性盒子元素的扩展比率。

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-basis

用于设置或检索弹性盒伸缩基准值。

flex

设置弹性盒子的子元素如何分配空间。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

数值越小,排列越靠前,默认为0。

order: ;

:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

e12d3da9dc05?from=timeline

数值越小,排列越靠前

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; order: 6;}

.item1-2{ background:orange;width: 300px;height: auto;order: 5;}

.item1-3{ background:yellow;width: 100px;order: 0;}

.item1-4{ background:green;width: 100px;order: 3;}

.item1-5{ background:cyan;width: 100px;order: 2;}

.item1-6{ background:blue;width: 100px;order: 1;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

order分别设置为 6 5 4 0 3 2 1

2. flex-grow属性

flex-grow: ;

:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

e12d3da9dc05?from=timeline

按照设置数字比例进行拉伸,默认为0,即如果存在剩余空间,也不放大。

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px; flex-grow:1}

.item1-2{ background:orange;height: auto;flex-grow:5}

.item1-3{ background:yellow;flex-grow:1}

.item1-4{ background:green;flex-grow:1}

.item1-5{ background:cyan;flex-grow:1}

.item1-6{ background:blue;flex-grow:1}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-grow 属性设定分别为 1 5 1 1 1 1

3. flex-shrink属性

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认为1,即如果空间不足,该项目将缩小。负值对该属性无效

flex-shrink: ;

:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

如果设置为0不进行收缩,值越大收缩越多。

e12d3da9dc05?from=timeline

flex-shrink 设置分别为 1 0 1 1 1 1 1 1

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 400px; height: 200px;flex-shrink:1}

.item1-1{ background:red;height: 100px; }

.item1-2{ background:orange;height: auto;flex-shrink:2}

.item1-3{ background:yellow;flex-shrink:3}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-shrink 设置分别为 1 2 3 1 1 1 值越大缩放比例越大

4. flex-basis属性

flex-basis: | auto;

:一个长度单位或者一个百分比,规定元素的初始长度。

auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。

如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

默认值为auto,即项目的本来大小。也可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

描述

flex-grow

一个数字,规定项目将相对于其他元素进行扩展的量。

flex-shrink

一个数字,规定项目将相对于其他元素进行收缩的量。

flex-basis

项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。

auto

与 1 1 auto 相同。

none

与 0 0 auto 相同。

initial

设置该属性为它的默认值,即为 0 1 auto。

inherit

从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

}

描述

auto

默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

stretch

元素被拉伸以适应容器。

center

元素位于容器的中心。

flex-start

元素位于容器的开头。

flex-end

元素位于容器的结尾。

baseline

元素位于容器的基线上。

initial

设置该属性为它的默认值。

inherit

从父元素继承该属性。

可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

e12d3da9dc05?from=timeline

改变子元素的align-items

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:flex-start;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px; align-self:flex-end}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

align-items:flex-start; align-self:flex-end;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/227275.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 淘宝网店装修代码使用方法大全图_淘宝店铺装修代码用什么软件做的

    淘宝网店装修代码使用方法大全图_淘宝店铺装修代码用什么软件做的公告栏大小:宽不要超过480像素,高可以随意代码:店铺公告地址”/>要求:图片一定要通过网上空间或相册放置:管理我的店铺——基本设置——公告可以预览看一下悬挂饰物代码::你图片的地址”style=”left:20px;position:relative;top:0px”/>要求:不能是自己电脑上的图片,要在网上的图片地址才行放置:管理我的店铺—

    2022年10月30日
  • Doc2Vec,Word2Vec文本相似度 初体验。

    Doc2Vec,Word2Vec文本相似度 初体验。

  • springboot启动原理 通俗面试_spring高级面试题

    springboot启动原理 通俗面试_spring高级面试题importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;/***Helloworld!**/@SpringBootApplicationpublicclassApp{publicstaticvoidmain(String[]args){Syst.

  • IntelliJ IDEA快速入门 | 第三篇:彻底卸载IntelliJ IDEA

    IntelliJ IDEA快速入门 | 第三篇:彻底卸载IntelliJ IDEA写在前面之前,笔者在自己本机上就已经安装过了一个IntelliJIDEA,只不过其版本是2019.1.3,在桌面上的快捷方式如下图所示。而且之前我也已经将其激活成功教程了,就是网上找的方案来进行激活成功教程的,激活成功教程之后确实能用,不过由于那个时候我还在用Eclipse做Java后端开发,所以一直都没用IntelliJIDEA,不知道过了多长时间,打开它发现已过试用期,MD,老子不是已经激活成功教程过了吗,而且好像还能用到2099年,就这,就这,就这,就这就不能用了????各位看官老爷们,今天是2021年3月23日,下午1

  • 微型计算机硬件系统的性能主要取决6,大学计算机基础单选试题「附答案」

    微型计算机硬件系统的性能主要取决6,大学计算机基础单选试题「附答案」大学计算机基础单选试题「附答案」一、单选题1.世界上首次提出存储程序计算机体系结构的是(D)A.莫奇莱B.艾仑·图灵C.乔治·布尔D.冯·诺依曼2计算机诞生于(B)A.1941年B.1946年C.1949年D.1950年3、世界上第一台电子数字计算机采用的主要逻辑部件是(A)A.电子管B.晶体管C.继电器D.光电管4、下列叙述正确的是(D)A.世界上第一台电子计算机ENIAC…

  • Python上位机软件图形界面实战(2)[通俗易懂]

    Python上位机软件图形界面实战(2)[通俗易懂]前言上位机图形界面开发设计用QTDesigner就可以了。但是qtdesigner生成的是.ui文件,我们需要将.ui转换为我们用的py文件。这里就要用到昨天设置Pyuic来生成。由于只是初步开发所以设计的界面没有美化,只是体验一下功能就可以了。1Pyuic的修改今天做的时候才发现昨天的Pyuic没设置好。下来在昨天的基础上只修改这两行。-mPyQt5.uic.pyuic$F…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号