css弹性布局和网格布局

css布局

一、知识补充

1. 浮动的特性

  • 只会影响后面的元素
  • 文本不会被浮动元素覆盖（浮动的特性就是图文混合）
  • 具备内联盒子特性：宽度由内容决定
  • 具备块级盒子特性：支持所有样式
  • 浮动放不下，会自动折行

template:

<div class="class"><div></div><div></div><div>图文混合</div></div>

css样式

.class div:nth-of-type(1){width: 50px;height: 50px;background-color: green;
}
.class div:nth-of-type(2){float: left;width: 100px;height: 100px;background-color: blue;
}
.class div:nth-of-type(3){width: 200px;height: 200px;background-color: red;
}

2. 相对定位及特性 (position: relative)

  • 相对定位的元素是在文档中的正常位置偏移给定的值
  • 不影响其他元素布局
  • 相对于自身进行偏移

3. 绝对定位及特性 (positon: absolute)

  • 绝对定位的元素脱离了文档流，绝对定位元素不占据空间
  • 具备内联盒子特性：宽高由内容决定（float）
  • 具备块级盒子特性：支持所有样式（float）
  • 绝对定位元素相对于最近非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位

4.固定定位及特性 （positon: fixed）

  • 固定定位与绝对定位相似，但是会固定在可视区中
  • 具备内联盒子特性：宽高由内容决定（absolute, float）
  • 具备块级盒子特性：支持所有样式 （absolute, float）
  • 固定定位元素不受祖先元素影响

5. 黏性定位及特性 (position: sticky)

涨知识：
  • 黏性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
position: sticky;
top: 0

6. 页面消失方法

1. display:none

元素不存在，不会占据页面位置；会对页面进行重绘，重排，重新绘制元素信息及重新安排页面元素位置

2. visibility:hidden

3. opacity: 0

display：nonevisibility: hiddenopacity: 0
页面中不存在存在存在
重绘会会不一定
重排会不会不会
自身绑定事件不触发不触发可触发
transition不支持支持支持
子元素复原不能能不能
被遮挡元素触发事件不影响不影响影响

二、弹性布局 flex

1. 主轴和交叉轴

在这里插入图片描述

2. flex容器与flex子项

flex容器：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex子项

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

flex-direction 改变主轴的方向

  • row 主轴方向五为横向 （默认横向）
  • column 主轴方向为竖向
  • row-reverse 主轴方向横向 从后面开始排列
  • column-reverse 主轴方向竖向 从最下面开始排列

3. 换行与缩写

flex-wrap: 换行属性

  • nowrap (默认) 不进行换行
  • wrap 换行
  • wrap-reverse 反向折行

Tips:

  • 不设置换行的话，当子项的总宽大于父容器的宽度，子项会平均的分父容器的宽。
  • 当子项不设置宽度时，子项会根据内容获取宽度
  • 当子项不设置高度时，子项会获取父容器的高度
  • 当换行时，将父容器按所分的列数平分高度，子项会在平分的首行

4. 主轴对齐详解

justify-content 改变主轴的对齐方式

  • flex-start (默认) 对齐方式：靠右
  • flex-end 对齐方式：靠右
  • center 居中
  • space-around 平均分配所有空间，中间的空隙是两侧空隙的两倍
  • space-between 第一个子项和最后一个子项会贴到父容器的两侧，其余的平均分配空隙
  • space-evenly 子项之间的空隙都是等价的，不管最右边和最左边的空隙还是中间的空隙都是等价的

5.交叉轴对齐详解

align-content 交叉轴的整体的对齐方式

  • stretch （默认） 拉伸
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • space-evently

Tips:

  • align-content 在不设置折行的情况下是不生效的 （flex-wrap）

align-items 针对每一行的对齐方式

  • stretch （默认）
  • flex-start 在它自身的那一行的容器当中是顶对齐的
  • flex-end
  • center
  • baselind

6. 元素上下左右居中

内联的上下居中方式

template:

<div class="box">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
1. 弹性布局
.box {width: 300px;height: 200px;background: skyblue;display: flex;align-items: center
}

或者

.box {width: 300px;height: 200px;background: skyblue;display: flex;flex-wrap: wrap;align-content: center
}
2. 设置行高的方式
涨知识：

行高的方式上下居中只能适用于单行，多行文字的话不行

