html以及html5
html5知识
小仙女de成长
啊麻利麻利哄
展开
-
html5拓扑图插件汇总
1、Vis.js官网:vis.js - A dynamic, browser based visualization library.github地址:GitHub - almende/vis: Dynamic, browser-based visualization library在github上有4000多颗星,还蛮受欢迎的;2、JointJS官网:JointJS - the HTML 5 JavaScript diagramming library.github地址:GitHub - c转载 2021-07-23 11:33:45 · 750 阅读 · 1 评论 -
canvas 设置宽度、高度后,签名区域鼠标不听使唤
错误写法: <canvas ref="canvas" tabindex="0" @mousedown="onMouseDown" style="width:500px;height:300px"/>正确写法: <canvas ref="canvas" tabindex="0" @mousedown="onMouseDown" width="900" height="500"/>原创 2021-07-22 08:49:37 · 368 阅读 · 0 评论 -
标移动到指定的div边框时鼠标指针发生变化
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>test</title> <style> #box1 { width: 100px; height: 100px; borde.原创 2021-07-14 09:36:34 · 613 阅读 · 0 评论 -
bootstrap中导航条data-toggle=collapse与data-target的联动
理想效果:当浏览器页面大于768px时,导航条最右侧的菜单按钮隐藏当浏览器页面小于768px时,可以点击菜单按钮显示、隐藏下拉菜单代码:其中navbar-toggle效果是隐藏菜单小图标,当屏幕分辨率小于768px时,移除此效果。data-gottle="collaspse"效果为此元素会与另一个元素联动,联动效果是显示与隐藏。data-target效果是选中与本元素联动的元素,“引号”内填目标元素的类名或id名,data-toggle用于控制隐藏无序列表,data-t转载 2021-04-13 14:45:40 · 1338 阅读 · 0 评论 -
前端水印,类似钉钉水印效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>element-watermark</title></head><body><div ...转载 2020-12-01 09:12:05 · 1506 阅读 · 0 评论 -
table中设置tr行间距
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框border-collapse属性加上border-spacing属性就可以设置tr行间距<table style="border-collapse:separate; border-spacing:0px 10px;"> <tr> <td>那片笑声躺我想起我...转载 2018-09-29 12:48:41 · 1705 阅读 · 0 评论 -
HTML怎么让table中的td内容过长显示为固定长度,多余部分用省略号代替
HTML如何让table中的td内容过长显示为固定长度,多余部分用省略号代替这个问题呢,是由于我们公司测试的部门测出来的,虽然说测试的内容本身就是个BUG,不过这个也让我学到了一个比较好的归类于布局的一个小技巧,就是将td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替。方式如下:这个功能有一个前提,在table中必须设置style:table-layout: fi...转载 2018-10-26 08:47:50 · 6762 阅读 · 0 评论 -
web前端中怎样设置在线qq
web前端中如何设置在线qqweb前端中网页中经常需要提供qq咨询的功能。实现方法:1、 HTML中嵌入链接聊天功能<a href="http://wpa.qq.com/msgrd?v=3&uin=换成自己的QQ&site=qq&menu=yes" target="_black">链接文字</a>在HTML中插入以上代码即可实现点击链...转载 2018-11-16 14:22:31 · 305 阅读 · 0 评论 -
textarea高度自适应,随文字增加自动撑开
需求: 随文字增多,将textarea自动撑开。解决思路: pre标签能保持文本的格式,将textarea的文本内容和样式严格复制一份给pre标签,pre的高度值就为我们所需的textarea的高度值。然后将pre隐藏。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta c转载 2019-01-04 16:07:32 · 8073 阅读 · 0 评论 -
发布 vue2 实现 div contenteditable="true" 类似于 v-model 的效果
使用组件单独声明一个组件,在组件内部处理数据(也就是innerHTML),并将数据返回给父组件。代码如下:&amp;lt;template&amp;gt; &amp;lt;div class=&quot;edit-div&quot; v-html=&quot;innerText&quot; :contenteditable=&quo转载 2019-01-21 14:50:20 · 1258 阅读 · 5 评论 -
一个简单而又漂亮的404页面源码
https://www.daixiaorui.com/read/114.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w...转载 2019-03-20 09:05:45 · 10084 阅读 · 0 评论 -
table的两个td之间有间隙
我这个是用table布局的,然后发现2个<td></td>之间有空隙,很奇怪的~~解决方法<table border="0" cellpadding="0" cellspacing="0"></table>红色标记的即可解决...原创 2019-03-28 16:32:37 · 5869 阅读 · 0 评论 -
类似苹果手机小球在屏幕内随意拖动效果
VUE的写法<template> <div> <i class="iconfont icon iconfanhuishouye div" id="div" @click="goIndex"></i> </div></template><script>export default ...转载 2019-04-26 09:14:37 · 766 阅读 · 0 评论 -
查看网页原代码时遇到中文汉字乱码
有时候需要看一下别人的页面源代码,看看别人的思路。可是很多中文都乱码了,比如这样: 有时候需要看一下别人的页面源代码,看看别人的思路。可是很多中文都乱码了,比如这样: 目前乱码的时候是GBK改为UTF-8就可以了 ...转载 2018-08-08 15:08:19 · 1638 阅读 · 0 评论 -
移动端禁止手机自带键盘弹出
解决方案: HTML代码 &lt;div class="calendar"&gt; &lt;div&gt; &lt;input type="text" id="datePicker" class="date_picker"转载 2018-08-08 14:12:46 · 1712 阅读 · 0 评论 -
关于<textarea>看上去没空格,实际上有空字符串的解决方法
这个标签我们都不陌生,但是今天我用jq去获取他里面的val(),他里面明明是空的,为什么获取到的居然有4个字符串????我很诧异。后来经过查询资料得知:这个标签不能分行写,就是要并排去写,如图原创 2017-09-10 16:58:19 · 2716 阅读 · 0 评论 -
本地打开文件 % % 是什么意思
今天打开一个本地的html文件 出来的结果是这样file:///C:/Users/pc007/Desktop/Paging/index%20-%20副本.html 一开始还以为啥自动转义了呢 后来才知道是空格的原因 如图原创 2017-10-20 11:22:22 · 727 阅读 · 0 评论 -
页面局部跳转frameset
页面局部跳转frameset转载 2017-12-21 10:03:43 · 1220 阅读 · 0 评论 -
移动端网页实现拨打电话功能的几种方法以及点击立刻qq联系
这个是点击立即qq联系 下面的是点击拨打电话:采用url链接的方式,实现在safari iOS,Android 浏览器,webos 浏览器,塞班浏览器,ie,operamini等主流浏览器,进行拨打电话功能。1.最常用的方式:复制代码代码如下:报警!在拨号界面,显示号码,并提示拨打。支持大部分的浏览器,但是在qq浏转载 2017-08-07 14:29:33 · 3904 阅读 · 0 评论 -
让input变成不可编辑状态的方法
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" /> disabled="true "此转载 2017-12-25 11:07:03 · 4566 阅读 · 0 评论 -
本地存储的使用跟删除
// 设置值 sessionStorage.setItem('key_a', 1); // 取值 var key_a = sessionStorage.getItem('key_a'); console.log(key_a); // 删除 sessionStorage.removeItem('key_a');原创 2017-09-07 17:29:13 · 4276 阅读 · 0 评论 -
H5禁止页面滑动/滚动
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否禁止页面滚动 有三种方法1,依靠css 将页面document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。但是 你用键盘的 上下左右键,你会发现,...转载 2018-02-22 09:24:24 · 15753 阅读 · 0 评论 -
input标签 type='file' 上传图片问题
html 中[html] view plain copy<input class="weui-uploader__input" id="uploaderInput" type="file" accept="image/*" multiple="" onchange='openFile(event)'> js中[javascript] view plain copyvar open转载 2018-03-12 12:59:52 · 1468 阅读 · 0 评论 -
echarts用法
1.在线引用:<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>2. <div id="main" style="width: 1500px;height:900px;position:abs.原创 2018-03-12 19:10:27 · 545 阅读 · 0 评论 -
Flex布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Flex布局</title> <style> html,body{ margin: 0原创 2018-04-11 14:55:28 · 242 阅读 · 0 评论 -
H5新特性之picture
这个特性就是根据不同的浏览器分辨率,显示不同对应的图片。 大家可以自己试下效果哈原创 2018-06-11 08:55:26 · 483 阅读 · 0 评论 -
Img onerror属性使用后,图片还是丢失,img一直闪烁不停
刚刚写练习的时候,使用了img的onerror属性,一般习惯性用这个属性来显示图片丢失时统一的默认图片。尴尬的是,刚刚我的默认图片也丢失了。这就导致进入了一个死循环,img一直在刷新。百度了以下,发现很多人遇到了这个问题。果然最后还是需要强大的js来解决这一切。<!DOCTYPE html><html> <head> &...转载 2018-08-09 09:35:48 · 1632 阅读 · 0 评论 -
HTML5日期输入类型(date)
HTML5日期输入类型(date)转载 2017-08-31 19:08:58 · 972 阅读 · 2 评论