随笔分类 -  HTML

a标签做锚点定位，有部分内容被置顶头部遮挡的解决方法
摘要：被遮挡的元素添加如下样式： /**这里假定头部高度是100px*/ position: relative;top: 100px;/**关键样式如下，我这里上面有加定位，如果没用定位，下面的数值需根据实际情况调整*/padding-top: 100px; // 200px margin-top: -1 阅读全文
posted @ 2022-06-10 15:17 桃李子 阅读(368) 评论(0) 推荐(0)
react实现转盘动画
摘要：转盘动画方法如下： /** * 点击转动转盘 */ const turnCircle = () => { let runDeg = +(Math.random() * 360).toFixed(0) + 2160; // 先转6圈，最后再转随机的0-1圈 const table = document 阅读全文
posted @ 2022-06-10 14:58 桃李子 阅读(280) 评论(0) 推荐(0)
html页面下载为docx文档
摘要：1.安装要用到的两个插件：html-docx-js-typescript、file-saver。 2.导入两个方法： import { asBlob } from 'html-docx-js-typescript'; import { saveAs } from 'file-saver'; 3.使用 阅读全文
posted @ 2022-06-10 14:49 桃李子 阅读(976) 评论(0) 推荐(0)
获取元素宽高的方法
摘要：1.获取内联样式：element.style.width/height；--‘100px’ 2.获取实时样式：window.getComputerStyle(ele).width/height; --'100px' 3.IE9以下获取实时样式：element.currentStyle.width/h 阅读全文
posted @ 2022-04-22 15:59 桃李子 阅读(122) 评论(0) 推荐(0)
link和@import的区别
摘要：1.link是HTML标签，@import是CSS提供的方式； 2.页面加载时，link同时被加载，@import则会等页面加载完再加载； 3.@import是CSS2.1提供的方法，老版本不支持，只在IE5以上识别，而link因为是HTML标签，不会有兼容问题； 4.link的权重高于@impor 阅读全文
posted @ 2021-05-18 15:40 桃李子 阅读(192) 评论(0) 推荐(0)
BOM操作
摘要：1.BOM 即浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM把浏览器当作一个对象。 BOM的顶级对象是window，而DOM是document。 BOM是浏览器厂商各自规定，兼容性较差。 BOM大于DOM，包含DOM。2.window对象 是浏览器的 阅读全文
posted @ 2020-08-08 11:30 桃李子 阅读(289) 评论(0) 推荐(0)
DOM操作
摘要：1.API和Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。 主要针对浏览器做交互效果。 很多都是方法（函数）。2.API 应用程序编程接口。 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。3.DOM 文档对象模型。 可扩展标记语言的 阅读全文
posted @ 2020-08-02 22:18 桃李子 阅读(194) 评论(0) 推荐(0)
HTML笔记
摘要：1.简介概念 1）HTML：超文本标记语言。 2）浏览器内核（渲染引擎）：读取网页内容，整理讯息，计算网页的显示方式并显示页面。 3）Web标准：W3C。 原因：浏览器不同，他们显示页面或者排版就有些许差异。 优点： 1 让Web发展前景更广阔。 2 内容能被更广泛的设备访问。 3 更容易被搜索引擎 阅读全文
posted @ 2020-08-02 22:11 桃李子 阅读(60) 评论(0) 推荐(0)
回流与重绘
摘要：1.基本概念 回流：DOM结构的增删改 重绘：颜色背景字体等视觉上页面的改变 2.特点 回流一定会触发重绘 重绘不一定触发回流 3.避免回流 更改样式时尽量更改class样式名，而不是直接更改CSS样式属性 避免使用table布局 尽可能少使用行内样式 尽量在DOM树末端改变样式，改变子节点 在实现 阅读全文
posted @ 2020-07-15 22:09 桃李子 阅读(91) 评论(0) 推荐(0)