.box {width: 300px;height: 200px;background: skyblue;line-height: 200px;
}
3. display: table-cell
.box {width: 300px;height: 200px;background: skyblue;display: table-cell;vertical-align: middle;
}

块级元素的上下左右居中方式

template

<div class="box"><div></div>
</div>
1. 弹性布局
.box {width: 300px;height: 200px;background:  skyblue;display: flex;justify-content: center;align-items: center;
}
.box div {width: 100px;height: 100px;background: pink;
}
2. 绝对定位
.box {    width: 300px;    height: 200px;    background:  skyblue;    position: relative;}.box div {    width: 100px;    height: 100px;    background: pink;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}
3. margin: auto
.box {width: 300px;height: 200px;background:  skyblue;position: relative;display: flex;
}
.box div {width: 100px;height: 100px;background: pink;margin: auto;
}

或

.box {width: 300px;height: 200px;background:  skyblue;position: relative;
}
.box div {width: 100px;height: 100px;background: pink;    position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}
涨知识：

弹性可以解决margin遗留下来的全部问题，像margin的叠加，传递，auto上下布局中等问题。

不定项居中布局

不定项：不确定元素的个数

7. flex-grow 扩展比例

flex子项的flex-grow : 默认值为 0 ，表示不占用剩余的空白间隙扩展自己的宽度

template :

<div class="main"><div></div>
</div>

css:

.main {width: 500px;height: 300px;background: skyblue;display: flex;
}
.main div {width: 100px;height: 100px;background: pink;flex-grow: 1;
}

flex-grow: 0； 默认值

如果比例值为1，就占满剩余所有空间

如果 0.5 的话 ，按照上面的布局 （500-100） * 0.5 + 100

如果比例值大于等于1时， 都会占满剩余所有空间

如果N个子项（N>1）都有扩展比例时，会把剩余空间以扩展比例等比分配；

8. flex-shrink 收缩比例

与扩展比例 flex-grow 相反；

默认值为1， 自动收缩，跟容器大小相同

9. flex-basis及flex缩写

flex-basis 设置主轴方向的宽度（高度）

主轴方向为从左到右时 ，flex-basis指的就是宽度

主轴方向从上到下时 ， flex-basis指的就是高度

template:

<div class="main"><div></div>
</div>

.main {width: 500px;height: 300px;background: skyblue;display: flex;
}
.main div {width: 100px;height: 100px;background: pink;flex-basis: 200px;
}
/* 宽度为200px */

或者

.main {width: 500px;height: 300px;background: skyblue;display: flex;flex-direction: column;
}
.main div {width: 100px;height: 100px;background: pink;flex-basis: 200px;
}
/* 高度为200px */

flex-basis的默认值为auto，会自适应内容定义宽高

如果设置成 0 的话，将会没有宽高，会将内容单行或单列布局

flex

flex 是 flex-grow , flex-shrink及flex-basis的缩写

10. order 及 align-self

涨知识

order : 默认值0，改变某一个flex子项的排序位置

template:

<div class="main"><div>1</div><div>2</div><div>3</div><div>4</div>
</div>

css

.main {width: 500px;height: 300px;background: skyblue;display: flex;
}
.main div {width: 100px;height: 100px;background: pink;
}
.main div:nth-of-type(1) {order: 1;
}
.main div:nth-of-type(4) {order: -1;
}

上面的样式中，第一个div会跳到最后，第四个div会显示在第一

align-self

默认值为auto , 控制单独某一个flex子项的垂直对齐方式

涨知识：

auto 是跟父容器的align-items一样的值

11. 等高布局

弹性默认是拉伸的，所以默认就有等高布局的特性

template:

<div class="main"><div><p>测试内容</p><p>测试内容</p></div><div><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p></div>
</div>

css

.main {width: 500px;background: skyblue;display: flex;justify-content: space-between;
}
.main div{width: 100px;background: pink;
}

三、网格布局grid

grid容器

在这里插入图片描述

grid子项

在这里插入图片描述

定义网格及fr单位

  • grid-template-rows / grid-template-columns 基于网格行和列的维度，定义网格线的名称和网格轨道的尺寸大小
display:grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;

上面的是3x3的网格，每格的宽高都为50px , 宽高可以是百分比，px，fr单位。

