随笔分类 -  Html5技能

1 2 3 4 5 下一页
收集工作中用到的H5实用技术
H50089：html 代码使页面回顶部效果
摘要：1，a 标签在中，href target 这样写，在页面点击后就有回页面顶部的效果 <div class="col-md-6 col-sm-6 all"> <a href="" target="" class="photo"><img src="images/product/wait.png" /> 阅读全文
posted @ 2024-04-21 16:38 琥珀君 阅读(13) 评论(0) 推荐(0)
H50088：js动态生成html代码的三种形式
摘要：1， // 方案一 O.TEMPLATE = '<div class="viewer-container">\ <div class="viewer-canvas"></div>\ <div class="viewer-footer">\ <div class="viewer-title"></di 阅读全文
posted @ 2023-11-30 16:05 琥珀君 阅读(194) 评论(0) 推荐(0)
H50087：a标签 跳转空 a标签刷新当前页面
摘要：1， <li class="remove_frame" style="display:n"><a href="javascript:void(0);" onclick="spanClick(this)" title="刷新模型"></a></li> 2，a标签刷新当前页面 <a href="java 阅读全文
posted @ 2022-10-04 18:09 琥珀君 阅读(453) 评论(0) 推荐(0)
H50086：html <meta> 标签设置 强制要求https协议 描述 关键词 icon图标 禁用缩放 http-equiv 属性 禁用缓存 自动刷新 窗口独立页面
摘要：1， 加载资源，强制要求https协议 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 2， <meta name="description" content="执行按钮提交创建圆形进度加 阅读全文
posted @ 2022-10-03 10:53 琥珀君 阅读(199) 评论(0) 推荐(0)
H50085：html 扇形菜单
摘要：1， <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-wid 阅读全文
posted @ 2022-09-23 20:43 琥珀君 阅读(57) 评论(0) 推荐(0)
H50084：纯html全屏视频背景
摘要：1， <!DOCTYPE html> <html> <head> <title>全屏视频背景</title> <meta charset="utf-8"> <style> body,html { width: 100%; height: 100%; } * { margin: 0; padding: 阅读全文
posted @ 2022-09-22 15:34 琥珀君 阅读(50) 评论(0) 推荐(0)
H50083：html页面直接嵌入另一个html页面
摘要：1，home.html中代码 <iframe src="https://www.aliyun.com/page-source/domain/hosting/vm_create_successfully" frameborder="0" height="100%" width="100%"> </if 阅读全文
posted @ 2022-08-02 11:06 琥珀君 阅读(735) 评论(0) 推荐(0)
H50082：视频音频图片展示模板页面
该文被密码保护。
posted @ 2022-04-01 12:20 琥珀君 阅读(0) 评论(0) 推荐(0)
H50081：背景音乐按钮创建 html元素上禁止拖拽
摘要：1， <!-- 音乐按钮 --> <div class="bgmusic generalF"></div> <!-- 音乐模块 --> <audio id="myAudio" hidden="true" autoplay="autoplay" loop="loop" preload="auto" c 阅读全文
posted @ 2022-03-11 12:24 琥珀君 阅读(70) 评论(0) 推荐(0)
H50080：html url 地址获取id 嵌入iframe并动态传入id
摘要：1，访问地址： https://www.xxx.com/xxx.html?id=bmRMH3GfST <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content=" 阅读全文
posted @ 2021-10-16 21:38 琥珀君 阅读(366) 评论(0) 推荐(0)
H50079：html 获取 屏幕宽高 页面宽高
摘要：1，屏幕宽高 console.log(window.outerWidth); console.log(window.outerHeight); 2，页面宽高 console.log(window.innerWidth); console.log(window.innerHeight); 阅读全文
posted @ 2021-06-22 11:24 琥珀君 阅读(220) 评论(0) 推荐(0)
H50078：Pointer Lock 介绍
摘要：1， 一、Pointer Lock API是干嘛用的？ 用一句话说明Pointer Lock API的作用就是：Pointer Lock API可以让你的鼠标无限移动，脱离浏览器窗体的限制！ 使用示例 阅读全文
posted @ 2021-05-24 17:38 琥珀君 阅读(89) 评论(0) 推荐(0)
H50077：swiper 使用技巧 循环索引 导航圆点样式 无缝大屏流动特效
该文被密码保护。
posted @ 2021-05-07 18:24 琥珀君 阅读(25) 评论(0) 推荐(0)
H50076：DIV 的滚动限制在一个区域
摘要：1， <!-- 滚动限制在一个区域 --> <div style="width: 100vw; height: 84vh; overflow: hidden;"> <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: 阅读全文
posted @ 2021-04-26 14:05 琥珀君 阅读(134) 评论(0) 推荐(0)
H50075：html中 书写 代码 code
摘要：1, <div class="col-12@sm"> <h3>添加元素</h3> <p>无论您在DOM中添加元素的哪个位置，它都会显示在网格中（假设您使用默认的排序方式）。 考虑到这一点，您可以追加，前置或插入元素，以便让它们以正确的顺序显示。</p> <div class="code-block" 阅读全文
posted @ 2021-04-22 10:06 琥珀君 阅读(187) 评论(0) 推荐(0)
H50074：base标签 指定资源地址
摘要：1，指定url地址 阅读全文
posted @ 2021-04-21 14:07 琥珀君 阅读(35) 评论(0) 推荐(0)
H50073：div 循环添加点击事件，swiper循环添加点击事件
摘要：1，div 循环添加点击事件 <div class="video home_video"> <div class="videolist" vpath="4.mp4" ipath="4.mp4"><img src="../common/images/theme/default/video_icon.p 阅读全文
posted @ 2021-03-05 11:44 琥珀君 阅读(418) 评论(0) 推荐(0)
H50072：html 视频播放 按钮 及容器
摘要：1，HTML及 JS 代码 <!-- 视频播放 --> <div class="video home_video"> <div class="videolist" vpath="video/1.mp4" ipath="video/6.mp4"><img src="common/images/them 阅读全文
posted @ 2021-03-05 10:19 琥珀君 阅读(319) 评论(0) 推荐(0)
H50071：简单 背景图 icon 的页面 作者签名meta
摘要：1， <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> 签名字段 <meta name="description" content=""> <meta name="keywords" content=""> <meta name="auth 阅读全文
posted @ 2021-03-04 11:21 琥珀君 阅读(54) 评论(0) 推荐(0)
H50070：html页面禁用右键
摘要：1，添加到head标签中去 <!-- 禁用右键 --> <script type="text/javascript"> function stop() { return false; } document.oncontextmenu = stop; </script> </head> 阅读全文
posted @ 2021-01-28 09:45 琥珀君 阅读(52) 评论(0) 推荐(0)

1 2 3 4 5 下一页