CSS 列表 - 第 1 页

使用 CSS 控制列表中的编号和项目符号

使用 CSS 控制列表中的编号和项目符号 默认情况下,HTML 列表 <ol> 和 <ul> 将在每个列表项前面使用数字或者项目符号进行样式化;要更改默认样式,我们可以使用 CSS list-style-type 属性。 将 list-style-type 显式设置为 none 将删除默认样式: ol, ul { list-style-type:none; } lis

Views:0  2020-06-02

如何在 CSS 中创建具有延迟的动画

如何在 CSS 中创建具有延迟的动画 为了延迟动画,我们使用 CSS animation-delay 属性,它指定元素被加载和动画开始之间的时间。 但是在延迟动画时可能会遇到一些困难,例如动画播放后元素消失的问题。 让我们看看这个问题的解决方案。 具有 CSS 属性的解决方案 在下面的例子中,有一个 <div> 元素,它的类是“animation”。 首先,我们添加@keyfram

Views:0  2020-06-02

如何使用 CSS 创建动画填充文本

如何使用 CSS 创建动画填充文本 你有没有用动画阴影或者渐变创建文本? 如果没有,这个片段是给你的。 它将创建此类文本并使更具创意。 创建此类文本的最简单方法是使用 CSS background-clip 属性,该属性指定 background-color 和 background-image 应该离元素多远。 让我们一起尝试创建一个。 创建 HTML <link rel="st

Views:0  2020-06-02

如何使用 CSS 创建动画填充文本

如何使用 CSS 创建动画填充文本 你有没有用动画阴影或者渐变创建文本? 如果没有,这个片段是给你的。 它将创建此类文本并使更具创意。 创建此类文本的最简单方法是使用 CSS background-clip 属性,该属性指定 background-color 和 background-image 应该离元素多远。 让我们一起尝试创建一个。 创建 HTML 设置 <div> 标签并

Views:0  2020-06-02

如何使用 CSS 创建立体文字效果

如何使用 CSS 创建立体文字效果 立体 是 3D 效果,它包含两个不同过滤的彩色图像,每只眼睛一个,通过 3D 眼镜完全可见。 但是,即使不戴眼镜,这些效果看起来也很酷且富有创意,我们可以使用它来使更具吸引力。 让我们一起尝试创建一个。 创建 HTML 首先,我们需要将文本放在 HTML <h1> 标签中。 <h1>Welcome</h1> 添加

Views:0  2020-06-02

如何使用 CSS 跨浏览器添加垂直文本

如何使用 CSS 跨浏览器添加垂直文本 如果我们遇到创建垂直文本的问题,我们可以使用 transform 属性,它允许更改元素转换的位置。 使用 transform 属性,我们可以将元素逆时针旋转 90 度。 我们还需要使用供应商扩展。 让我们从创建 HTML 开始。 创建 HTML 在 <body> 元素中放置一个类名为“rotate”的 <div>。 在 <

Views:0  2020-06-02

如何使用纯 CSS 创建打字机文本

如何使用纯 CSS 创建打字机文本 我们会同意,看起来像是在屏幕上输入的文本看起来很有吸引力。 我们是否知道可以使用纯 CSS 将打字机效果应用于文本? 现在我们要一起做,一步一步! 创建 HTML 使用具有类名称“打字机”的 <div> 元素。 在 <div> 中添加标题 (<h1>)。 <div class="typewriter&q

Views:0  2020-06-02

如何在不使用 JavaScript 的情况下创建 CSS 画廊