fr 单位：均分父容器的宽高

  1. fr 都为 1 的话 均分父容器的宽高
  2. 其中一个fr 比别的fr 等比大的话 该网格会占据等比大的宽高
  3. fr 之和小于1 的话 网格百分比占据容器 ， 会剩余宽高。

合并网格及网格命名

  • grid-template-areas 使用命名方式定义网格区域，需配合子项的
    grid-area 斜体样式属性进行使用

父容器

width:300px;
height:300px
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";

子项

div:nth-of-type(1){grid-area: a1;
}
...

tips: 少命名网格的话，未命名的网格会自动填充到未定义的空隙中，自动填充特性

  • grid-template grid-template-rows grid-template-columns grid-template-areas的缩写
grid-template:
"a1 a1 a2" 1fr
"a1 a1 a2" 1fr
"a3 a3 a3" 1fr
/1fr 1fr 1fr;

网格间隙及简写

  • grid-row-gap
  • grid-column-gap
  • grid- gap

为了弹性设置，对应的别的样式的间隙问题，grid去掉的,

  • row-gap
  • column-gap
  • gap

flex布局中也可以使用

网格对齐方式及简写

  • justify-items
  • align-items
  • place-items
    • start 开始位置
    • center 中间位置
    • end 结束位置

默认值 stretch 拉伸的，指定子项在网格中的对齐方式；子项在自己所属的单元格中的对齐方式

当子项的大小 小于 单元格的大小是才会生效。

  • justify-content
  • align-content
  • place-content
    • start 开始位置
    • center 中间位置
    • end 结束位置
    • space-between 平分（两边没有空隙）
    • space-around 平分（两边有空隙）
    • space-evenly 完全均分

默认值 stretch 拉伸的，指定所有单元格（网格）在父容器中的对齐方式；

当父容器大于网格时 才会生效，就是给网格的单元格指定大小后总大小小于父容器的大小

基于线的元素位置

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

表示grid子项所占据的区域的起始位置和终止位置，包括水平和垂直方向

span 表示占据网格数据

在定义网格行列的时候是可以定义线的命名的

grid-template-columns:[col1] 1fr [col2] 1fr [col3] 1fr [col4];
grid-template-rows:[row1] 1fr [row2] 1fr [row3] 1fr [row4];

grid-area: 其实是 grid-row-start grid-column-start grid-row-end grid-column-end属性的缩写，额外支持grid-template-areas设置的网格名称

也可以这样写，也支持span

grid-column: 1/2;
grid-row: 2/3;

repeat() 和 minmax()

当定义行列时大小都一样时，可以用repeat进行简写

grid-template-columns: 100px 100px 100px;
//可以写成
grid-template-columns: repeat(3, 100px);
grid-template-columns: repeat(auto-fill, 100px);

auto-fill 自适应的现象；自动根据父容器的大小决定拆分多少的单元格，比如 grid-template-columns: repeat(autofill, 100px); 不管容器大小多大都是固定的4个网格，当一行放不下时会折到下一行，用autofill的话在一行可承载的情况下会覆盖整个一行。

minmax 定义网格的最大值和最小值

grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px;
//上面的第二个网格是自适应的宽度，根据拉伸网页变动，当网页的宽度小于等于200px就会消失，这是就可以使用minmiax解决grid-template-columns: 100px minmax(100px,1fr) 100px;
grid-template-rows: 100px;
//这样的话 不管怎么拉伸网格的宽度始终大于100px

例子：需求，在行中的网格的数量根据分辨率的大小改变

display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-rows: 100px;
grid-auto-rows: 100px;
gap: 20px;

叠加布局

原理：将两个内容通过网格的定义单元格的所属区域的方式，定在同一个单元格中

<div class="main"><img src="../images/map.png" alt=""><span>地球</span></div>
/*   样式   */
<style>.main{height: 6.475rem;width: 6.475rem;display: grid;}.main img{grid-area: 1/1/1/1;}.main span{/* grid-column: 1/2;grid-row: 1/2; */grid-area: 1/1/1/1;justify-self: center;align-self: center;font-size: 40px;color: white;}</style>

四、display: table

1. table标签

<table border="1"><caption>我的标题</caption><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody>
</table>

caption标题 thead 表头 ，tbody表身 tfoot 表脚 tr 行 th（用在表头中），td单元格

