html

容易混淆的client-*,scroll-*,offset-*

容易混淆client-,scroll-,offset-*Truth comes from practice 上来不说话,先抛出几个问题:offsetWidth offsetHeight offsetLeft offsetTopclientWidth clientHeight clientLeft clientTopscrollWidth scrollHeight scrol

切图崽的自我修养-SeaJs重要概念剖析

前言高能预警,前方山路十八弯在上一篇文章里简单的讨论了一下模块化Js, 先来回顾一下目前模块化的两大规范:CommonJs 同步加载模块规范AMD/CMD 异步加载模块规范其中CMD规范的产出是国内目前十分火爆的SeaJs, 这篇文章主要是解释几个使用SeaJs会碰到的重要概念具名模块匿名模块路径即ID原则匿名模块SeaJs定义匿名模块一般采用如下的方式:define(f

浅谈line-height

基础知识有4种模型,分别是块,块盒模型 containing boxing,包括line行内盒模型 inline boxing ,包含content行模型 line boxing,包含inline,line高度是由最高的inline元素决定.内容区域 content area这部分内容可以着重看 这里有详细的介绍。line-height与line boxes高度由上面的内容

切图崽的自我修养-优化图片加载流程

前言优化! 又是优化!切图崽们作为整个web应用的纽带,连接着用户行为和机器性能. 而优化的最终意义,在于在这两者之间取得一个最佳的平衡点.对于图片资源的加载来说,更是如此. 今天我们就来简单说说,项目开发中常见的图片加载优化方式.预加载1.遮罩大法我们经常用jquery, jquery中$(function){})实际上是DOMContentLoaded事件完成的回调,只

Tree v3.5 Demo 演示 OutLook 样式的左侧菜单

简介为了让朋友们更容易的学习 zTree,官网给出了大量的 Demo,不同的图标,不同的风格,好学易懂,这是官网链接:zTree v3.5 Demo 演示。由于工作需要,这里只是把组合功能中OutLook 样式的左侧菜单参考Demo源码实现了,分享给大家我的学习所得。Html和CSS下载zTree v3.5 Demo 演示的源码,将下图所示的文件整合出来,并创建一个outl

HTML语义化和SEO优化

什么是HTML语义化?  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。为什么要语义化?为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;有利于SEO:和搜索引擎建立良好沟通,有

纯CSS实现扁平化风格开关按钮

开关样式预览图css代码部分input[type=checkbox] {visibility: hidden;}.checkbox {width: 120px;height: 30px;background: # FFF;margin: 1px 1px;border-radius: 10px;position: relative;}.checkbox:before {con

web全栈开发修仙传之html5语义化

语义化的意义在于:让html代码优雅易读好维护。 一切尽在代码中 web全栈开发修仙传之html5语义化## web全栈开发修仙传1. 文章1. 问答1. 招聘1. 文章1. web全栈1. web全栈开发修仙传# web全栈开发修仙传1. 时间:2016-07-071. 作者:高久力1. 评论数:500## 创业公司对于创业公司来说,全栈工程师的价值是非常大的,创业公司不

CSS不常用属性---Tips2背景

backgrounddiv{ background: red url(img.png) no-repeat scroll left top/100% border-box content-box;}对应的属性全称[background-color][background-image][background-repeat][background-attachment][

发送短信验证,后按钮倒计时,防止刷新倒计时失效

应用场景在开发“发送短信验证”功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时”。如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击。提供以下解决方案:利用cookie存储倒计时利用HTML5的localS