JackieDYH的博客_HTML

html中使用marquee实现循环滚动效果

在HTML中，可以使用marquee标签来实现循环滚动效果。以下是实现循环滚动效果的示例代码：<marquee directinotallow="left" scrollamount="5">这是需要滚动显示的内容</marquee>其中，direction属性表示滚动的方向，可以设置为left、right、up和down；scrollamount属性表示滚动速度，数值越大

滚动效果

HTML

属性设置

原创 2023-09-05 08:44:38 2096 阅读

web中实现前端页面更新提示用户刷新页面

在前端页面更新时，可以通过以下两种方式提示用户刷新页面：使用 location.reload() 方法强制页面刷新在前端页面更新后，可以使用以下代码强制页面重新加载，代码如下：location.reload(true);这会使浏览器重新加载当前页面，同时也会在页面顶部显示一个提示框，提示用户页面已经刷新。使用 JavaScript 或者 CSS 实现自定义提示框可以使用 JavaScript 或者

提示框

刷新页面

自定义

原创 2023-07-24 09:44:32 1435 阅读

flex布局使用技巧和常用熟悉说明

Flex布局（flexbox）是CSS3中新增的一种布局模式，它可以帮助我们更容易地实现页面布局，特别是在需要处理排列、对齐和分布空间等问题上非常有用。以下是一些Flex布局的常用技巧和说明：父容器设置display: flex，子元素即可成为flex item，而且默认为flex-direction: row。父容器设置flex-wrap: wrap可以实现flex item的自动换行，而且fl

自动换行

放大缩小

页面布局

原创 2023-07-17 09:46:25 109 阅读

七夕来袭，是时候展现专属于程序员的浪漫了- 跳动的心和摇晃的红酒杯

七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

html

前端

3d

css

h5

原创 2022-08-07 00:03:27 161 阅读

响应式布局-实现方式01

响应式布局的实现响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验

css

html

css3

响应式

原力计划

原创 2022-06-05 00:03:23 85 阅读 1点赞

html+css实现滚动背景图固定

实现页面滚动，背景图穿过的效果注意：内部图片地址，自己替换成自olor: #4d4d4d; background-color: #fff; } .cd-main-c.

html

前端

css3

.net

git

原创 2022-05-25 11:21:10 718 阅读

js获取get方式传递的参数变化-案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp

javascript

webview

开发语言

get

传参

原创 2022-03-14 16:20:16 176 阅读

CSS可视化工具-助力快速开发css片段

Neumorphism为 section 或 div 生成对应UI，它也可以自定义border-radius, box-shadow 等Shadows Brumm生成多个分层阴影CSS Clip-path MakerFancy Border Shape GeneratorCubic CurveCSS GradientCSS Wa

css

前端

原力计划

ico

自定义

原创 2021-11-08 11:11:14 374 阅读

CSS可视化工具-助力快速开发css片段

Neumorphism为 section 或 div 生成对应UI，它也可以自定义border-radius, box-shadow 等Shadows Brumm生成多个分层阴影CSS Clip-path MakerFancy

css

前端

原力计划

ico

自定义

原创 2021-11-08 11:11:14 176 阅读

CSS flex布局-解决最后一行元素对齐问题