colgroup和col

  • COLGROUP 元素指定表格中一列或一组列的默认属性。
  • COL 指定基于列的表格默认属性

template:

<table border="1" width="2500" height="500"><colgroup><col span="2" style="background:pink;"><col width="300"><col style="color:blue;"><col style="width:300px;"><col align="left" ><col align="center" style="text-decoration:underline;"><col align="right" style="font-size:20px;font-family:Courier New"><col align="justify" style="cursor:pointer"><col valign="top"><col valign="middle"><col valign="bottom" style="padding:20px;"><col valign="baseline" ></colgroup><tr><td>span="2"</td><td>span="2"</td><td>width="300"</td><td>color:blue;</td><td>width:300px</td><td>align="left"</td><td>align="center"</td><td>align="right"</td><td>align="justify"</td><td>valign="top"</td><td>valign="middle"</td><td>valign="bottom"</td><td>valign="baseline"</td></tr><tr><td>span="2"</td><td>span="2"</td><td>width="300"</td><td>color:blue;</td><td>width:300px</td><td>align="left"</td><td>align="center"</td><td>align="right"</td><td>align="justify"</td><td>valign="top"</td><td>valign="middle"</td><td>valign="bottom"</td><td>valign="baseline"</td></tr></table>

Tips:

  • 只有 width 和 background生效了，尽量不用吧

2. display:table用法

目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？

1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

4、table的嵌套性太多，用DIV代码会比较简洁

display:table系列与之相对应的table系的元素，如下：

display: tabletable标签讲义
tabletable此元素会作为会计表格来显示，表格前后带有换行符
inline-tabletable此元素作为内联表格来显示，表格卡后没有换行符
table-row-grouptbody此元素会作为一个或多个行的分组来显示
tabel-head-groupthead此元素会作为一个或多个行的分组来显示
table-footer-grouptfoot此元素会作为一个或多个行的分组来显示
table-rowtr此元素会作为一个表格行来显示
table-column-groupcolgroup此元素会作为一个或多个列的分组来显示
table-columncol此元素会作为一个单元格列显示。
table-cellth , td此元素会作为一个表格单元格显示。
table-captioncaption此元素会作为一个表格标题显示。

模拟表格： template

<div class="table"><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div>
</div>

css

