![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端(html css js)
web前端(html css js)
程序猿想成程序狮
学习中的一名程序猿,偶尔分享笔记,很懒。
展开
-
svg背景适应元素大小
将background-image: url(“./test.svg”);改为background-image: url(“./test.svg#svgView(preserveAspectRatio(none))”);:修改svg文件,在svg标签中加属性preserveAspectRatio=“none”如果你的css代码是以上这样的,它可能不会达到理想的效果。原创 2024-03-05 11:17:48 · 588 阅读 · 0 评论 -
verdaccio + docker搭建私有npm仓库(有手就行)
docker。原创 2023-05-20 08:00:00 · 1190 阅读 · 0 评论 -
css fixed定位失效问题
fixed定位失效问题的原因多半在于fixed定位的元素其祖先的transform, perspective 或 filter属性非none,导致fixed定位不再参照视口进行定位,而是参照祖先进行定位。原创 2022-09-03 21:09:30 · 2628 阅读 · 0 评论 -
css选择器nth-child和nth-of-type区别(学不会来打我)
nth-child:先根据位置找到元素,再看该元素的选择器是否符合nth-of-type:先找出符合选择器的所有元素,将它们根据不同的标签进行分类,再选中每个分类中位置符合的元素原创 2022-08-25 20:36:05 · 460 阅读 · 0 评论 -
requestAnimationFrame
requestAnimationFrame(callback)允许你在每一帧执行一次回调,这对于制作动画是非常适合的不多说,直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2022-05-01 10:55:08 · 236 阅读 · 0 评论 -
js插入字符串表示的元素(insertAdjacentHTML)
我们之前使用的插入元素的方法为appendChild,该方法可以在元素内部的末尾插入一个元素但是这个方法使用起来不太友好,因为它需要传入一个元素,所以往往我们需要使用document.create先创建一个元素才能进行插入操作如果需要创建的元素存在很多嵌套关系,例如<div> <ul> <li> <p></p> </li> <li></li> </ul></div&原创 2022-04-08 00:16:13 · 1288 阅读 · 0 评论 -
事件冒泡与事件捕获
文章目录事件冒泡事件捕获事件冒泡与事件捕获触发顺序事件冒泡当元素之间存在嵌套时,那么当子元素事件触发,父元素的对应事件也会触发。例如两嵌套元素都绑定了点击事件,那么点击子元素后,会先触发子元素的点击事件,然后触发父元素的点击事件。这种事件自下而上的触发(类似于气泡在水中自下而上的冒)就叫事件冒泡代码示例<div id="parent"> parent <div id="son">son</div></div><script>原创 2022-04-04 10:32:47 · 631 阅读 · 0 评论 -
js addEventListener绑定事件方法(详细介绍)
事件冒泡如果两个元素是嵌套的,那么当子元素事件触发后,父元素的对应事件会随后触发,这种事件自下而上的触发就是事件冒泡,类似水中的气泡往上冒例如下面代码,点击son元素后先触发son的点击事件,然后触发parent的点击事件<div id="parent" onclick="alert('parent')"> parent <div id="son" onclick="alert('son')">son</div></div>事原创 2022-04-04 00:22:30 · 9282 阅读 · 0 评论 -
原生js发送ajax请求
原生js发送ajax请求最简单的//创建请求let xhr = new XMLHttpRequest();xhr.open('GET', url, true);//url表示请求地址//发送请求xhr.send();如果希望关心请求结果//创建请求let xhr = new XMLHttpRequest();xhr.open('GET', url, true);//url表示请求地址//监听请求状态改变的事件xhr.onreadystatechange = () => {原创 2021-11-25 11:47:12 · 1139 阅读 · 0 评论 -
隐藏滚动条
1.使用element::-webkit-scrollbar选中元素的滚动条2.设置其样式为display:none即可例如要隐藏body的滚动条可以这样写:body::-webkit-scrollbar{ display: none;}原创 2021-03-28 16:53:47 · 115 阅读 · 0 评论 -
css文本溢出显示省略号
单行文本white-space: nowrap;/*强制不换行*/overflow: hidden;/*溢出隐藏*/text-overflow: ellipsis;/*文本溢出显示省略号*/多行文本display: -webkit-box;-webkit-line-clamp: 2;/*文本显示两行*/-webkit-box-orient: vertical;overflow: hidden;/*溢出隐藏*/text-overflow: ellipsis;/*文本溢出显示省略号*/原创 2021-03-28 09:57:57 · 197 阅读 · 0 评论 -
js深度克隆
function deepClone(origin, target) { var target = target || {}; for (var prop in origin) { if (origin.hasOwnProperty(prop)) { //判断属性是原始值还是引用值,若为原始值,则直接进行赋值;若为引用值,则判断是数组还是对象,然后进行递归的深度克隆 if (origin[prop] !== null &&a原创 2021-02-23 10:19:12 · 54 阅读 · 0 评论 -
css去除input选中后的黑色边框
选中后出现黑色边框是input的自带样式,如图:使用以下语句可去除input:focus{ outline: none;}去除后的效果如下:原创 2021-01-26 11:52:10 · 7150 阅读 · 0 评论 -
css使用定位实现子元素在父元素水平垂直居中
先看效果:假设元素结构为父元素尺寸300×300,子元素尺寸100×100,如下图。现在,要使子元素在父元素内水平垂直居中。具体做法如下:1、父元素使用相对定位,为的是保证使其子元素定位的参考系是父元素。2、子元素使用绝对定位。设置top、right、bottom、left均为0,margin设置为auto3.完成,看效果完整代码:<!DOCTYPE html><html lang="en"><head> <meta cha原创 2021-01-17 10:45:42 · 536 阅读 · 0 评论 -
js取消提交表单
js取消提交表单,只需要使form的onsubmit()返回false即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></原创 2021-01-14 15:32:58 · 1437 阅读 · 0 评论 -
js添加元素、节点
1.使用document.creatElement(元素类型)创建节点;例如创建一个div,就使用document.createElement(“div”),该方法返回创建好的DOM对象。2.使用父元素.append()方法将创建好的节点作为子元素添加进某个元素下;示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-01-14 14:58:12 · 2421 阅读 · 0 评论 -
div失去焦点事件onblur()无效
初学js事件,想做一个点击时变红,取消聚焦时变白的div,于是我这样写代码:<div style="width: 100px;height: 50px;border: 1px solid;"></div><script> let div = document.getElementsByTagName("div")[0]; //点击时变红 div.onclick = function(){ this.style.backgroun原创 2021-01-13 22:21:03 · 6674 阅读 · 1 评论 -
js可变参数
js的函数都是可变参数的。完全可以在函数定义时不给任何形参,在调用时传入任意数量的参数。调用函数时传入的参数会封装为一个数组argument。在函数中使用argument[i]来访问传入的第i个参数。举例:如果需要写一个累加函数(将传入的所有参数相加后返回),可以这样写<script> //定义函数 var sum = function(){ let result = 0; for(let i = 0; i < arguments.length; i+原创 2021-01-13 11:04:37 · 3734 阅读 · 0 评论 -
html、css合并表格边框
我们给table和td标签加边框时,默认使用双边框,像这样。如果我们希望合并table与td的边框,可以在table样式加设置border-collapse的属性值为collapse即可。如下图:再看效果:为了便于复制,这里给出代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2021-01-13 09:52:21 · 2991 阅读 · 0 评论 -
如何在html中使用特殊字体
前言一、下载字体文件(.ttf文件)二、在html中引入.ttf字体文件三、引入字体文件后就可以将该字体应用到你的文本上了完整代码示例前言html中自带的字体很多,足以满足我们大部分需求,但特殊情况下,我们需要使用特殊的字体,本文介绍了如何在你的html网页中使用特殊字体不多BB,先上效果图:接下来就教大家如何使用特殊字体一、下载字体文件(.ttf文件)百度搜索你想要的特殊字体的.ttf文件并把它下载到一个你能记住的目录中,例如我把华文彩云.tf(记得解压并拿出.ttf文件)下载进了C盘.原创 2020-11-10 07:24:54 · 4637 阅读 · 3 评论 -
html、css修改字体
font-family是表示字体的属性。如果需要修改字体,只需将font-family的值更改为你所需要的字体即可。运行结果:原创 2021-01-12 19:30:16 · 385 阅读 · 1 评论