HTML5
关注
分享
扫一扫
文章平均质量分 54
MuGuiLin
Web Development。
展开
-
纯CSS 自定义radio单选按扭、checkbox复选框 默认样式
纯CSS 自定义修改原生html中的radio单选按扭标签、checkbox复选框标签的默认样式，选中之前、之后状态的颜色，边框色，选中动画等，可根自己的需要调整。原创 2022-09-29 17:52:04 · 4113 阅读 · 0 评论 -
HTML table表格 固定表头 tbody加滚动条
纯CSStable表格thead固定tbody滚动效果由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！实现思路：将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...原创 2019-12-31 18:00:02 · 20822 阅读 · 7 评论 -
点击动态创建表格、单行删除、全选、全部一键删除
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js表格操作</title> <style type="text/css"> html, body { font...原创 2016-05-25 15:17:49 · 1487 阅读 · 0 评论 -
CSS3 响应适动态加载 外部style样式文件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3 响应适动态加载 外部style样式文件</title> <!--屏幕宽度大于760px时 使用样式1--> <link rel="stylesheet" t...原创 2017-08-15 22:12:50 · 1492 阅读 · 0 评论 -
CSS3 background-attachment：属性
background-attachment :定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动inherit: 继承初始值: scroll继承性: 否适用于: 所有元素HTML代码：<!DOCTYPE html><h...原创 2016-07-18 18:46:28 · 758 阅读 · 0 评论 -
JS电脑配置检测
废话就不多说了，直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浏览器电脑配置检测</title> <style type="text/css"> ...原创 2018-03-18 11:32:54 · 1785 阅读 · 0 评论 -
H5送鲜花、礼物动画(解决：多个动画同时渲染卡顿问题)
前言： 由于项目需要，要做一个送礼物的动画，而在项目开发过程中碰到了一些坑，现在记录下来难免以后再次跳坑。如有不足之处还请多多指教。使用场景： 四个人斗地主，当你觉得哪个人打得好就可以送他一束鲜花，打行不好你可以向他扔鸡蛋，礼物分别是： 鲜花、平锅，点赞，砸蛋共有4种，这4种礼物的动画是用GIF图片做（可以用Canvas做）的，当前送礼物的人少的时候还好，但是在人多...原创 2019-01-03 16:13:25 · 3167 阅读 · 0 评论 -
JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载
JavaScript 多文件下载HTML5中 a 标签多了一个属性——download，用户点击链接浏览器会打开并显示该链接的内容，若在链接中加了 download 属性，点击该链接不会打开这个文件，而是直接下载。注意，是HTML5中的新特性，所以低版本浏览器不兼容！1、单个文件下载：以下载mp3为例：重点在于：要在a标签中加上download属性;<a do...原创 2018-03-17 16:18:06 · 8239 阅读 · 0 评论 -
H5 Video 截取第一帧 Canvas 动态视频渲染、截取控制
由于现在的新媒体技术、资源、客户体验、需求等也越来越广、多、高，作为HTML5中较为重要的 新媒体video视频API，也是用得非常之多。 比如之前有个项目要在微信中做直播（半屏）播放（rtmp, m3u8等视频流），在IOS手机还好（听说ios手机微信没那么大的操控权限），而在Android手机下（Android系统毕竟是开源产品）， 只要在微信X5内核...原创 2017-10-30 15:02:34 · 17771 阅读 · 4 评论 -
web前端-图片，优化，压缩
据网络统计，60%的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。常用格式：图片格式支持透明动画支持压缩方式浏览器支持相对原图大小适应场景jpg不支持不支持有损所有由画质决定所有通用场景原创 2017-07-28 10:41:55 · 1258 阅读 · 0 评论 -
Web前端开发 icon图标 转 web字体图标
在我们大多数的项目当中，icon图标是必不可少的，有的一个一个单独切片，或者将它们拼接组合起来（图片合成技术：css sprite）从而减少请求，方便调用等，但是随着项目的逐渐扩展壮大，图标越来越多，到最后难以维护， 比如以后要改某个图标的位置x , y，大小，顔色，新增。。。等等这样的方式就显得比较有限制性了。IcoMoon是一个可以通过个性化设置来创建自定义图标（字体）原创 2017-07-28 10:32:58 · 2339 阅读 · 0 评论 -
Ajax文件上传带进度条、文件类型、大小、数量等获取、限制
$ajax 文件上传，带进度条，文件类型，文件大小。 Web前端代码效果图：使用说明：1、复制以下代码，创建一个新的html文件，粘贴对应的代码。2、引入jQuery文件，或 CDN地址。3、配置后端服务器上传地址。HTML代码：<!DOCTYPE html><html><head> <me...原创 2017-04-16 23:30:40 · 2276 阅读 · 0 评论 -
移动端 H5 常用META标签属性详解
1、移动端H5浏览器中页面常用meta配置：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />content属性值说明： width ...原创 2016-09-30 11:38:30 · 771 阅读 · 0 评论 -
你应该知道的HTML 5五大特性
摘要：HTML5技术中有这样5个特性，它们能够让你实现事半功倍的开发效果，它们分别是：DNS Prefetching、Link Prefetching、Download属性、Regular Expressions以及Datalist元素。HTML5的诞生为Web App以及移动App开发带来了许多新鲜有趣的JavaScript与HTML API。本文将介绍5个能够让你事半功倍的HTML转载 2016-09-05 15:00:16 · 352 阅读 · 0 评论 -
HTML5 CSS3 响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计...原创 2016-08-09 17:27:59 · 1022 阅读 · 0 评论 -
如何解决IE6下的双倍margin问题
问题：当一个浮动div设置margin:10px; 在别的浏览器下显示都是距离左侧10px，而在IE6下却显示成20px;解决办法：在这个div 的CSS里加上display:inline;实例：div{ width:100px; height:100px; float:left; margin:10px; display:inline:}...原创 2015-08-10 09:44:52 · 488 阅读 · 0 评论