.table {display: table;border: 1px solid #cccccc;margin: 5px;/*display: table时padding会失效*/}.row {display: table-row;border: 1px solid #cccccc;/*display: table-row时margin、padding同时失效*/}.cell {display: table-cell;border: 1px solid #cccccc;padding: 5px;/*display: table-cell时margin会失效*/}

Tips :

  • display: table-cell 指让标签元素以表格单元格的形式呈现，使元素类似于 td 标签
  • display: table-cell 属性也会被 float，position : absolute 等属性**破坏效果**，应避免同时使用。

table 解决问题：

1. 多行文字居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table</title><style>.parent{display: table;width: 400px;height: 400px;text-align: center;border:1px solid red;margin:0 auto;background: blue;   /*背景颜色无效*/}.child{display: table-cell;    /*子元素成为表格单元格（类似 <td> 和 <th>）*/height: 200px;background: yellow;vertical-align: middle; /*表格容器可以设置垂直对齐属性*/white-space: pre;}</style>
</head>
<body><div class="parent"><div class="child">display: table-row-group;display: table-header-group;display: table-footer-group;display: table-row;display: table-cell;display: table-column-group;display: table-column;display: table-caption;display: ruby-base;display: ruby-text;display: ruby-base-container;display: ruby-text-container;</div></div>
</body>
</html>

Tips :

设置了display：table-cell的元素：

  • 对宽度高度敏感
  • 对margin值无反应
  • 响应padding属性
  • 内容溢出时会自动撑开父元素

2. 制作自适应搜索框

涨知识：white-space 属性详解

我们熟知的是：

  • 在开发中，无论我们敲多少空格和回车，显示在页面上的都会合并成一个
  • 我们的文字在超过一行的情况下，就会自动换行

属性介绍：
在这里插入图片描述

这个古诗是怎么打出来的呢？

床(空格)前(空格)(空格)(空格)(空格)明月光，疑是地上霜

（回车）

举头望明月，低头(Tab)思故乡

下面一个表格来说明一下出现这种情况的原因：

属性效果兼容
normal 默认所有空格、回车、制表符都合并成一个空格，文本自动换行IE7\IE6 +
nowrap所有空格、回车、制表符都合并成一个空格，文本不换行IE7\IE6 +
pre所有东西原样输出，文本不换行IE7\IE6 +
pre-wrap所有东西原样输出，文本换行IE8 +
pre-line所有空格，制表符合并成一个空格，回车不变，文本换行IE8 +
inherit继承父元素IE不支持，不推荐使用

属性使用：

  1. 列表溢出换行处理

同样是320px的手机，iphone4可以在一行显示，但是安卓端就会有错位现象，这个开始让我很头疼，这样的话使用媒体查询也无法处理，所以在这一行的父元素中设置，所有的元素强制一行显示。

ul {white-space: nowrap; /*强制内容在一行显示*/overflow: hidden;  /*超出部分隐藏*/
}
  1. 文字溢出省略处理

文字超出去怎么办？一般都自动换行了，想要文字溢出的部分自动用省略号表示，那么离不开三个属性:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;  /*溢出部分使用省略号*/
  1. 文字展示

如果是显示诗歌，或者文案之类的，很多情况需要输入什么样子，出来什么样子。

这个时候用pre属性是最合适的(毕竟兼容性最好么):

white-space: pre;

五、媒体查询

1. 媒体查询概念

媒体查询：

  • 媒体类型
    • all ：适用于所有设备
    • print ：适用于在打印预览模式
    • screen ：只要用于屏幕
    • speech ： 主要用于语音合成器
  • 媒体特性 ：描述了user agent、输出设备，或浏览环境的具体特征
    • width: viewport的宽度
    • height: viewport的高度
    • aspect-ratio: viewport的宽高比
    • orientation：viewport的旋转方向 ( landscope 水平方向 portrait 垂直方向 )
    • …
  • 逻辑操作符
    • and
    • not
    • only
    • 逗号 ，（类似或）
  • link标签方式 （通过media属性设置媒体查询类型和媒体特性）

写法如下：

template

<div class="box">aaaaaaaaaaaa
</div>

css

@media print {.box {font-size: 60px}
}
/* 上面的样式只会在打印模式下会生效 */@media screen and (min-width: 700px) and ( max-width: 1200px){.box {width: 200px;height: 200px;background: pink;}
}
/* 上面的样式只会在屏幕下宽度大于700px并且小于1200px时会生效 */

2. 响应断点（阈值）设定

  • Extra Small < 576px
  • Small >= 576px , sm
  • medium >= 768px , md
  • large >= 992px, lg
  • x-large >= 1200px , xl
  • xx-large >= 1400px, xxl

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/56564.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

系统架构师（二）案例题

系统架构师（二）案例题

目录 一、软件结构设计 &#xff08;一&#xff09;软件质量属性 &#xff08;二&#xff09;风险&#xff0c;敏感点&#xff0c;权衡点 二、结构化软件系统建模 &#xff08;一&#xff09;流程图和数据流图 &#xff08;二&#xff09;实体和类的区别 &#xff08;三…
阅读更多...
链表的定义和使用

链表的定义和使用

1.链表概念&#xff1a; 链表是一种物理存储结构上非连续存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的引用链接次序实现的。 //通俗的说&#xff1a;链表就是由一个个节点组成&#xff0c;这些节点逻辑上连续&#xff0c;物理上不连续&#xff09; 2.链表的类型&am…
阅读更多...
做一个Python颜值打分系统，比比看杨幂和杨超越到底谁更美？

做一个Python颜值打分系统，比比看杨幂和杨超越到底谁更美？

下面就来讲讲我设计的这套颜值打分系统，先上图片让大家看一下效果，比如看一下我的女神杨幂的颜值如何: 怎么样，结果是相当的精准吧，大家是不是已经跃跃欲试了呢？下面就针对该颜值打分系统进行讲解。 01. 注册百度API 该系统最为核心的部分就是颜值的打分，这里其实是直…
阅读更多...
二叉树的定义和使用

二叉树的定义和使用

1.二叉树概念&#xff1a; 树的定义&#xff1a; 树是一种抽象数据类型&#xff0c;用来模拟具有树状结构性质的数据集合。它是由n&#xff08;n>0&#xff09;个有限节点通过连接它们的边组成一个具有层次关系的集合&#xff08;根朝上&#xff0c;而叶朝下&#xff09;。…
阅读更多...
量化交易入门先看这几种常见的策略分类

量化交易入门先看这几种常见的策略分类

量化交易的本质是对数据的处理和内在规律的探索&#xff0c;本文简要概括了市场上常见的量化策略类型&#xff0c;并给出了对应的例子。希望能帮助大家构建对量化策略的整体认识。 一起开始今天的学习吧~ 涉及到的市场 主要指传统二级市场&#xff0c;一般指股票二级市场和期…
阅读更多...
QMT量化交易软件使用攻略（二）-策略编写

QMT量化交易软件使用攻略（二）-策略编写

【策略编辑器】是迅投专门为模型开发者设计的&#xff0c;集成了模型列表、函数列表、函数帮助、模型基本信 息、参数设置、回测参数等多个部分&#xff0c;拥有代码高亮、自动补全等便捷功能于一体的便捷的模型编辑、 开发环境 编写 Python 策略需在开始时定义编码格式&#x…
阅读更多...
电脑如何剪辑视频？自学视频剪辑的朋友看过来

电脑如何剪辑视频？自学视频剪辑的朋友看过来

相比于手机来说&#xff0c;很多专业人士喜欢在电脑剪辑视频多一点&#xff0c;毕竟电脑的配置高&#xff0c;很多专业的视频剪辑、制作工具都是要在电脑上使用的。现在&#xff0c;有越来越多人加入到这个行业中来&#xff0c;在短视频行业中要想持续发展的话&#xff0c;不掌…
阅读更多...
推荐几个方法教你学会怎样制作视频剪辑

推荐几个方法教你学会怎样制作视频剪辑

随着时代的发展&#xff0c;新媒体行业的壮大&#xff0c;应该不少小伙伴每天都需要制作视频剪辑吧&#xff0c;有些可能是因为从事短视频行业&#xff0c;每天就需要发送视频内容&#xff0c;才能吸引观众&#xff0c;也有些可能只是想单纯分享一些生活视频。那你知道如何制作…
阅读更多...
视频剪辑怎么自学？其实剪辑很简单

视频剪辑怎么自学？其实剪辑很简单

视频剪辑怎么自学&#xff1f;现如今短视频发展十分迅速&#xff0c;几乎人人都在参与其中。相信大家在日常生活中也是会拍摄一些好看好玩的视频的。那么我们在整理视频的时候也是可以将其剪辑成一段好看的片段的。可能很多小伙伴们还不是很清楚剪辑视频的方法&#xff0c;这里…
阅读更多...
毕业季 拍大师教你制作另类毕业视频

毕业季 拍大师教你制作另类毕业视频

又是一年的毕业季&#xff0c;各路亲朋好友、师弟师妹们都过来围观&#xff0c;让青春的末班车留下了很多动人又雷人的画面。一琢磨&#xff0c;用拍大师把这段青春的美好回忆做成了一个MV视频&#xff0c;打上离别时想对童鞋们说的话&#xff0c;定格的回忆画面瞬间让童鞋们泪…
阅读更多...
LLM 系列 | 08: 如何用ChatGPT构建点餐机器人？

LLM 系列 | 08: 如何用ChatGPT构建点餐机器人？

简介 风蒲猎猎小池塘&#xff0c;过雨荷花满院香&#xff0c;沉李浮瓜冰雪凉。小伙伴们好&#xff0c;我是微信公众号《小窗幽记机器学习》的小编&#xff1a;卖铁观音的小男孩。 更多、更新文章欢迎关注 微信公众号&#xff1a;小窗幽记机器学习。后续会持续整理模型加速、模…
阅读更多...
华为面试题目：一头牛重800kg，一座桥承重700kg，牛如何过河？天秀回答秒通过...

华为面试题目：一头牛重800kg，一座桥承重700kg，牛如何过河？天秀回答秒通过...

一头牛重800kg&#xff0c;一座桥承重700kg&#xff0c;牛如何过河&#xff1f; 最近随着几档职场真人秀的热播&#xff0c;一些职场类的话题也接二连三地被推上热搜&#xff0c;引起大家的广泛热议。尤其是在春招如此激烈的环境下&#xff0c;与招聘有关的新闻更是受到大家的热…
阅读更多...
《Tritium投研报告》冥王星（Plutos）——基于Solana、Polkadot和BSC跨链合成资产发行交易平台

《Tritium投研报告》冥王星（Plutos）——基于Solana、Polkadot和BSC跨链合成资产发行交易平台

​点击上方蓝字关注我们 该报告为Tritium Ventures独家投研报告&#xff0c;报告内容仅供参考&#xff0c;不作为投资建议或投资依据。 先说结论&#xff1a; 项目上线不久&#xff0c;目前价格与估值偏低。但是由于其属性和未来逐步上线的功能会逐渐吸引用户得到相应发展。尤其…
阅读更多...
谷歌的最新NLP模型，现在能陪你从诗词歌赋谈到人生哲学

谷歌的最新NLP模型，现在能陪你从诗词歌赋谈到人生哲学

水木番 发自 凹非寺 量子位 报道 | 公众号 QbitAI 继BERT之后&#xff0c;谷歌在NLP模型上又有大动作&#xff01; 在今天的谷歌I/O大会上&#xff0c;一口气发布了2个新模型&#xff1a; LaMDA和 MUM&#xff0c;均基于Transformer架构。 LaMDA&#xff08;对话应用程序的语言…
阅读更多...
新征程，新视野，TOP主网开启新时代！

新征程，新视野，TOP主网开启新时代！

2006年1月19日美国东部时间下午2点&#xff0c;美国国家航空航天局(NASA)的“新视野&#xff08;New Horizons&#xff09;”号航天器从佛罗里达沿岸发射升空&#xff0c;开始了载入史册的漫长旅程。 “新视野&#xff08;New Horizons&#xff09;”号航天器的发射是人类历史…
阅读更多...
冥王星轨道发现不明生命 全世界都惊呆了

冥王星轨道发现不明生命 全世界都惊呆了

据美国宇航局官方最新消息&#xff0c;新视野号探测器在去年完成了对冥王星的飞掠&#xff0c;创造了人类史上的第一次&#xff0c;这里距离地球48多亿公里&#xff0c;NASA飞船整整飞了九年的时间才抵达。 进入冥王星飞掠轨道时&#xff0c;全世界都屏住了呼吸&#xff0c;我们…
阅读更多...
更安全的使用体验，微软宣布第一台带有安全冥王星芯片的PC

更安全的使用体验，微软宣布第一台带有安全冥王星芯片的PC

继10月发布的Windows 11之后&#xff0c;微软上周宣布了第一款采用Pluton芯片到云安全技术的PC。该技术旨在保护远程工作人员和其他人的计算机。 在CES上&#xff0c;微软宣布联想和芯片制造商AMD已经推出了第一款笔记本电脑——ThinkPad Z13和ThankPad Z16——它们原生了冥王星…
阅读更多...
WxGL应用实例：绘制高精度的3D太阳系模型

WxGL应用实例：绘制高精度的3D太阳系模型

文章目录 1 坐标系的选择1.1 黄道坐标系1.2 三维空间直角坐标系 2 使用JPL星历表计算轨道2.1 日期时间2.2 特定时刻天体的位置2.3 天体运行轨道 3 太阳系模型3. 1 太阳和八大行星全家福3.2 时间、距离和半径的缩放3.3 黄道坐标系模型 天何所沓&#xff1f;十二焉分&#xff1f;…
阅读更多...
冥王星P的编曲日志《我们就这样溺死在漩涡里》

冥王星P的编曲日志《我们就这样溺死在漩涡里》

这次做的是偏金属的摇滚&#xff0c;因为自己学啥啥不行就想写首歌抨击内卷。写出来发现基底竟然有点neru的味道&#xff0c;于是就参考neru的《再教育》对旋律进行了一些改造和优化。 在这里插入图片描述 乐器配置以吉他为主&#xff0c;配上一个不是那么金属的贝司和明亮的钢…
阅读更多...
冥王星P的编曲日志《时光的眼泪》

冥王星P的编曲日志《时光的眼泪》

某一时刻突然意识到应该记录下作曲编曲的过程及亮点&#xff0c;以实现代码的重用&#xff08;bushi&#xff09; 让我们回到时代久远的第一个工程《时光的眼泪》 乐器配置情况流行抒情的基本配置&#xff0c;主要是仿照letter song。在第二段主歌加了电吉他扫弦&#xff08;仿…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发