如何在不使用 JavaScript 的情况下创建 CSS 画廊 事实证明,可以在不使用 Javascript 的情况下创建纯 CSS 画廊。 在本文中,我们将展示如何仅使用 HTML 和 CSS 来做到这一点。 创建 HTML 众所周知,一个画廊由 2 个图片块组成。 第一个包含小图像(缩略图),另一个包含大图片。 如果你想创建一个简单的画廊,你必须定义唯一的锚点(图片1、图片2、图片3、图片

Views:0  2020-06-02

如何创建闪亮的文字动画效果

如何创建闪亮的文字动画效果 使用文本效果总是一个好主意,因为它们使对访问者有吸引力和有趣。 如果我们想为文本学习一种新效果,请阅读我们的代码片段并创建闪亮的文本动画效果。 现在,让我们一起潜入并创建一个。 创建 HTML 将文本放在 <p> 标签中,该标签定义了一段文本。 <p>像钻石一样闪耀。</p> 添加 CSS 将 <body>

Views:0  2020-06-02

如何使用网格创建响应式布局

如何使用网格创建响应式布局 定制网页设计最好的东西之一是定制的响应式网格系统。 一切都是自定义的,包括列数、列大小、装订线等。 网格可以响应固定大小的网格项目将根据视口大小移动位置。 在本教程中,我们将展示如何按照下面描述的步骤创建响应式网格布局。 "auto-fill" 和 "auto-fit" 值允许创建一个网格,其中包含适合容器的特定大小的尽可能多的轨

Views:0  2020-06-02

如何使用 CSS 创建响应式 iframe

如何使用 CSS 创建响应式 iframe 创建 iframe HTML <iframe> 标签创建一个内嵌框架,用于嵌入第三方内容(媒体、小程序等)。 在此代码中,我们可以学习如何使用 CSS 创建响应式 iframe。 首先,让我们看看一个简单的 iframe 是什么样子,然后,我们将展示如何使它具有响应性。 创建一个简单的 <iframe> 标签的例子: <

Views:0  2020-06-02

如何仅使用 HTML 和 CSS 为 HTML5 <select> 框创建占位符?

如何仅使用 HTML 和 CSS 为 HTML5 <select> 框创建占位符? 样式化 HTML 表单字段,主要是 <select> 字段与 CSS 一直有点复杂。 以特定方式更改 <select> 表单字段通常是无法管理的。 为此,许多正在用由 HTML 和 CSS 提供支持的定制解决方案替换 <select> 元素。 使用 HTML5 为

Views:0  2020-06-02

如何创建视差滚动效果

如何创建视差滚动效果 创建需要令人兴奋的设计来吸引访问者并增加用户参与度。 流行的效果之一是视差效果。 在创建视差效果之前,让我们看看它是什么以及它来自其中。 视差效果使背景和前景内容在滚动时以不同的速度移动。 视差设计总是能引起用户的注意。 “视差”一词最初来自视觉 2D 效果横向卷轴视频游戏,它使用不同的背景图像移动速度在游戏过程中创造深度错觉。 它可以用于任何的任何页面或者帖子。 大多数情况

Views:0  2020-06-02

如何使用 HTML 和 CSS 创建多色文本

如何使用 HTML 和 CSS 创建多色文本 多色文本可以使对访问者更具吸引力和趣味性。 此代码将了解如何为创建此类文本。 有 3 种方法可以创建多色文本。 让我们一起潜入并尝试一下。 使用图像编辑器 我们可以借助 Pixelmator、Photoshop 等图像编辑器创建多色文本。 因此,我们可以创建多色图像并将其嵌入到中。 使用此方法将无法搜索多色文本。 因此,代码将如下所示: <i

Views:0  2020-06-02

如何创建发光文本

如何创建发光文本 发光的文字会立即引起用户的注意。 他们可以轻松地使某人心情愉快。 我们可以选择柔和的颜色和柔和的发光元素,这会给用户带来轻松的感觉。 今天的教程将向我们展示如何仅使用 HTML 和 CSS 创建发光文本。 按照步骤操作并查看发光文本示例。 创建 HTML 创建一个带有“glow”类的 <h1> 标签。 在标签中写一段文字。 <h1 class="

Views:0  2020-06-02

如何在input字段周围创建发光边框

如何在input字段周围创建发光边框 具有 CSS 属性的解决方案 在本教程中,我们将找到一些在具有 CSS 属性的输入字段周围创建发光边框的方法。 在下面的示例中,我们将 :focus 伪类添加到 <input> 元素,然后指定 border-color 和 box-shadow 属性。 此外,我们将轮廓属性设置为“无”。 在输入字段周围创建发光边框的示例: <!DOCTY

Views:0  2020-06-02