justify-content对齐问题在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题.container { display: flex; justify-content: space-between;

css

html

flex

布局

原力计划

原创 2021-11-01 10:46:51 441 阅读

CSS flex布局-解决最后一行元素对齐问题

justify-content对齐问题在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { width: 24%; height

css

html

flex

布局

原力计划

原创 2021-11-01 10:46:51 2471 阅读

css常用干货 | 选择器 | 属性 | 盒子模型 - 知识点罗列

CSS的使用方式1. 内联样式：内联样式又称为行内样式，使用标签的style属性来设置，只能设置一个标签的样式。谨慎使用。2. 内部样式：写在head标签中的style标签内，只能设置当前页面的样式。酌情使用。3. 外部样式：单独的CSS文件，使用link标签的href属性引入。只要引入了该文件的页面都可以被设置样式。推荐使用。CSS选择器CSS常用属性字体样式属性CSS中的单位外观样式属性标签切

css

html

html5

选择器

css属性

原创 2021-10-18 10:21:28 87 阅读

css常用干货 | 选择器 | 属性 | 盒子模型 - 知识点罗列

CSS的使用方式1. 内联样式：内联样式又称为行内样式，使用标签的style属性来设置，只能设置一个标签的样式。谨慎使用。2. 内部样式：写在head标签中的

css

html

html5

选择器

css属性

原创 2021-10-18 10:21:28 212 阅读

css制作逐帧动画-案例

网页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。用CSS3制作动画图，你需要了解两个css属性。其一是 @keyframes因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。

帧动画

animation

keyframes

原力计划

chrome

原创 2021-10-04 12:45:00 1128 阅读

css制作逐帧动画-案例

网页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gi动画图，上图就是效果图。用CSS3制作动画图，你需要了解两个css属性。一：@keyframes因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在keyframes上加前缀，-webkit-, -ms- 或 -moz- 。keyfram

帧动画

animation

keyframes

原力计划

chrome

原创 2021-10-04 12:45:00 561 阅读

Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法

实现自动唤起键盘方式一this.$nextTick(() => { this.$refs.input.focus()})方式二setTimeOut(()=>{ this.$refs.input.focus()}, 500)键盘唤起延时时间不能过短，因为有页面重新渲染效果，延时时间过短会导致延时不在生效！最后，该方法在ios中不可用，因为ios为了保护安全，禁止自动获取输入框focus方法...

ios

输入框焦点

原力计划

搜索

渲染效果

原创 2021-09-27 17:14:22 1328 阅读

Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法

实现自动唤起键盘方式一this.$nextTick(() => { this.$refs.input.focus()})方式二setTimeOut(()=>{ this.$refs.input.focus()}, 500)键盘唤起延时时间不能过短，因为有页面重新渲染效果，延时时间过短会导致延时不在生效！最后，该方法在ios中不可用，因为ios为了保护安全，禁止自动获取输入框focus方法...

ios

输入框焦点

原力计划

搜索

渲染效果

原创 2021-09-27 17:14:22 458 阅读

canvas实现冠状病毒射击游戏

html5

javascript

html

原力计划

i++

原创 2021-09-21 15:12:06 142 阅读

canvas实现冠状病毒射击游戏

在线演示结构 <canvas id='canvas' width='1280' height='720'></canvas> 样式body { background:#111; margin:0; padding:0}canvas { background:#000; display:block; cursor:none}方法 "use strict"

html5

javascript

html

原力计划

i++

原创 2021-09-21 15:12:06 65 阅读

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例

transform:scale()可以实现按比例放大或者缩小功能。transition可以设置动画执行的时间，实现缓慢或者快速的执行动画<body> <div> <img src="https://img-blog.csdnimg.cn/2021031616343485.gif"> </div></body>div { width: 400px; height: 300px; margin: 0 aut.

css

html

html5

scale

图片放大效果

原创 2021-09-07 11:49:51 5466 阅读

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例

transform:scale()可以实现按比例放大或者缩小功能。transition可以设置动画执行的时间，实现缓慢或者快速的执行动画<body> <div> <img src="https://img-blog.csdnimg.cn/2021031616343485.gif"> </div></body>di

css

html

html5

scale

图片放大效果

原创 2021-09-07 11:49:51 981 阅读

CSS中文本对齐方式-文本处理案例

文本对齐方式CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单p{ text-align: center; text-align: left; text-align:

selection

多行文字溢出

文本排版方向

原力计划

css样式

原创 2021-08-16 14:22:19 1253 阅读

CSS中文本对齐方式-文本处理案例

文本对齐方式CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单p{ text-align: center; text-align: left; text-align: right;}但是两端对齐你有用过吗？

selection

多行文字溢出

文本排版方向

原力计划

css样式

原创 2021-08-16 14:22:19 85 阅读

CSS Snap 优化页面滚动提升用户体验-案例

CSS特性可以轻松创建一个可滚动的容器?CSS scroll snap可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。有时，我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在，多亏了CSSS scroll snap，我们可以简单做到这一点。为什么要使用 CSS Scroll Snap随着移动设备和平板设备的兴起

CSS Scroll Snap

CSS Snap

scroll滑动

scroll

原力计划

原创 2021-08-12 10:36:46 139 阅读

CSS Snap 优化页面滚动提升用户体验-案例

CSS特性可以轻松创建一个可滚动的容器?CSS scroll snap可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。有时，我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在，多亏了CSSS scroll snap，我们可以简单做到这一点。为什么要使用 CSS Scroll Snap随着移动设备和平板设备的兴起，我们需要设计和构建可以轻触的组件。以图库组件为例。用户可以轻松地向左或向右滑动以查看更多图像，而不是分层结构。根据CSS规范，为开发...

CSS Scroll Snap

CSS Snap

scroll滑动

scroll

原力计划

原创 2021-08-12 10:36:46 185 阅读

css实现盒子悬浮上拉展示详细内容-案例

效果图-在线体验样式代码.wrap_div1 { position: relative; width: 260px; height: 430px; overflow: hidden; border: 1px solid red;}.boxCSS { width: 100%;

css

transition

过渡效果

原力计划

原创 2021-08-11 16:32:02 188 阅读

css实现盒子悬浮上拉展示详细内容-案例

效果图-在线体验样式代码.wrap_div1 { position: relative; width: 260px; height: 430px; overflow: hidden; border: 1px solid red;}.boxCSS { width: 100%; height: 100%; text-align: center; border-radius: 10px; display: block; cursor: pointer.

css

transition

过渡效果

原力计划

css xml

原创 2021-08-11 16:32:02 345 阅读

css实现特殊的按钮形状-四个拐角空四边形

效果演示 <div class="box"> <div class="button"> 按钮 </div></div><div class="box1"> 哈哈 <span></span> <span></span> <span></span>

linear-gradient

background

css3

样式

原力计划

原创 2021-07-27 18:05:28 145 阅读

css实现特殊的按钮形状-四个拐角空四边形

效果演示<div class="box"> <div class="button"> 按钮 </div></div><div class="box1"> 哈哈 <span></span> <span></span> <span></span> <span></span></div><div c..

linear-gradient

background

css3

样式

原力计划

原创 2021-07-27 18:05:28 473 阅读

html页面布局上下左固定-中间内容滚动显示-案例

代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全屏</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; background:

html

css

caic

页面布局

原力计划

原创 2021-07-22 15:37:48 474 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客