OnITRoad - 常见问题

如何仅在左侧和右侧设置框阴影

如何仅在左侧和右侧设置框阴影 CSS 解决方案 如果我们只想在元素的左侧和右侧添加 box-shadow,我们建议我们考虑我们的代码片段中提供的一些方法。 或者许,最好的方法是使用带有“inset”值的 CSS box-shadow 属性。 另外,使用 :before 和 :after 伪元素,它们绝对位于元素的左右两侧。 使用 :before 和 :after 伪元素在左侧和右侧添加框阴影的

Views:0  2020-06-02

使用css如何在数字周围添加圆圈

使用css如何在数字周围添加圆圈 使用 CSS 可以轻松地在数字周围添加一个圆圈。 这可以使用 border-radius 属性来完成。 在此代码中,我们还可以找到一种在具有一到四位数字的数字周围添加圆圈的方法。 现在,我们将逐步展示该过程。 创建 HTML 在 <body> 中创建一个类名为“circle”的 <div>。 在 <div> 中放置一个数字

Views:0  2020-06-02

如何使用 CSS Flexbox 添加固定宽度的列

如何使用 CSS Flexbox 添加固定宽度的列 使用 Flexbox 的解决方案 如果你想用 Flexbox 有一个固定宽度的列,你需要使用 CSS flex 或者 flex-basis 属性。 首先,我们将 <div> 容器的显示设置为“flex”。 然后,我们将“灰色”类的 flex 指定为“0 0 50px”。 其中第一个值指定 flex-grow,第二个值定义 flex

Views:0  2020-06-02

如何在图像周围添加框架

如何在图像周围添加框架 在构建网页时,有些情况下我们希望在不使用 Photoshop 或者任何其他编辑器的情况下向图像添加框架。 CSS 可以解决这个问题,将我们喜欢的宽度和样式的彩色框架添加到图像中。 我们可以使用 CSS 边框、填充和背景属性围绕图像制作一个简单的框架。 创建 HTML 创建一个类名为“frame”的 <div> 元素。 在 <div> 元素中定义

Views:0  2020-06-02

如何使用 CSS 在元素前添加换行符

如何使用 CSS 在元素前添加换行符 在本教程中,我们将展示一些在元素前添加换行符的方法。 这可以通过几个步骤轻松完成。 我们需要使用 CSS white-space 属性来指定必须如何处理元素内的空间。 特别是,我们将使用此属性的“pre”值。 从创建 HTML 开始。 创建 HTML 使用一个 <h1> 元素和三个 <p> 元素。 <h1>onitr

Views:0  2020-06-02

如何在 HTML5 <canvas> 元素上添加文本

如何在 HTML5 <canvas> 元素上添加文本 用 Javascript 解决 要将文本添加到 HTML <canvas> 元素,我们需要使用 fillText() 或者 strokeText() 方法,或者我们可以使用两者的组合。 我们还可以为文本添加颜色、定义字体和大小,甚至添加渐变。 在下面的示例中,我们为 <canvas> 元素提供了一个唯一的

Views:0  2020-06-02

如何使用 CSS 添加背景图像

如何使用 CSS 添加背景图像 让我们演示如何使用 CSS 样式在 HTML 文档中添加和定位背景图像。 如何定位背景图像。 background-image:为元素定义一张或者多张背景图片。 background-repeat:指定背景图像是否/如何重复。 background-attachment:定义背景图像是随着页面的其余部分滚动还是固定的。 background-position:

Views:0  2020-06-02

如何在 CSS 中为图像添加边框

如何在 CSS 中为图像添加边框 带有边框或者框架的图像使图像看起来更有影响力,并且与页面上的其他内容不同。 在这个片段中,我们将展示如何为图像添加边框。 <img> 元素具有 HTML5 中未使用的边框属性。 因此,我们建议改用 CSS 边框属性。 创建 HTML 在 <body> 部分,创建一个 <img> 元素并放置应该使用的图像的链接。 使用 al

Views:0  2020-06-02

如何将背景图像和 CSS3 渐变添加到同一元素

