分类：: 前端

2015
0

前端

兼容性小结(1)

开学了。我又忘记更博了。啊~ 这次记录了一些兼容性的东西： RM8005: IE6 IE7 IE8(Q)行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部。 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落：A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box. 由上面的描述可以得到以下结论：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。 此问题的触发条件:同一个父容器内有多个行内元素；某些为非浮动元素，某些为浮动元素（可以是左浮动或右浮动）；浮动的子元素不都是位于非浮动的子元素之前。

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>