今天测试移动端页面使用谷歌浏览器的手机模拟器测试页面效果时发现和手机看的效果有差异，因此想在本地搭建一个简单的web服务器，通过谷歌浏览器安装一个在线二维码生成工具，在浏览器工具栏上显示，点击生成当前url的二维码，通过手机微信扫聊二维码浏览本地制作的页面，这样非常方便移动端页面的查看调试，由于效果需要不断查看修改后的效果，在手机微信浏览器右上角下拉菜单里有刷新选项，通过刷新查看效果，还好公司有wifi不用费自己的流量。那么接着问题来了，如何高效的搭建一个操作简单方便的web服务器呢，马上想到了node.js帮助你…
css部分： .btonshare{ width:80%; height:50px; float:left; background:#16bb5c; margin:0 10%; margin-top:15px;text-align:center; color:#fff; line-height:50px; border-radius:10px;} #cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#00…
一、为何选择jquery validate这个表单验证插件 自己写一个通用没有bug而且强大的jquery表单验证插件并不容易，jquery validate表单验证插件功能强大通用好用，jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证。 二、jquery validate表单验证如何调用？ 1、引用jquery.min.js和jquery.validate.js 由于jquery.validate.js是jquery插件，需要依赖jquery支持，因此必须先引用jquery.…
See the Pen doQwbv by cywcd (@webzsky) on CodePen. 屏幕的缩放及初始大小 添加到主屏幕全屏,图标等 苹果设备默认的工具栏和菜单栏 苹果设备状态栏样式 苹果设备自动识别电话、邮箱相关 屏幕的缩放及初始大小 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=…
inline|block|inline-block整体上的区别 1、在概念上说：inline和block完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满；inline-block为内联块元素，既可以不产生换行，还保留块元素宽高和边距的属性。 2、布局级别上说：HTML元素各有其自身的布局级别（block…
hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。 haslayout是怎么来的？ 为了解决这个问题，微软的天才coder决定去修理他们的这个古老的引擎，因此haslayout这个属性就诞生了。每…
清除浮动是web前端工程师的必修课，下面就清除浮动的方法进行归纳整理及优缺点分析 方法一：DIV闭合处，加<div class=”clear”></div> (.clear{clear:both}) 代码如下： <div class=”div1″> <div class=”left”>我是左浮动</div> <div class=”right”>我是右浮动</div> <div class=”clear”></di…
页面制作中大渐变背景色切图非常影响页面打开速度，下面给出解决渐变背景色css解决方案供参考 filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#fcf8f3); background: -ms-linear-gradient(top, #ffffff, #fcf8f3); background: -moz-linear-gradient(top, #ffffff,#fc…
html页面切换过度效果实现方法很简单，但是对于浏览器的设置有需求，经过测试IE浏览器的默认设置没有问题，但是其他浏览器需要进行设置才可以。 实现方法就是：利用文本头的 <meta> 标记实现页面过渡效果，具体说明如下： IE要求: 在IE5.5及以上版本的浏览器中. 启用网页过渡效果 默认情况下都已经启用了，如果需要手动启用则只需在Internet选项中： Advanced（高级） - Browsing（浏览） - Enable page transitions（启用页面过渡）即可。 应用…