前端开发规范手册2.0

2016-5-10 Jon html+css

目录   一、规范目的   二、文件存放及命名规范   三、html书写规范   四、css 书写规范   五、js书写规范   六、图片规范   七、实践建议 一、规范目的   1.1 概述   　为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改此文档. 二、文件存放及命名规范   2.1 ...

阅读全文>>

标签: 规范

评论(0) 浏览(4750)

纯css实现兼容很好的点击看大图实例

2015-10-17 Jon html+css

css点击看大图demo 点击看大图 .showimg>img{width: 200px;} span{display: none;position:fixed; width: 100%;height: 100%;left:0;top:0;z-index:20;opacity: 0} .showimg:focus+span{display: block;} .showimg:focus:before{position:fixed;content:...

阅读全文>>

标签: 大图查看

评论(0) 浏览(5551)

图片水平垂直都居中，兼容ie7及以上和主流浏览器

2015-9-28 Jon html+css

图片水平垂直都居中，亲测兼容ie7及以上和其他主流浏览器 图片水平垂直都居中，兼容ie7及以上和主流浏览器 *{margin:0;padding:0;} ul,li{list-style:none;} .list{width:800px;margin:0 auto;} .list li{text-align:center;float:left;line-height: 30px;width:33.3%;margin-top:20px;} ...

阅读全文>>

标签: 图片

评论(0) 浏览(2974)

聊聊既熟悉又陌生的div+css布局

2015-6-27 Jon html+css

首先说说最简单的两列自适应布局无外乎是给两列都设置百分比，但很多情况下这种布局并不能解决需求。 例如：下面这种一列限定宽度，一列自适应。 两列布局方法一-勿恨水长东 .clearfix:before, .clearfix:after {display: table;content: " ";} .clearfix:after {clear: both;} .clearfix {*zoom: 1;} *{margin:0;padding:0;} body{...

阅读全文>>

标签: 布局

评论(0) 浏览(2811)

html5画布canvas效果实例

2015-5-21 Jon html+css

使用html5画布canvas实现简单画板 简单画板 body{margin:0;} #paint{border:1px solid #232323;} 您的浏览器不支持canvas var oPaint=document.getElementById('paint'); var cxt=oPaint.getContext('2d'); cxt.lineWidth=3; cxt.strokeStyle="blue"; var ...

阅读全文>>

标签: canvas

评论(0) 浏览(2979)

html基础零碎知识大总结

2015-5-18 Jon html+css

一、以下是html最基础的一些标签 1，meta标签 <!-- 设置多少秒后重新加载页面到链接指定处 -->     <meta http-equiv="refresh" content="1;url=http://yuanqiao.comxa.com/"> <!-- 让其以本机最新的内核渲染 -->     <meta name="renderer" content="webkit">    &...

阅读全文>>

标签: html

评论(0) 浏览(2594)

html5视频音频标签使用&&使用视频做背景

2015-5-13 Jon html+css

html5视频音频标签使用 html5视频音频标签使用 使用video的API 你的浏览器可以换了 播放 快进10秒 快退10秒 静音 加速播放 减速播放 正常播放 声音++ 声音-- // 获取对应的video标签 var video=document.getElementById('video'); //播放方法 function bozan(obj){ if(v...

阅读全文>>

标签: 使用视频做背景 video标签使用

评论(0) 浏览(2938)

让浏览器1秒变成编辑器，尽情践踏吧！

2015-5-13 Jon html+css

可以随意修改的文字，尽情践踏吧！ 随意修改的文字 body{background: #ccc;padding:30px 350px;color:#330000;font-size:14px;line-height: 26px;} 我可以在这里写文字，我也可以删除其他文字 风过也 路三千 良辰美景都看遍 南淮月 楼船雪 终不似当年 ——finale。《乱世歌行》 春水汤汤 一时无涯 柳絮轻软 长安尽飞花 春雨搂头 横吹尺八 青衫洗旧 客京华 ——...

阅读全文>>

标签: contenteditable属性 让浏览器成编辑器

评论(0) 浏览(2702)

设置网页地址栏前面的标志图标 favicon.ico

2015-5-11 Jon html+css

介绍一下怎么设置网页地址栏前面的标志图标 favicon.ico favicon.ico 是一种格式，一般用于网页地址栏前或者在标签上以缩略方式显示网站标志，也可以拖曳favicon到桌面以建立到网站的快捷方式。 为什么要设置 favicon图标？ 以图像形态显示，比文字显示更能加深浏览者的记忆和印像。 可以塑造网站的品牌。这也是在网站推广的范畴之内。 可 以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站，给人以更专业的感觉。 设置方法： 制作一个16×16像素的图像（logo），也可以制作一个200×200像素的图像或更大，然后等比列缩小为1...

阅读全文>>

评论(2) 浏览(3198)

js获取浏览器、文档、body的宽度和高度的DOM/BOM方法

2015-4-13 Jon html+css

    document.body.offsetWidth返回body的offsetWidth(包括边框)      document.body.offsetHeight返回body的offsetHeight(包括边框)      网页可见区域宽：document.body.clientWidth      网页可见区域高：document.body.clientHeight      document.body.clientw...

阅读全文>>

标签: 获取浏览器、文档宽高

评论(0) 浏览(3015)