第一百零一次闯荡江湖的无名游侠 - HTML&CSS
type: channel
link: http://diyibailingyici.chuangdangjianghudewumingyouxia.cn/tag/HTML-CSS/
items: input输入框阻止浏览器默认填充的解决方案总结
items: css hover失效怎么办
items: CSS小特效：文字闪烁——【钢铁侠：爱你三千遍】
items: CSS元素超出部分滚动，并隐藏滚动条
items: CSS设置内容超出宽度时，可以横向滚动，并且隐藏滚动条
items: CSS修改网站滚动条样式
items: 禁止 input 输入框显示历史记录
items: 解决layui弹窗下的下拉选择框被遮挡或显示不全问题
items: 如何让iframe铺满整个屏幕
items: 先占一个位置，慢慢来更新

input输入框阻止浏览器默认填充的解决方案总结
type: item
date: 2024-07-26T16:39:00+08:00
description: 禁止 input 自动填充在编写 Form 表单样式的时候，修改自动填充后的 input 样式是很麻烦甚至不可行的，而且还有一些不需要自动填充的场景。浏览器根据保存数据时表单控件的 type 和 name 去匹配。常用的就是 type 为 password，name 为 emal、username、password、telephone 等，甚至不设置 name。浏览器会在表单加载时候匹配到之前保存的表单空间，然后将保存在客户端的信息自动填充它，额外的数据可能会填充到相邻的表单控件中。可以通过设置 autocomplete 为 off 关闭自动填充功能。input 的 autocomplete 表示这个控件的值是否可被浏览器自动填充，设置为 off 表示用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。。但是，当表单控件获取焦点时，浏览器仍会显示自动填充提示（选项框）。而且实际情况下 type 为 password 的表单控件即便设置了 autocomplete="off" 也不能有效禁止自动填充（大部分下不起作用）。幸运的是将 autocomplete 设置为 new-password 可以成功禁止，它表示新密码（如创建帐号或更改密码时使用）。方案总结要想禁止表单控件的自动填充功能，可以给这个 input 添加 autocomplete="new-password" 的属性，一个表单中如果存在多个 type="password" 只需给其中一个（无论哪一个）设置这个属性即可全部禁止。设置 new-password 也可以禁止浏览器弹出自动填充提示，包括 type="password" 以外的控件。来源：https://blog.csdn.net/Andrew_Chenwq/article/details/127237282问题描述：通常在前端开发的过程中，使用表单中加入输入框来实现登录注册是十分常见的，一些浏览器就会默认填充我们曾经使用过的账号密码，这个处理方式对于登录的时候是非常方便，但是对于注册页面，显然自动填充就非常鸡肋。博主在解决这个自动填充问题的时候用了以下几种方法，都没有很完全的得到解决（不同浏览器兼容性问题），本人使用的是谷歌浏览器在form表单中或者input标签里面添加auto-complete="off"（没有解决） 在input 里面加上 autocomplete=“new-password” 属性（没有解决） 直接上代码（没有解决）$(function(){ $('#setaccount input').attr("readonly","readonly");//让from表单下所有的input输入框都是只读状态(#setaccount是方法2里面from表单的id) $('#setaccount input').click(function(){//当某个被input框点击的时候,就删掉被点击的这个input框的只读属性readonly $(this).removeAttr("readonly"); }); });！ 然后博主发现了一种终极解决方法，分享给遇到同样问题的各位✅使用readonly属性和foucs方法联合搭配，当浏览器打开页面的时候，将输入框设为只读，当鼠标聚焦到输入框的时候再给它放开。tips：readonly 属性规定输入字段为只读 readonlyInput: true, cancelReadOnly () { this.readonlyInput = false; },希望这种方法能够帮助到各位！💖来源：https://blog.csdn.net/qq_44833124/article/details/129119756

css hover失效怎么办
type: item
date: 2024-07-24T16:52:00+08:00
description: 1、网上百度的原因一般有如下几种，第一种是：选择器、：、hover之间有空格，或者冒号是中文符号；第二种是：没有注意active，visited，hover，link之间的生效顺序的关系，active < hover < visitied / link其意思就是active需定义在hover之后才能起作用，而hover需定义在visited和link之后才会起作用。当然，前提是它们同时存在的时候。第三种是：hover只会与子代元素元素及兄弟元素起作用。ps：hover作用于兄弟元素时，仅仅只是对相邻的兄弟元素有用，且要写为a:hover +.b{}第四种是：低级错误。我自己写的时候，发现hover不生效，但是绝对不满足上边提到的前3中状况。最后发现，因为hover的元素存在行内式样式，所以导致了hover没有效果

