网页前端设计

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。阅读目录1. 问题的引出2. 简单问题简单解决3. 网易的做法4. 淘宝的做法5. 比较网易与淘宝的做法6. 如何与设计协作7. 总结1. 问题的引出最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-s...未完，继续阅读→

做手机版网页的时候发现使用UC浏览器的时候不能手动复制内容的Bug 一直找也找不到问题。然后就自己从页面找问题发现页面有使用<meta name="browsermode" content="application"/>时UC 浏览器不能复制网页中的内容。所以在这里记录下来。希望能帮助到那些碰到过一样问题的朋友提个醒。顺便在这里贴一个我使用的手机默认设置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/><meta name=&qu...未完，继续阅读→

做微信站点的开发的时候，我们有需求只允许微信来访问网页。可行的一种方法是按照浏览器UA来判断是否是微信。下面是我抓取到的UA：Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12A365 MicroMessenger/5.4.1 NetType/WIFI我们可以通过MicroMessenger关键词来判断是否是微信了。方法如下：js方法function is_weixin(){ var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger"){ return true; }else{ return fa...未完，继续阅读→

引导语：人生的路上我们每个人都背负着各种各样的十字架在艰难前行。它也许是我们的学习，也许是我们的工作，也许是我们必须承担的责任和义务。但是，这也是这些责任和义务，构成了我们在这个世界上存在着的理由和价值。第一幅漫画中，每个人都背负着一个沉重的十字架，在缓慢而艰难地前行！途中，有一个人忽然停了下来。他在想着什么！他想，上帝啊，这个十字架太沉重了，我可以把十字架砍掉一块！于是他动手砍了起来！砍掉之后走起来，的确是轻松了很多，他的步伐也不由得加快了。就这样走啊走啊！走着走着，他觉得肩上的十字架还是很沉，很重...未完，继续阅读→

lightbox类效果为了让图片居中显示而使用预加载，需要等待完全加载完毕才能显示，体验不佳（如filick相册的全屏效果）。javascript无法获取img文件头数据，真的是这样吗？本文通过一个巧妙的方法让javascript获取它。这是大部分人使用预加载获取图片大小的例子：var imgLoad = function (url, callback) {var img = new Image();img.src = url;if (img.complete) {callback(img.width, img.height);} else {img.onload = function () {callback(img.width, img.height);img.onload = null;};};};可以看到上面必须等待图片加载完...未完，继续阅读→

可依靠的唯有自己　　这是发生在一个普通犹太人家庭里，父亲和儿子的故事：　　儿子叫约翰，在他4岁那年，有一天他和姐姐在客厅玩捉迷藏。他们玩得正高兴，父亲抱起小约翰，把他放在沙发椅上面，然后伸出双手做出接的姿势，叫他往下跳。小约翰毫不犹豫地往下跳，在即将抓住父亲的瞬间，父亲缩回了双手，约翰摔到了地板上，他号啕大哭起来。小约翰向坐在沙发上的妈妈求助，妈妈若无其事地坐着，并不去扶他，只是微笑着说：“呵，好坏的爸爸！”父亲站在一边，以嘲弄的眼光望着上当受骗的小约翰。　　这便是犹太家庭教子的方法之一，这样做的...未完，继续阅读→

一、开篇现在经常可以在网络上看到一些非常奇特的表单元素，例如Checkbox复选框和Radiobox单选框，而且更让 人蛋疼的是各个浏览器的样式还不统一，今天做了一个用标签模拟checkbox与radio的实例，主要是是近做手机 web App时发现默认的样式很不好看。所以突然就做了下，先来看看 预览图： 二、主要思路模拟的作用是为了给用户更好的体验效果，在代码中使用的时候隐藏真实checkbox或radio按钮。然后用相关标签做效果并且结合JS实现真实的input与效果的值是统一的。如下源代码：<span class="label"><em cla...未完，继续阅读→

本实例是一款非常实用的jquery 特效，实现了时间轴效果，应用场景很广，最适合用于描述公司成长历程，可以列出哪年公司的发展经历，整体看来非常简洁大气，以年份做为节点，可灵活设置左右滚动控制显示。效果真的不错。效果代码如下：实例链接：http://www.86y.org/DEMO/history/下载地址：http://pan.baidu.com/s/1mi0NEPy  密码: t165（完）未完，继续阅读→

一、功能描述：滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代 码:$(window).scrollTop()+$(window).height()>=$(document).height();再给window绑定scroll事件来实现加载数据显示。本实例的主要是提供手机版使用所以使用了CSS3的旋转模拟图片加载效果。在实例中实现了自动判断是否已经具备滚动事件的条件，如果高度不足自动补充下一页，直接满足滚动事件能...未完，继续阅读→

本实例是由JQ库写的JQ倒计时实例，使用的是上下切换显示。使用方法简单易用。只是写法过程中使用的比较笨的方法，大家可以修改并改良本实例。本实例的思路是根据倒计时的时间分为：天时分秒，所以大块需要分开,然后每一块又要细分，具体到每个数字一个标签，然后对比哪些数据有变化然后切换变化的数字切换时需要另一个标签来做效果，但是另一个标签的值是旧值（说的不是很清楚，看的懂的）。使用方法非常简单支持自定义结束内容提示!代码如下：<div class="lefttime" date="2015-10-8 21:58:00" overtext=&qu...未完，继续阅读→

我使用的是Newtonsoft.Json(下载地址：http://download.csdn.net/detail/xinping_168/4710720)组件，看人家教程写着使用json解析还要先定义JSON里面每个字段的类型什么的感觉太麻烦了，也许序列转换比较方便。但是有时候我只需要获取里面的值就行了。那么可以使用我这个方法了。更简洁方便。json数据格式{'data': { 'personal': { 'name': '宋华勇', 'sex': '男','height':'175cm','age':'30','school&#...未完，继续阅读→

本人一直在前端做效果切图，趁着晚上有空写点笔记记录下。效果就是AJAX上传图片不错的效果，最大的特点是支持多个同时在页面中调用。（底部附源代码下载）效果如下图：本代码使用说明：1、支持水印，可以启用图片或文字（可以传参数?iswater=1）；2、支持是否生成缩略图，并且要指定高宽大小（可作为参数传递?width=*&height=*）；3、上传文件类型及文件大小限止大小；（需要在ashx文件中设置）。前端代码如下：(uploadimg.html)<%@ Page Language="C#" AutoEventWireup="true" CodeFile="uploadimg.aspx.cs&...未完，继续阅读→

　　手机端应用讲究速度快，体验好。刚好手头上的一个项目服务端接口有性能问题，需要进行优化。在接口多次修改中，实体添加了很多字段用于中间计算或者存储，然后最终用Newtonsoft.Json进行序列化返回数据，经过分析一个简单的列表接口每一行数据返回了16个字段，但是手机APP端只用到了其中7个字段，剩余9个字段的数据全部都是多余的，如果接口返回数据为40K大小，也就是说大约20K的数据为无效数据，3G网络下20K下载差不多需要1s，不返回无效数据至少可以节约1s的时间，大大提高用户体验。本篇将为大家介绍Newtonsoft.Json的一些高级用...未完，继续阅读→

html5中，在新增加和废除很多元素的同时，也增加和废除了很多属性。一、新增属性1、表单属性a、autofocus对input[所有类型]、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性，同时设置多个，则第一个生效。这个属性对登录页面很有用，可提升用户体验，有时登录页面就一个用户名，密码，页面加载后用户要手动定位到输入框，才能输入，有了autofocus，页面打开即可直接输入。举例：<form><p>用户名：<input type="text" auto...未完，继续阅读→

1. rem"em" 单位是我们开发中比较常用到的，它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小；“rem” 中的 “r” 代表 “root”，它表示以根（即“html”）元素的单位大小为基准来设置当前元素的单位大小，所以不管当前元素是任意子节点，一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的，这里的 “em” 和 “rem” 均具有继承性。2. vw 和 vh（移动端开发个人最喜欢的单位属性，也是这次介绍的重点...未完，继续阅读→

之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。　　position:fixed在ios和android的使用，而ios4（4以及以前）系统以及以前的安卓系统（2.3及以前）并不支持position:fixed。这个问题可以使用iScroll框架进行解决。　　之前一直都在使用iScroll4.0版本，后来查到iScroll5已经比较稳定了...未完，继续阅读→

1.对自己好点，因为一辈子不长；对身边的人好点，因为下辈子不一定能够遇见！2.对不起是一种真诚，没关系是一种风度。如果你付出了真诚，却得不到风度，那只能说明对方的无知与粗俗！3.如果你知道去哪﹐全世界都會為你讓路。4.我喜欢你，很久了，等你，也很久了，现在，我要离开，比很久很久还要久......5.纯，属虚构。乱，是佳人。6.一个人只有一个心脏，却有两个心房。一个住着快乐；一个住着悲伤。不要笑得太大声，不然会吵醒旁边的悲伤。7.世界上最远的距离不是树与树的距离而是同根生长的树枝却无法在风中相依8.苹果最光辉的一刻就是砸在牛顿...未完，继续阅读→

在网上下载iscroll之后，运行测试到第二个demo 时，在火狐上面运行非常好，但是当我用手机测试的时候，我发 现，div中链接无法点击，此在网上也找不到相对应的解决方案，于是再检查看看其他的例子是不是也不能点击的时候，click例子在眼前一亮，click 案例里面的链接是可以点击的，于是乎，我对比了两个例子的调用插件js，果然是js的原因myScroll = new IScroll('#wrapper'); click jsmyScroll = new IScroll('#wrapper', { mouseWheel: true, click: true }); 发现在js里面有click:true，我想，问题我找...未完，继续阅读→

相信很多人都碰到过这个问题，文件上传控件透明后有的要点击两次才能弹出选择文件窗口，这里将将介绍如何避免要双击，只需要单击是可以实现的。 本来一直无心留意这个图片上传file按钮的BUG，因为有时候为了效果好看有时候我们要做点什么比如隐藏input模拟点击。FF可以chrome也可 以，唯独IE不行，报安全错误。所以还是得找方法解决，最终在某网站找到了，只是把input按钮的透明度改为0然后定位到最顶层，虽然透明，不表示没 有，这样点击上传时不影响效果又能实现所要的效果。真心不错。方法其实很简单。下面就介绍如何操作。示例效果解...未完，继续阅读→

在新的手机项目中有要求对多张图片进行浏览，所以本人也是在网上找了很多都没有找到合适的代码，后来在某网站上找了一个改成了自己的比较好用，而且没有某网站那样调用JSON，这样感觉就通用，而且很方便，可以对多个区域进行调用即。底部附源代码下载一、效果图下图所示：放大浏览图内容 主要div 源代码如下：<!-- 放大浏览图开始 --><div class="m-dt" id="Jslider"> <div class="swipe-wrap" id="Jslider-wrap"> <div class="swipe-con"><...未完，继续阅读→