default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-html-page1

styleTags:  All CSS html javascript php/other IT
subject 了解onenav

https://blog.xiaoz.org/archives/16772

by: 119hjx  visibility 1015
2023-09-21 07:11 (UTC)

Demo subject 无法明确指定大图的宽度width和height时,如何避免累计布局位移CLS?

累计布局偏移: Cumulative Layout Shift, 简称CLS,是一项web性能的重要指标,旨在避免页面渲染时,某些元素(比如图片、字体等)加载前后占位不同导致页面呈现的内容发生突然变化,降低用户使用感受。比如图片未加载前,原来是某个链接的位置,突然被加载后的图片取代,页面发生了“跳动”,用户点下去的时候就不一定是用户想要的去处。

但是,某些情况下,我们又无法直接明确指定图片的宽度和高度,比如为了自适应不同的屏幕大小,我们需要图片按屏幕宽度的百分比来呈现,这时候,就无法简单地直接明示图片的宽/高。一旦不指定图片的宽/高,那么我们就容易遇到CLS问题,因为浏览器在读取图片并加载前,不知道该预留多大位置给图片。

那么我们如何避免这个两难的局面呢?

一种比较简单的做法是给图片加上一个包围元素,指定这个包围元素的宽高比,比如宽度80%,高度40%(根据图片的宽高比计算得出),与图片的实际宽高比一致。然后把图片放入其中,指定图片宽度100%。这样,浏览器就会预留相应的并且正确的图片位置,从而避免CLS问题。

下面我们以一张大图(1920*1080,16:9)为例,演示如何具体实现。(点击页面红色“演示”按钮查看效果)

by: fanshome  visibility 1040
2023-07-26 09:32 (UTC)

subject 关于网页上的复选框checkbox的checked和value的问题

这个问题相信很多像我一样的非专业开发者遇到过,就是感觉checkbox是一个神奇的存在,为什么这么说?就是在开发网页过程中,有时候使用checkbox一切顺利,提交表单的时候用JavaScript检查它的checked或value的状态或取值都一切正常;但是又有些时候,无论在JavaScript中怎么折腾,感觉这个checkbox一点儿不听话,明明已经选中了,checked的状态始终不变,真是头疼。

当然,上网学习过,MDN的标准答案是:

如果一个复选框在其表单被提交时没有被选中,就不会有任何代表其未被选中的状态(例如 value=unchecked)的值被提交给服务器——该值根本就没有被提交给服务器!如果你想在复选框未被选中时提交一个默认值,你可以在表单中加入一个具有相同的 name 和 value 的 <input type="hidden"> 字段,它可以由 JavaScript 生成。

checked:
一个布尔属性,表示该复选框是否被默认选中(当页面加载时)。它不表示这个复选框当前是否被选中:如果复选框的状态被改变,这个内容属性不反映这个变化。此时,只有 HTMLInputElement 的 IDL 属性 checked 会更新。

怎么样?是不是好像弄懂了一点东西,但是好像又不是特别明白的样子。假如一个复选框的状态被改变,checked属性不反映这个变化!这时什么意思?如果不变化,那么为什么有些页面它表现又那么正常呢?

经过认真学习思考,我终于得到了我自己的结论,可以翻译成大白话,是个程序员都能明白:

就是复选框在form表单中提交的时候,它会很正常!!!划重点,在“表单中提交时”,一个字也不能少!!!其实MDN的解释里有说,只是没有太过强调罢了。再翻译一下,先假设有这么个场景:

如果为了方便用户,比如在用户设置某些选项时,希望把复选框当成一个开关来用,选中表示“开”,不选中表示“关”,直接根据复选框状态后台就更新数据库里的状态,而不需要用户有提交表单的动作。假如你此时 没.有. 在页面中制作一个表单,只是 单.独. 一个复选框,然后希望用JavaScript来处理后续,那么你就惨了,你会发现无论你怎么折腾,貌似都不能得到当前复选框的“checked”状态,挠头吧?!

其实,这是对的,因为复选框本来就是这个德行,没有表单的提交动作,checked状态是不会跟着用户的鼠标点击勾选而变化的,你只是在页面上看到了框里多了一个勾或变成了一个空的框框,就只是“看到”而已。

那么,假如想在页面上实现前述功能,想让复选框像个开关一样直接起作用的话怎么做?

答案也很简单,如果不想麻烦而使用表单来实现,就扔掉checkbox,换言之就可以只是把checkbox当一个摆设,只是给用户的眼睛看状态,就好了呀!真正用JavaScript处理的东西可以是和checkbox一点关系都没有的,比如我们可以在JS里设一个变量来记录,或者给页面上某个dom元素添加一个属性来记录我们需要的状态,比如:<div id='switch' status='0'></div>,用户点一下checkbox,我们就把“status”值在“0“和”1“之间做个变化,不要去读checked是true or false,直接读写switch元素的status属性值就好。

好吧,也许我的理解并不完全正确,但是以我目前的三脚猫水平而言,事实好像就是如此。

by: fanshome  visibility 1625
2023-06-03 16:45 (UTC)

Demo subject 使用CSS让大背景图片适应不同大小屏幕又一例

这个示例网页使用了一个较大的背景图片,并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于或等于768像素的屏幕上,字体大小和位置也会进行相应的调整。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

by: fanshome  visibility 1332
2023-06-03 06:06 (UTC)

Demo subject 一个使用CSS/HTML将图像自适应屏幕的示例

在这个示例中,我们将图像的最大宽度设置为100%,并将高度设置为自动。此外,我们还添加了一个样式,以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能适当地缩放,不会失真或拉伸。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

by: fanshome  visibility 1172
2023-06-03 06:06 (UTC)

Demo subject CSS3+SVG实现的带音效、会抖动的小铃铛图标特效

非常真实的抖动效果,鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 1818
2023-05-25 08:52 (UTC)

Demo subject CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式

使用css: linear-gradient来实现线性颜色渐变背景,效果见下图:
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 1184
2023-05-20 13:50 (UTC)

Demo subject HTML5时代,使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法

在很久很久以前,没有智能手机的时代,写网站只要考虑PC显示屏幕,基本上任何页面元素都只要固定的宽度和高度,比较好处理。

为了提高页面的加载速度,讲究点的方法是:
假如某个页面有多个小图片(比如二十个小图标)需要显示,可以把这二十个小图片合并到一张大图,然后通过背景图片切片的方法(background-position:)来显示不同的小图片,从而极大地提高页面加载速度。

当今时代,适配大大小小各类屏幕成了某种必需,最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多,但是,尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候,我们需要为同一类型、同样大小的链接配上不同的图片,此时,假如能够只使用一张图片来解决问题就更好了。例如,某些场合要用户选择不同的浏览器来进行下一步,假设用到以下这一张图片中的5种浏览器:

[img]

需求是:图片能自动适配不同屏幕宽度,使用背景图片方式来分割出5个链接,缩放窗口大小时,图片自动跟着缩放,同时宽高比不变,即保持图片不变形;与此同时,对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢?请看以下CSS代码,任何用到宽度、高度的地方都使用百分比,保证缩放比例不变形。

by: fanshome  visibility 1269
2023-06-03 06:09 (UTC)

Demo subject css实现图标或图片等元素镜像翻转(水平镜像、垂直镜像)

有时候会发现现成的图标很美观,但是和一般习惯不同(或者纯粹不符合个人喜好),比如“分享”图标,一般是一个箭头,但是箭头方向感觉和习惯的相反,这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦,不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果,请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 2125
2023-05-25 17:06 (UTC)