html5
水痕01
暂停更新博客
展开
-
记录一个常见的二列布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>两列布局</t原创 2020-06-03 17:35:17 · 289 阅读 · 0 评论 -
关于HTML5中的拖拽
一、常用的事件dragdragstart 开始拖拽dragend 拖拽结束dragover 拖拽到指定容器上面dragenter 拖拽进入到指定容器dragleave 拖拽离开指定容器drop 拖拽放下二、具体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view原创 2017-11-01 16:16:16 · 734 阅读 · 0 评论 -
HTML5部分新属性的认识
一、HTML5中新增几个全局属性1、contenteditable是否可支持编辑:true表示可以false表示不可以2、tabindex值为数字:表示按键盘tab键先切换到哪里3、hiddlen布尔值,表示隐藏元素,但是会渲染该DOM节点二、HTML5中新增的事件 NO 事件 触发时机 代码案例 1 beforeprint 打印前触发 2 after原创 2017-06-23 14:21:09 · 560 阅读 · 0 评论 -
关于前端代码重构注意的几个点
前端代码重构主要有下面几点一、删除无用代码,精简代码1、删除无用的css和javascript,删除javascript中已经无用的方法二、前端代码规范1、把页面中内联样式及头部样式提取到单独的css文件中2、调整代码的缩进3、更改标注已经不支持的标签如:<b>4、在javascript中减少全局变量的使用,缩小变量的作用域5、整理基础类库,减少因为版本的问题造成多个文件三、前端代码原创 2017-06-22 11:24:23 · 3278 阅读 · 0 评论 -
handlebars.js模版引擎中EACH循环遍历的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/handlebars.js/4.0.原创 2017-04-05 15:41:21 · 4965 阅读 · 2 评论 -
利用radio实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>radio选项卡切换</title> <style type="text/css"> *{margin:0;padding:0;} .test-box{width: 50%;margin: 10px aut原创 2017-04-04 22:55:55 · 2843 阅读 · 0 评论 -
css样式实现一个进度条
效果如图代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords"原创 2017-04-04 22:46:02 · 8421 阅读 · 0 评论 -
关于常见的左右赋权限的移动样式
效果如图:代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖拽演示</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <style type原创 2017-04-04 22:40:57 · 725 阅读 · 0 评论 -
css修改单选框与复选框样式
在移动端开发中往往要修改单选框与复选框的样式 案例效果如下: 代码如下:html代码:<section class="select-f select-f1"> <dl> <dt>您要选择装饰家居的原因是?<a href="javascript:void(0);" class="select-f1-allbtn">(全选原创 2017-04-04 22:34:03 · 2740 阅读 · 0 评论 -
关于H5页面开发适配指南
说明:本人习惯性的直接上代码,不想用太多的文字去表述一、html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var dpr, rem, scale; //人为给头原创 2017-03-23 10:41:02 · 1053 阅读 · 0 评论