CSS小特效：文字闪烁——【钢铁侠：爱你三千遍】
type: item
date: 2024-03-12T17:16:00+08:00
description: 效果图HTML篇 I l o v e y o u 3 0 0 0 这里将每个字母分别用盒子包住是为了后面设置动画延迟，保证文字闪烁呈现流水型还记得span是行内元素吧，它们可以在同一行排列，不过div不能，所以我们还需要用display转换div的元素显示模式为inline-block这里可能小伙伴会有疑问为什么还要用div将每个单词保住，这里是因为后面用flex布局，让单词之间自动设置间隙，整体更加好看CSS篇盒子模型设置 body{ background-color: black; } .main{ padding-top: 249px; margin: 0 auto; width: 1200px; display: flex; justify-content: space-around; font-family: 'Courier New', Courier, monospace; } .main div{ display: inline-block; color: transparent; } span{ font-size: 120px; animation: twinkle 4.6s linear infinite; }这里用到flex布局的justify-content属性，display为flex的父元素的子元素称为项目，而space-around属性值，则使项目之间根据父元素宽度平均分布间隔，（两端与项目之间也会分配间隔，为项目与项目之间间隔的一半，这个在案例中不重要）这里对span标签选择，设置动画，animation属性可以连写：第一个值twinkle为动画名字第二个为duration,动画播放时长第三个值为timing-function,时间过渡曲线，linear为线性过渡，动画播放无倍数变换第四个值为播放次数，infinity为无限循环将文字颜色设置为透明，当然也可以用opacity动画设置 .main div:nth-child(1) span:nth-child(1){ animation-delay: 0s; } .main div:nth-child(2) span:nth-child(1){ animation-delay: 0.4s; } .main div:nth-child(2) span:nth-child(2){ animation-delay: 0.8s; } .main div:nth-child(2) span:nth-child(3){ animation-delay: 1.2s; } .main div:nth-child(2) span:nth-child(4){ animation-delay: 1.6s; } .main div:nth-child(3) span:nth-child(1){ animation-delay: 2.0s; } .main div:nth-child(3) span:nth-child(2){ animation-delay: 2.4s; } .main div:nth-child(3) span:nth-child(3){ animation-delay: 2.8s; } .main div:nth-child(4) span:nth-child(1){ animation-delay: 3.2s; } .main div:nth-child(4) span:nth-child(2){ animation-delay: 3.6s; } .main div:nth-child(4) span:nth-child(3){ animation-delay: 4s; } .main div:nth-child(4) span:nth-child(4){ animation-delay: 4.4s; } @keyframes twinkle{ 0%{ color: transparent; } 100%{ color: aliceblue; text-shadow: 0 0 4px skyblue, 0 0 10px skyblue, 0 0 20px skyblue, 0 0 30px skyblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue, 0 0 70px skyblue, 0 0 80px skyblue, 0 0 90px skyblue, 0 0 100px skyblue, 0 0 110px skyblue, 0 0 120px skyblue, 0 0 130px skyblue; /* 文字阴影叠加 */ } } 给每个span盒子设置各自的动画延迟时间，实…

CSS元素超出部分滚动，并隐藏滚动条
type: item
date: 2023-10-08T11:06:48+08:00
description: 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE 超出部分隐藏滚动条 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式 超出部分滚动条 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好 你好

CSS设置内容超出宽度时，可以横向滚动，并且隐藏滚动条
type: item
date: 2023-10-08T11:05:44+08:00
description: 1.当一个块级元素的内容在水平方向发生溢出时，overflow-x决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。2.-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果。合法值：auto | touchauto：使用普通滚动，当手指从触摸屏上移开，滚动会立即停止touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。例子：/* 超出部分滚动 */ /* 设置父元素 */ ul { overflow-x: auto; display: -webkit-box; -webkit-overflow-scrolling: touch; margin: 0.5rem 0.5rem } /* 隐藏滚动条 */ ul::-webkit-scrollbar { display: none; }

CSS修改网站滚动条样式
type: item
date: 2023-10-08T11:05:11+08:00
description: /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 9px; height: 9px } /*定义滚动条轨道*/ ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { background-color: #0093ff; background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em }

禁止 input 输入框显示历史记录
type: item
date: 2023-09-20T10:12:20+08:00
description: 问题概述在 HTML 开发中会 input 标签是非常常用的， 当在 input 标签 输入数据后，再点击输入框会显示原来输入过的内容，还会出现下拉的历史记录。让使用人员感觉比较恶心。解决方案（隐藏记录框）隐藏记录框autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。on 默认，规定启用自动完成功能；off 规定禁用自动完成功能； 到

解决layui弹窗下的下拉选择框被遮挡或显示不全问题
type: item
date: 2023-09-19T19:07:00+08:00
description: 解决layui弹窗弹出层下的下拉选择框被遮挡或显示不全问题 body .layui-layer-content { overflow: visible!important; }/*解决弹出层被遮盖*/ .layui-layer-page .layui-layer-content { position: relative; overflow: unset !important; }

如何让iframe铺满整个屏幕
type: item
date: 2023-03-17T13:41:41+08:00
description: iframe 您的浏览器不支持 iframe 标签。 请直接访问：https://diyibailingyici.chuangdangjianghudewumingyouxia.cn/

先占一个位置，慢慢来更新
type: item
date: 2023-02-13T23:23:00+08:00
description: ٩(ˊᗜˋ*)و