主页

2015
0

前端

移动端重构小结(1)

前言：我是大懒虫Orz。一个月没有更新了=。=检讨一下。主要是在做一个移动端的app网页还有完成QT的作业还有过年还有益米的事情。真的要好好总结一下才能提升自己！ 初始化meta标签<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />移动端的页面一定会用到的meta标签。相关概念： meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持 主要参数有下面几个： maximum-scale：用户可以缩放的最大值 minimum-scale：用户可以缩放的最小值 initial-scale：viewport的默认缩放大小 width：固定viewport的宽度 height：固定viewport的高度 user-scalable：是否允许用户缩放 前三个参数都是缩放相关的，它们的值是viewport的缩放大小，他们仅仅改变缩放大小，并不是改变viewport的实际大小。 之后就是width和height，修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器（页面区域）在屏幕上的默认大小。可以是具体的数值，也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上，防止出现横向滚动条就可以使用 最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样 参考：移动端的meta viewport 更详细的文章：移动前端开发之viewport的深入理解

0

前端

JS-动画框架

慕课网教程地址：JS动画效果 速度动画本门教程的基础。实现的是分享按钮的移出。首先要知道一个东西：定时器 HTML DOM setInterval() 方法定义和用法setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法setInterval(code,millisec[,"lang"])–W3Cschool 网页中的JS就是不断的执行改变属性的函数，比如距离，透明度来达到动画的效果:timer = setInterval(function (){},30)后面的就是时间啦，每隔多少秒重复执行前面的（匿名）函数。用clearInterval(timer)来结束计时器。最基本的代码：1234567891011121314151617181920212223242526272829window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function () { startMove(0); } oDiv.onmouseout = function () { startMove(-200); }}var timer = null;function startMove (iTarget) { clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function () { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -10; }else{ speed = 10; } if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30)} 首先是鼠标一入一出的时候执行函数。 当函数的开头没有clearInterval(timer)时，每次移入DIV就会触发一次定时器：timer = setInterval()，旧的定时器还没关闭，新的定时器就开始工作了，就会造成叠加，速度就会不是匀速运动而是越来越快（鼠标放在上面越久） 下面的逻辑就通过对动画的分析能知道应该怎么写。

0

前端

前端练习-大讲堂(2)

中午了=。= 等爸爸回来吃饭~先写点东西。 全局定义清除浮动：在HTML里加上.clear-fix1234567891011.clear-fix:after{ content: ""; display: table; clear: both;}.clear-fix { *zoom: 1;} 为了IE6/7/8兼容性，解决:after不支持的问题，加上zoom:1; 兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。 出处：CSS中zoom:1的作用 ，小标签大作用

0

前端

前端练习-大讲堂(1)

