归档: 2015/4

2015
0

益米主页总结(1)

在做益米的主页时，又学到了很多新知识：CSS3动画，SEO，JS事件处理等等。设计师很给力，我也在努力重构出他想要的效果。最终页面：益米，让校园生活轻松自在 开始设计师是做好一个模块就丢给我。所以我刚开始也是一个模块一个模块的重构。做完5个模块后总设计图就发给我了。然后就是直接把HTML和LESS拼接在一起。大概的样子就出来了。不过第一次这么做也出现了一些问题，记录一下： 模块命名最好在项目开始的时候就定义好各种基本模块的名字，比如：1<div class="module-container"></div> 然后确定好容器的宽度，以及在总页面中是怎么呈现。后来定义的是这样：1.module-container {width: 1110px;margin: 0 auto;} 实际中这个并不是最外层的容器。需要另外一个div来包裹，设置宽度啊背景啊什么的：1.w100p {width: 100%;min-width: 1200px;background-color: #EDF4F9;} 然后秉承着padding和宽度分离的原则，在w100p类之下再设置一个内边距，来控制内容在一整个区块中的上下距离：1.p100 {padding: 100px 0;} 其实我没有量设计图的距离…就让内容看起来是居中的。不过让内容垂直居中其实有很多办法，以后再讲。 CSS3 动画动画都单独放在一个CSS里面。

0

前端

微信浏览器跳转相关

在做益米的下载页的时候发现微信浏览器有些地方需要注意。 链接跳转跳转苹果App Store：第一次是设置链接为https://appsto.re/cn/z3aa6.i发现在微信里这个链接不能跳转，查了资料后发现有一种方法：微信中打开app store连接。意思就是微信会内部把链接重定向，判断是App Store就阻止掉。所以在页面里面改写链接，改成在他们域名下，再使用JS进行跳转。具体方法是前面加上http://mp.weixin.qq.com/mp/再重定向：redirect?url=后面再把原来的链接里的冒号改成%3A，斜杠改为%2F。所以链接变成了：http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fappsto.re%2Fcn%2Fz3aa6.i 尝试之后发现这个方法已经失效了。 无奈之下使用引导用户使用safari打开： 引导跳转制作遮罩层：12345<div id="popweixin"> <div class="tip"> <img src="images/weixinpopup.png" alt=""> </div></div> 123456789101112131415161718192021222324#popweixin{ width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 1000; background: rgba(0,0,0,0.5); top: 0; left: 0; display: none;}#popweixin .tip { width: 100%; background: #FFF; z-index: 1001;}#popweixin img { width: 100%;}

0

前端

JavaScipt事件(2)

跨浏览器的事件处理程序1234567891011121314151617181920var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } },} 顺序 DOM2级方法：false表示在冒泡阶段调用 IE8下的方法执行顺序 DOM0级最不提倡的方法（现代浏览器不执行）