![](https://img-blog.csdnimg.cn/20200118185357436.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS2/CSS3/LESS/SASS/SCSS/HTML
各种HTML样式表的代码片段分享
你挚爱的强哥
我以为,世上的程序语言确实没有高低之分,只有编程的人才有强弱之别,通过写代码我们可以发现和认识一个真正的自己,因为我们真正的对手,可能就是我们自己。
展开
-
【推荐】用scss循环zoom缩放比例,解决可视化大屏在不同分辨率屏幕下的适配问题
指定几种常规屏幕宽度(用这种方式就必须要强制用户全屏查看页面,在固定的宽度下才能达到比较不错的显示效果)从像素1024循环到2560宽度的情况(会导致很多冗余的css代码,但是基本上所有的宽度情况都囊括了)原创 2024-05-30 14:11:49 · 327 阅读 · 0 评论 -
用ResizeObserver对象监听div的尺寸(宽度高度)发生变化
但有第三方的polyfill方案,可以支持到 FF44+,IE9+,Edge 10+ ,Safari 11+ ,兼容方案是通过 MutationObserver API 实现的,通过监听 dom 的变化并加以判断,至此主流浏览器均可运行。响应式设计指的是根据屏幕视口尺寸的不同,对 Web 页面的布局、外观进行调整,以便更加有效地进行信息的展示。响应式设计如今也成为 web 应用的基本需求,而现在很多 web 应用都已经组件化,这意味着我们如果想要实现响应式的应用,那么我们也需要有某种方式监听。原创 2024-05-21 18:00:33 · 411 阅读 · 0 评论 -
用zoom解决可视化大屏在不同分辨率屏幕下的适配问题
console.log(`系统字体缩放比例为:${Math.round(dpi * 100)}%`);// 获取设备的物理像素比例。在以下几种比例下面网页显示的文字太大以至于无法正常观看,用上面的css代码即可解决此问题。获取win10系统字体放大百分比、倍数、比例、字号大小_你挚爱的强哥的博客-CSDN博客。_网页根据分辨率缩放。保障在不同的分辨率百分比情况下,网页缩放比例适合用户浏览_网页根据分辨率缩放-CSDN博客。尽管如此以上方式依旧是懒人做法,还是会出现水平或垂直滚动条,为了解决这个问题。原创 2024-05-21 10:57:07 · 382 阅读 · 0 评论 -
模仿YouTube订阅铃铛动画效果:如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?
【代码】如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?原创 2024-03-21 12:54:13 · 449 阅读 · 0 评论 -
CSS写渐变边框线条
【代码】CSS写渐变边框线条。原创 2024-02-04 14:16:38 · 513 阅读 · 0 评论 -
推荐两种原生JavaScript移除className的实用方式
方式1:document.querySelector(`.className`).classList.remove(`className`);//移除class类样式方式2:document.querySelector(`.className`).className.replace(`className`,``);原创 2024-01-04 21:02:47 · 591 阅读 · 0 评论 -
解决谷歌浏览器下CSS设置字体小于12px无效办法,关于如何在chrome里实现小于12px的文字。
谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,有时我们需要字体小点,特别是在制作英文网站时,所以很蛋疼。不过还是有解决方案的。当然文字缩小到12px以下本来就一定程度影响到可用性了,建议无视chrome的这个特性。在html或者body里添加一句谷歌浏览器专有的属性。关于如何在chrome里实现小于12px的文字。原创 2023-12-26 15:01:23 · 818 阅读 · 0 评论 -
HTML5原生视频播放器组件video的videocontrolslist属性详解
HTML5提供了内置的视频播放控件,其中videocontrolslist是其中一个很有用的属性。videocontrolslist属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍videocontrolslist的详细使用。原创 2023-11-27 10:36:55 · 1983 阅读 · 0 评论 -
屏蔽、去掉、修改谷歌浏览器input输入框背景透明色input:-internal-autofill-previewed和input:-internal-autofill-selected
【代码】屏蔽、去掉、修改谷歌浏览器input输入框背景透明色input:-internal-autofill-previewed和input:-internal-autofill-selected。原创 2023-10-27 15:10:32 · 378 阅读 · 0 评论 -
百度地图:设置复杂的自定义覆盖物,addOverlay添加自定义覆盖物ComplexCustomOverlay
地图JS API示例中心,以示例的形式介绍百度地图JS API如何使用,为开发者提供丰富的应用参考。地图JS API示例 | 百度地图开放平台。原创 2023-08-24 13:42:44 · 1340 阅读 · 0 评论 -
在不显示出文本的情况下,提前获取文本需要占用的显示高度,多用于预设某个区域占位显示内容(如:瀑布流)
【sgWaterfall】自定义组件:Vue实现图文瀑布流布局模式,图片预加载显示占位区域阴影,加载完成后向上浮动动画出现,支持不同浏览器尺寸宽度下自适应显示列数,文本内容高度自适应。_瀑布流图文_你挚爱的强哥的博客-CSDN博客。Vue实现图文瀑布流布局模式,图片预加载显示占位区域阴影,加载完成后向上浮动动画出现。原创 2023-08-15 16:03:10 · 119 阅读 · 0 评论 -
这篇文章算是讲清楚了 弹性布局(display:flex;)属性详解
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。。原创 2023-08-02 16:44:27 · 349 阅读 · 0 评论 -
一张表格讲明白white-space属性。html如何识别\n\r,让这些特殊换行符换行。
大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉,这的确大大的使得文本的排版更加美观了,也怎加了区域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢?无外乎把不该去掉的空格展示出来,把不该合并的换行让它换行起来。normal默认。空白会被浏览器忽略。连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充时是必要。也就是说不管是文本中是否有空白符和换行符都会被省略。并且遇到父容器需要换行填充的时候也会自动换行。原创 2023-07-31 12:29:50 · 1007 阅读 · 0 评论 -
CSS cursor鼠标样式大比拼,鼠标样式详细介绍
除了可以使用上表中介绍的光标样式外,您也可以使用图像文件来自定义光标的样式,如下所示:您可以使用 url() 定义多个光标的样式文件,每个 url() 之间使用逗号分隔,上面示例中 custom.gif、custom.cur 就是自定义的光标文件。需要注意的是,在自定义光标样式时,要在最后定义一个上表中的通用光标样式,防止使用 url() 中定义的光标图像资源失效。提示:.cur 格式是光标文件的标准格式,您可以使用一些在线工具(例如)将 .jpg、.gif 等格式的图像文件转换为 .cur 格式。原创 2023-07-12 09:58:18 · 625 阅读 · 0 评论 -
一行代码获取rgba颜色色值的透明度
我们写一个将十六进制颜色转换为rbga色值的方法。搭配一起使用就是,非常的灵活!原创 2023-07-01 22:11:32 · 278 阅读 · 0 评论 -
解决:chrome浏览器打印预览的时候出现顶部底部页眉页脚的问题
【代码】解决:chrome浏览器打印预览的时候出现顶部底部页眉页脚的问题。原创 2023-06-12 20:12:08 · 797 阅读 · 1 评论 -
保障在不同的分辨率百分比情况下,网页缩放比例适合用户浏览
console.log(`系统字体缩放比例为:${Math.round(dpi * 100)}%`);// 获取设备的物理像素比例。在以下几种比例下面网页显示的文字太大以至于无法正常观看,用上面的css代码即可解决此问题。获取win10系统字体放大百分比、倍数、比例、字号大小_你挚爱的强哥的博客-CSDN博客。原创 2023-06-05 11:11:52 · 391 阅读 · 0 评论 -
CSS color中常用英文色值
常用颜色英文redgreenbluemagentayellowchocolateblackaquamarinelimefuchsiabrassazurebrownbronzedeeppinkalicebluegraycoppercoralfeldsparorangeorchidpinkplumquartzpurplealicebluebluevioletbeigeburlywoodbisquecadetbluepinkroyalblue。原创 2023-05-18 09:37:38 · 600 阅读 · 0 评论 -
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。原创 2023-05-06 17:23:52 · 1617 阅读 · 0 评论 -
边框虚线滚动动画特效
【代码】边框虚线滚动动画特效。原创 2023-05-05 15:05:20 · 566 阅读 · 0 评论 -
左上角角标NEW、最新CSS代码
【代码】左上角角标NEW、最新CSS代码。原创 2023-04-20 18:05:08 · 670 阅读 · 0 评论 -
css3快速完成重构title提示tip样式
【代码】css3快速完成重构title提示tip样式。原创 2023-04-08 20:09:07 · 700 阅读 · 0 评论 -
判断文本内容是否超出了外层DIV的高度、宽度,此时出现了纵向、横向滚动条(如果用了overflow: hidden;则不会出现滚动条)
【代码】判断文本内容是否超出了外层DIV的高度、宽度,此时出现了纵向、横向滚动条(如果用了overflow: hidden;则不会出现滚动条)原创 2023-04-07 21:03:24 · 485 阅读 · 0 评论 -
屏蔽移动端滑动、PC端滑动鼠标滚轮事件,通常用于“一个DIV覆盖了下一个DIV,其中被覆盖的依然可以被上下滑动”的scrollbar滚动场景
【代码】屏蔽移动端滑动、PC端滑动鼠标滚轮事件,通常用于“一个DIV覆盖了下一个DIV,其中被覆盖的依然可以被上下滑动”的场景。原创 2023-04-05 09:50:09 · 251 阅读 · 0 评论 -
CSS实现自动序号 counter-reset: NO。例如:01、02、03...;1、1.1、1.2、2、2.1、2.2、2.3等等
【代码】原创 2023-03-28 22:31:06 · 377 阅读 · 0 评论 -
Access to CSS stylesheet at ‘http://127.0.0.1:5500/XXX‘ from origin..如何解决不能通过现网访问本地路径文件css、js、html等?
看到CORS这个让人有种跨域既视感,那么问题来了,之前能跨域现在不能了?是 chrome 增加了新的跨域规则了吗?如果是,好家伙,奇怪的知识又增加了!原创 2023-03-24 14:42:11 · 712 阅读 · 0 评论 -
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
请使用cover-image或cover-viewcover-image | uni-app官网cover-view | uni-app官网情况1:如上图,注意要使用以下位置才能达到遮住的效果情况2:如上图,就直接用cover-view自定义一个顶部组件,就可以遮住视频了。原创 2023-03-23 08:42:45 · 1942 阅读 · 1 评论 -
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【代码】【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动。原创 2022-10-10 22:17:01 · 1682 阅读 · 0 评论 -
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【代码】【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果。原创 2022-09-29 22:25:38 · 2584 阅读 · 0 评论 -
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
打开chrome浏览器,F12 →Ctrl+Shift+M,出现下面的页面,尺寸里面选择“修改...”添加自定义设备复制以下代码粘贴。原创 2022-09-08 12:15:08 · 4108 阅读 · 0 评论 -
【经典玩法】js用push、unshift、shift、pop或splice实现数组的元素滚动移动,元素往后滚动,元素往前滚动,就像环形循环移动一样,多用于swiper卡片网站头图banner切换效果
【经典玩法】js用push、unshift、shift、pop或splice实现数组的元素滚动移动,元素往后滚动,元素往前滚动,就像环形循环移动一样,多用于swiper卡片网站头图banner切换效果原创 2022-08-29 23:29:12 · 659 阅读 · 0 评论 -
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper
【代码】【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper。原创 2022-09-01 10:48:42 · 391 阅读 · 0 评论 -
用getComputedStyle->getPropertyValue获取DOM的transform属性roateXY3D、scaleXY、translateXY、skewXY等信息
【代码】用getComputedStyle->getPropertyValue获取DOM的transform属性roateXY3D、scaleXY、translateXY、skewXY等信息。原创 2022-09-08 12:08:41 · 411 阅读 · 0 评论 -
用getComputedStyle->getPropertyValue获取伪类的样式or内容content
代码】用getComputedStyle->getPropertyValue获取伪类的样式or内容content。原创 2022-08-18 00:14:39 · 267 阅读 · 0 评论 -
【奇技淫巧】用CSS修改嵌入的svg icon图标图片的颜色
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具https://www.iconfont.cn/search/index?searchType=icon&q=csdn&page=1&fromCollection=-1&fills=&tag=点上面的链接进去下载这个csdn.svg效果如图:.........原创 2022-07-12 21:55:02 · 1945 阅读 · 0 评论 -
前端old driver强哥带你用Vue.js实现奥迪A8L尾灯特效~别废话,赶紧上车。
强哥有一天在B站看到全新奥迪A8L的贯穿式OLED尾灯,惊吓到了~能够把夜总会的氛围灯效如此巧夺天工地移植到车尾灯上面,估计也只有奥迪能够做到!如此骚气的尾灯效果动画太TM酷炫了,我们能不能用Vue来实现呢?答案是肯定的!原创 2022-04-27 00:30:15 · 3385 阅读 · 0 评论 -
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
sgh=1,sg-headsgb=1,sg-bodysgm=1,sg-mainsgf=1,sg-footsgt=1,sg-topsgl=1,sg-leftsgmd=1,sg-midsgr=1,sg-rightsgbt=1,sg-bottomsgo=1,sg-outersgi=1,sg-innersgrt=1,sg-rootsga=1,sg-alertsglo=1,sg-layoutsgbo=1,sg-bordersgic=1,sg-iconsglk=1,sg-link.原创 2022-02-26 10:27:47 · 6267 阅读 · 0 评论 -
loading动画的svg代码片段
<svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#.原创 2022-02-04 16:39:48 · 5826 阅读 · 0 评论 -
手机号码正则表达式输入框失去焦点验证
<!--手机号码正则表达式输入框失去焦点验证--><input onblur="this.reg=/^1\d{10}$/;/*修改正则表达式即可*/if(!this.reg.test(this.value)){this.value='';this.placeholder='请输入正确的手机号';}">原创 2022-02-04 16:11:12 · 5611 阅读 · 0 评论 -
电话号码正则表达式键盘弹起验证
<!--电话号码正则表达式键盘弹起验证--><input class="telphone-number" onkeyup="(this.v=function(){if(!((event.keyCode>=33&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105))){this.value=this.value.replace(/[^0-9-]+/,'');}}.原创 2022-02-04 16:12:40 · 5102 阅读 · 0 评论