整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

96编辑器技巧分享如何快速加减行数项目

96编辑器技巧分享如何快速加减行数项目

前增加样式的行数需要从HTML代码里面设置,现在优化了这一功能,选中样式,点击样式工具栏的加一个或减一个即可快速操作。

具体步骤

选中一个样式,如24932样式,只有两个项目,如何增加第三个?

点击灰色样式工具栏的【加一个】按钮,即可添加第三个项目。

(加一个后效果图)

同样,也可以点击【减一个】,减少项目,如下图效果

(减一个后效果图)

注意

此功能也适用于正文——表格内容样式。只要选中样式,在样式工具栏内显示【加一个】、【减一个】选项,就说明该样式可以快速增加减少行数项目。若没有,则不能快速增减项目。

SS实现一个高度过度的动画 ,针对于属性height,设置一个transition动画就能实现我们想要看到的效果。而这个高度在实际情况下, 我们并不希望它是一个固定的值,需要做的更灵活一点,比如随着内容的增减自适应,所以,有人就会想到使用transition将高度从0过度到auto,然而,这样实现动画效果会生效吗?有没有更优秀的技巧或者方法了?

有的,今天和大家聊一聊这个问题。

文章中讲解的DOM结构,如下

效果如下,鼠标移上去的时候,下面这段文字展示(<mark>动画效果</mark> )

01. height过度0到auto?

默认的时候高度设置成0,鼠标移上去的时候,将高度设置成auto,像下面代码这样

从效果上来看,这个变化是瞬间的,并没有500毫秒过度效果。也就是说CSS不能使用transition实现height从0过度到auto。

这不符合我们的预期效果。

02. height过度0到固定值?

竟然auto不能动画过度,那我们就改成固定的值(最简单的就是改成数字),比如,从0过度到300。这样过度效果就生效了。

虽然这样能过度过去,但这不是一个很优的方法, 因为这样处理的话,我们得通过JS去计算这个高度,才能确保我们的功能不出BUG。

03. max-height过度0到固定值?

为什么不试一下最大高度了?

max-height从0到固定值也是可以animation过去的,唯一不太好的地方就是,我们的内容有可能会溢出,毕竟我们设置的只是一个最大的高度。

如果需求能保证内容的高度永远不会达到一定的值,用这个方法完全没什么问题。我们只需要设置一个适当的最大高度值就好。

04. 过度grid-template-rows?

这个时候,网格布局给我们提供了另外一个巧妙的解决方案。

只需要将grid-template-rows从0fr过度到1fr。如此一来,我们的网格项将从0过渡到其'自然'高度。这应该就是比较完美的解决办法。

代码如下

功能是实现了,我也不得不关注一下这属性的兼容性问题。

注意到chrome从107版本开始支持这个属性。

本格式标记

以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动,但是,文本格式的太多变化也会使人不快。

标题 - <head> </head>

head标记有6个级别可用,从h1用于最大和最重要的标题,到h6是最小的标题。

粗体 - <b> </b>

b标记之间的文本以粗体显示,与周围的文本相对突出。

斜体 - <i> </i>

i标记以一个小角度显示文本。

下划线 - <u> </u>

u标记在文本正文添加一条线,请注意,链接已经有下划线,不需要额外的标记。

删除线 - <strike> </strike>

strike标记在文本的正中间画一条线,通常用来表示文本是旧的,不再相关,删除。也可以用<s></s>代替。

预格式化文本 - <pre> </pre>

pre标记之间的任何文本,包括空格、回车符和标点符号,都将像在文本编辑器中一样显示在浏览器中(通常浏览器会忽略多个空格)

源代码 - <code> </code>

code标记之间的文本以固定宽度字体显示,通常在显示源代码时使用。

打字机文本 - <tt> </tt>

tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。

Block Quote - <blockquote> </blockquote>

blockquote标记定义一个块引用,并且在块的左右添加额外的边距。

小号字 - <small> </small>

small标记让你无需设置字体大小,就可以使文本呈现比周围稍小的外观。

字体颜色 - <font color="#??????"> </font>

font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。

字体大小 - <font size="?"> </font>

font标记的size属性改变字体的大小,值范围从1到7,1是最小,7是最大。

字体大小变化 - <font size="+/-?"> </font>

font标记的size属性还可以相对于其前面的字体大小的作即时更改,此用法将按你指定的数字增减字体大小。例如:<font size="-1">一些文本</font>

字体 - <font face="?"> </font>

font标记的face属性以指定的字体显示文本,值为字体名称,如“Helvetica”、“Arial”或“Courier”。

居中 - <center> </center>

center标记之间的所有内容都居中。

强调 - <em> </em>

em标记用于强调文本,文本通常以斜体显示,可能会根据浏览器的不同而有所不同。

着重强调 - <strong> </strong>

strong标记用于着重强调文本,通常以粗体显示,可能会根据浏览器的不同而有所不同。

例子

下面是以上标记的示例:

浏览器显示内容如下所示: