随笔分类 - Web前端 / HTML/CSS
摘要:当我们添加一张svg图片显示时,react提示找不到文件。 我们可以在全局文件global.d.ts内,添加图片类型的声明: 详见《TypeScript 引用资源文件后提示找不到的错误处理方案》 声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置: 1 <?xml version=
阅读全文
摘要:在开发App端的网页时,要适配iphone、ipad、ipod、安卓等各种机型,一般是直接使用em、px转em、界面缩放。 本章是通过将界面缩放,等比例显示在各机型上。过程中遇到了些问题和大坑~ 然后下面是具体的自适应尝试~ 方案一 设置tranform/scale 首先设置内容固定宽度、自动高度(
阅读全文
摘要:如何通过js往剪贴板中,添加一段文本 1 var oInput = document.createElement('input'); 2 oInput.setAttribute('value', this.downloadUrl); 3 document.body.appendChild(oInpu
阅读全文
摘要:监听标签的触摸/鼠标滑动事件,添加元素的切换动画,效果如下: 事件监听 鼠标事件和触摸事件监听: 1 componentDidMount() { 2 var teachingReportDiv = document.getElementById("teachingReport") as HTMLEl
阅读全文
摘要:通过img.src添加图片 添加一个img元素,设置content,会发现在IE、safari等浏览器内显示为空白。 一般我们使用img,是通过src来设置的,可以通过react的import图片添加。 <img className="headerMenuEntryImg" src={MenuEnt
阅读全文
摘要:页面滚动时,添加平滑特效 1.在页面入口处,添加css 1 html { 2 scroll-behavior: smooth; 3 } 添加全局css之后,直接使用window.scroll(0,0)就可以平滑滚动到顶部了。 注:兼容性很差,仅支持火狐、chrome高级版本 2.指定滚动操作,使用平
阅读全文
摘要:每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。 添加初始数据,默认透明度0、左右分别移动100px。 1 //左侧容器 2 .item-leftContainer { 3 opacity: 0; 4 transform:
阅读全文
摘要:以下是常见的监听滚动以及相应的操作 窗口滚动事件 当页面滚动时,如何动态切换布局/样式 1. 添加滚动事件的监听/注销 1 //在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理 2 componentDidMount() { 3 window.a
阅读全文
摘要:列表项,有时需要判断列表首尾,来筛选设置样式 如上图,三个项有间隔,怎么保证设置了列表项之间的距离后,整体还水平居中显示呢? .item:not(:first-child) { margin-left: 20px;} 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <me
阅读全文
摘要:如何设置水平居中显示? 一般的方法是设置宽高,然后以margin去控制,比如:DIV居中的经典方法 本章介绍需要宽度自适应时如何水平居中,以及居中失效的几个点 水平自适应居中 比如设置一个列表水平居中显示 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA BBBBBBBBBB
阅读全文
摘要:如何设置标题栏一直置顶固定显示? 只需要给标题栏所在的容器,以下设置: position: fixed; top: 0px; left: 0px; width: 100%; 位置固定在左上角,同时宽度填充满。 以下是Position的几个值: fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
阅读全文
摘要:上一篇有自定义提示框,前端 自定义弹出框-提示框(一),这篇推荐一个确认框的实现。 JS默认确认框 确认框 var result=confirm('确认删除XX文件?');result为bool类型 回复确认框 var result=prompt('请输入文件标题:');result返回输入的值 自
阅读全文
摘要:js默认提示框 js有三种默认提示框 提示框 alert('hello world!'); 自定义提示框 下文通过js自动生成一个自定义提示框 function showDialog(content) { var layer = document.createElement("div"); laye
阅读全文
摘要:Js现在支持高级语法,字符串格式化 alert(`aaaa${content}`); 我们使用一段完整的html来打开测试下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 </head> 6 <bo
阅读全文
摘要:我们有遇到可以直接打开QQ的跳转链接,也有遇到过直接启动office打开文档。 具体是如何操作的呢? 添加注册表项 首先需要在注册表中添加应用软件的启动地址,操作方式如下 在HKEY_CLASSES_ROOT下,新建JiraUserQuestion及其子节点: 然后,在JiraUserQuestio
阅读全文