如何将背景图像和 CSS3 渐变添加到同一元素 CSS 渐变用于样式元素。 它们显示两种或者多种已定义颜色之间的平滑过渡。 但是你有没有试过在同一个元素上结合 CSS3 渐变和背景图像? 如果不是,那么这个片段适合你。 具有 CSS 属性的解决方案 我们可以通过使用多个背景在同一元素上组合背景图像和 CSS3 渐变。 在下面的示例中,我们设置 <div> 的高度和宽度并添加背景。

Views:0  2020-06-02

如何使用 CSS 为 Bootstrap 图标添加颜色

如何使用 CSS 为 Bootstrap 图标添加颜色 使用图标对每个都非常有用,因为它们提供了简单的视觉信息。 但是如果你想改变 Bootstrap 图标的标准颜色怎么办? 幸运的是,CSS 允许我们为它们设置样式。 因此,这可以通过 CSS 颜色属性来完成。 我们还可以更改字体大小。 在此代码中,我们将逐步演示如何执行此操作。 从创建 HTML 开始。 创建 HTML 标题使用 <

Views:0  2020-06-02

如何使用 CSS content 属性添加 HTML 实体

如何使用 CSS content 属性添加 HTML 实体 有些字符或者是为 HTML 保留的,或者是不存在于标准键盘上的。 但是 HTML 提供了实体名称或者实体编号以使用此类符号。 让我们看看如何使用 CSS content 属性添加 HTML 实体。 创建 HTML 使用 <body> 标签并在 <h1> 中添加一些内容。 <!DOCTYPE html&

Views:0  2020-06-02

如何为有序列表的第二行添加缩进

如何为有序列表的第二行添加缩进 具有 CSS 属性的解决方案 我们可以使用浏览器的表格布局算法,而无需使用如下表格。 在下面的示例中,我们将 <ol> 元素的显示设置为“table”并添加了 counter-reset 属性。 然后,我们将 <li> 元素的显示设置为“table-row”,并使用 list-style 和 counter-increment 属性。 最

Views:0  2020-06-02

如何在标题文本前后添加行

如何在标题文本前后添加行 我们想让页面的标题具有原创性和吸引力的风格,但我们不知道如何做? 阅读此代码,我们将学会在标题前后添加行。 我们可以通过使用 ::before 和 ::after 伪元素来获得这样的效果。 让我们一起一步一步来。 创建 HTML 将标题文本放在 <h1> 元素中。 <h1>Welcome!</h1> 添加 CSS 将标题

Views:0  2020-06-02

如何向添加非标准字体

如何向添加非标准字体 为了使设计具有吸引力,我们可以使用一些独特的字体。 在本教程中,我们将介绍添加自定义字体的最常用方法。 CSS @font-face 规则是一种向添加自定义字体的通用方法。 让我们看看如何做到这一点。 创建 HTML 使用 <h1> 标签。 将内容放在 <div> 标签内。 <!DOCTYPE html> <html>

Views:0  2020-06-02

如何调整列表样式图像的位置

如何调整列表样式图像的位置 CSS 允许我们将图像用作项目符号,但对外观和位置几乎没有控制。 HTML 项目符号可以通过使用 CSS list-style-image 属性替换为图像。 但是使用这个属性的问题在于,我们也几乎无法控制它们与列表项的外观。 在我们的代码片段中,我们将展示如何正确使用填充来克服这种困难,并将填充不仅应用于列表项,还应用于图像。 我们需要结合使用背景和填充属性。 让我们看

Views:0  2020-06-02

如何跨浏览器一致地对齐复选框及其标签

如何跨浏览器一致地对齐复选框及其标签 复选框是每个上使用的 HTML 表单之一。 如何对齐复选框及其标签? 这是开发人员经常问的问题。 这里的问题是,当使用 vertical-align 属性的“基线”值在 Safari 中正确对齐它们时,它们可以工作,但它们在 Firefox 中不起作用,开发人员通常会浪费很多时间来解决这个问题。 如果我们有这样的困难,我们将逐步展示如何去做。 创建 HTM

Views:0  2020-06-02