![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5
hzxOnlineOk
这个作者很懒,什么都没留下…
展开
-
html 中js 如何给字符串加换行符
let msg= `网络错误\n请联系管理员13959901011`;现象这种写法在html中会被识别为"网络错误\n请联系管理员13959901011",并非我们要的效果。解决办法在对应元素类名的样式中加入white-space: pre样式原创 2021-12-22 11:10:53 · 2285 阅读 · 0 评论 -
两个div分上下堆叠,上部分高度不固定,下面部分自动填满剩余高度
<div class="wrapper" id="wrapper" style="height: 100%;"> <div class="searchForm" id="searchForm"></div> <div class="tableContent" id="tableContent"></div></div>方法一:var wrapper= document.getElementById('wrappe原创 2021-11-16 19:19:57 · 955 阅读 · 0 评论 -
html5 获得窗口焦点和失去窗口焦点
当前窗口获得焦点js事件,html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点,监听 onfocus() 和window.onblur()事件实现//当前窗口得到焦点window.onfocus=function(){//播放动画或视频};//当前窗口失去焦点window.onblur=function(){//暂停动画或视频};这个方法可以实现切换标签暂停动画视频,但是会带来一...转载 2021-08-17 17:49:51 · 4061 阅读 · 0 评论 -
html 中 包含img标签的父容器元素p、div、a等类型的高度多出一块 且css查询不到margin和padding的原因及解决
问题 当p、div、a这些作为父元素容器且包含img子元素标签时,父元素的总体高度会比img图片的高度多出一些px<div class="content"><img src="https://www.baidu.com/images/asfwqdr1fgh44.png"><div>F12排查了父元素是否存在margin或者padding,但是没有找到对应的间距设置,又排查了html文本,看看是否是空格或者换行符导致的。仍不行,排除html空格的问题原创 2021-01-15 10:54:32 · 626 阅读 · 1 评论 -
记录 生成二维码canvas 并且截取指定html元素转换为截图
错误案例 (元素没有弄成固定fixed定位,当屏幕过小时,超过1屏有滚动,可能导致只能截图到部分。并且注意指定的html容器元素在被转换时,是否已经挂载完毕) componentDidMount() { html2canvas(document.getElementById("#capture"), { useCORS: true, width: window.screen.availWidth, height: 532, windowWidt原创 2020-09-15 17:34:24 · 211 阅读 · 0 评论 -
使用原生JS将html表格代码保存为excel
<!DOCTYPE html><html><head> <title>example.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv=".原创 2020-09-09 13:59:49 · 427 阅读 · 0 评论 -
html 中的div或者span或者p标签文本超出宽度不会自动换行 span设置不了margin的原因
html 中的div或者span或者p标签文本超出宽度不会自动换行的原因.am-list-item .am-list-line .am-list-extra { flex-basis: 60%; white-space: no-wrap; // 就是这行导致的}span设置不了margin(非块元素需要设置display: 'inline-block',)<span style={{ display: 'inline-block', color: 'red',..原创 2020-09-01 16:15:30 · 1370 阅读 · 0 评论 -
调试移动端h5的新闻详情页 对于空格pc谷歌浏览器调试的渲染效果与手机终端的渲染效果不同
我接到了一个需求,实现新闻列表以及对应的新闻详情这是一个react-native项目,但是要求用移动端h5开发详情页,打包成dist后,作为一个链接以供rn列表项点击跳转问题来了,详情页的内容会在后台系统填写一些空格格式,pc谷歌浏览器调试移动端h5对于空格的渲染和手机终端的app的webview上看到的空格渲染宽度不同,这直接导致了文案无法同步对齐有鉴于此,决定采用iframe去做展示...原创 2020-07-01 10:09:21 · 584 阅读 · 2 评论 -
react 写移动端H5页面 引用本地图片 且路径正确,但是图片无法正确展示(会展示成默认图片)
错误的图片如下:Card.js(这边直接在img标签写的相对路径,但是无法正确显示)import React from 'react'import styles from './card.less'export default class extends React.Component { constructor(props) { super(props) this.state = { // isShow: false, } ..原创 2020-05-23 21:52:14 · 803 阅读 · 0 评论 -
JavaScript 判断iPhone X Series机型的方法
写在前面如果有更优雅的方式,一定要告诉我!现状iPhone X 底部是需要预留 34px 的安全距离,需要在代码中进行兼容。现状对于 iPhone X 的判断基本是这样的: 1 2 // h5 export const isIphonex = () => /iphone/gi.test(navigator.userAgent) ...转载 2020-03-31 22:27:25 · 357 阅读 · 0 评论 -
实现react移动端渐变骨架屏简单案例
首先是封装各部分骨架的Skeleton.jsimport React from 'react';import moment from 'moment';import styles from './skeleton.css';import Title from './Title';import Paragraph from './Paragraph';import ImageCont...原创 2020-03-30 11:16:50 · 1557 阅读 · 0 评论 -
HTML5的十大新特性
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等(1)语义标签 语义化标签使得页面的内容结构化,见名知义标签 描述 <hrader></header> 定义了文档的头部区域 &...转载 2020-01-09 16:38:23 · 158 阅读 · 0 评论