本来参加的实习因为各种原因现在还没有设计图发下来= = 所以先打点其他的作业练手练手。大概用了两天的下午重构，以及一个多小时弄兼容性=。= 虽然最后IE7还是没解决好。先写下这些东西了。 设计图其实可以在网上找到原型的~给成长加点料-腾讯大讲堂只不过现在排版什么都更新了。重构后地址：DJT.QQ.COM HTML&CSS&JS这次尝试用了HTML5的标签，发现还有很多地方不熟悉。基本的标签有 header footer article section nav 嗯 这几个用的比较多。摘抄一些网上的经验： HTML对IE6/7/8的兼容 在JS中创造HTML5的标签：123456(function(){ var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption']; for (var i = 0; i < element.length; i++) { document.createElement(element[i]); }; })();

0

前端

CSS基础补充(1)

在给别人讲解一些重构的内容的时候，发现自己还有好多基础没有补上=。= 平时都是打完页面就没有想太多东西，或者解决了问题没有总结。 于是乎看了一些文章，在这里记录一下。 盒子模型 内边距外边距不会遮挡后面的元素 在 CSS 中，width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 外边距可以是负值，而且在很多情况下都要使用负值的外边距。 在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。 margin百分比：相对于父元素 避免浏览器变小浮动乱跑：在所有盒子外面包裹一个container,确定宽度并使他居中 注意padding和width不要一起用。当设置width为100%的时候，会得到浏览器窗口的大小，但是padding却是另外计算的，所以会出现水平滚动条，多出来的padding撑出屏幕。

0

前端

下拉菜单(2)

你知道我这几天都在干嘛吗^_^今天下午买的手柄到了！！！好开熏。

0

前端

前端练习-Agentur(2)

区块blockHTML1234567<div class="block"> <img src="images/schaefer.jpg" alt="" class="blimg"> <div class="blcon"> <p>„Große Ideen haben eine unbändige Kraft. Bei Konzeption und Interface Design helfen wir, aus Ideen nachhaltige digitale Produkte zu entwickeln. Dabei stehen stets der User und die Zielsetzung im Mittelpunkt.“</p> <p class="author">- Christoph Schäfer, Interface Design & Web Development</p> </div></div> CSS123456789101112131415161718192021222324252627282930313233343536.block{ width: 100%; background-color: #F0694B; height: 300px;}.blimg { margin-left: 16px; height: 300px; float: left;}.blcon{ color: #FFF; float: left;/* width: 950px;*//* 加了宽度才能浮动到上面 */ padding: 45px 50px 50px 30px; font-size: 32px; line-height: 40px;/* 发现在这里设置margin到了比较窄的屏幕 文字会被挤下去 */ width: 855px;/* 来个固定的宽度就能解决问题啦 只是用Padding宽度会满屏 *//* 解决个毛线问题=。= */}.block .author/* 是用这种方法来写好 还是加个div在里面？标签不用加class*/{ color: #F6C3C9; font-size: 15px; margin-top: 18px;} 要说的都在注释里面了= =。一边打代码一遍写注释好欢乐的样子。

0

前端

前端练习-Agentur(1)

HTML&CSSCSS初始化123456* {margin: 0; padding: 0; }a {color: #FFF; text-decoration: none; }::selection {background: #F0694B; color: #FFF;}::-moz-selection {background: #F0694B; color: #FFF;}/*.content::selection {color: #FFF;}.content::-moz-selection {color: #FFF;}*/ 啊这个自带的代码高亮好丑啊~刚开始没有在意用了*，现在改过来。body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}嗯，改成这样。然后是超链接的样式，去掉下划线，改变颜色。接下来是新学到的东西：元素状态伪类::selection: {attibute} 然后刚好用的是FF,刚开始怎么也没有效果，加上-moz-.

0

前端

下拉菜单

最近几天在看慕课网上的前端视频。主要是下拉菜单的制作。先把代码贴上去，以后慢慢总结(考试周伤不起啊~~(那你还去看前端…)) 贴几个经典的吧： 1. 最普通的下拉菜单1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nav</title> <style> * {margin: 0; padding: 0; } div {width: 960px; height: 40px; margin: 0 auto; background-color: #eee;} ul {list-style: none; } ul li {position: relative; float: left; line-height: 40px; text-align: center; } a {display: block; text-decoration: none; color: #000; padding: 0 10px; height: 40px; } a:hover {color: #fff; background-color: #000;} ul li ul li {float: none; background-color: #eee; margin-top: 2px;} ul li ul {position: absolute; left: 0; top: 40px; display: none;} ul li ul li a{ width:80px;} ul li ul li a:hover {background-color: #06F;} ul li:hover ul{display: block;} </style></head><body> <div> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">课堂大厅</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div></body></html>

0

知识积累

Thinkphp学习笔记(2)

3.主页作品展示模块 foreach不能直接修改数组的内容，如果要修改使用(引用传递)： 1foreach ($list as $key => &$value) html文件内容只需要写一个li就可以了，使用<volist name="" id="" ></volist>来调用后台数据。 如果html文件是用<ul><li>来展示图片，<volist>标签要放到<ul>后<li>前;如果是div布局，放在div前。分页数字使用$page. 把逻辑代码都整合到Model中，在控制器中调用。如果需要重复的代码，用A方法实例化控制器，再调用控制器的方法。当需要不同的参数时再设置传入的变量，还可以设置变量的默认值。 4.作品详情模块 html中修改链接的地址：1__URL__/buying?id=$vo.id 使用get方法把作品的唯一id传递到控制器中。 注意不要混淆登陆信息与作品信息。当对一个一维数组进行foreach时可能造成乱码 按照相同原理进行数据的读取，赋值，渲染。