新手学习html+css+js
Zach-vip
学无止境!!!
展开
-
通过js获取cookie的实例及简单分析
今天review新人写的javascript代码的时候发现了很多的问题。这里以function getCookie(name){}为例。其中比较典型的一个问题就是如何通过javascript获取cookie里面的一个值。 那么我们先来看看cookie到底长什么样子呢?直接在浏览器地址栏输入: javascript:alert(document.cookie); 回车。(这行代码的意思是,让转载 2015-12-04 23:36:43 · 524 阅读 · 0 评论 -
每天学一点6
1.void运算符:作用于任何值都将返回undefined,常用屏蔽超链接的返回值 举例:凤凰网2.window.prompt()弹出一个输入对话框语法格式:prompt(text[,defaultText])参数说明: Text:提示信息; defaultText:是可选项,是输入框中默认显示的文本返回值:如果点“确定原创 2015-07-08 23:27:52 · 329 阅读 · 0 评论 -
页面载入完成后执行多个函数。
页面载入完成以后会触发一个事件,这个事件是附加在窗口对象的onload事件。原创 2015-05-24 19:01:49 · 1205 阅读 · 0 评论 -
经典面试题:如何让DIV水平和垂直居中
CSS让DIV水平居中说明,本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。 .mydiv{ margin:0 auto; width:300px; height:200px; }原创 2015-06-24 21:36:59 · 2867 阅读 · 0 评论 -
IE6 浏览器常见兼容问题 大汇总(23个)
1.文档类型的声明。产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象;解决办法:书写文档声明。2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁。产生条件:不同浏览器;解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置。3.横向双倍外边距产生条件:在IE6中块元素浮动后,会出现横向双倍转载 2015-05-24 02:38:28 · 480 阅读 · 0 评论 -
交互设计技巧——创造好的用户体验(2)(翻译)
21. 尝试平滑过渡而不是突兀呈现 当用户进行操作的时候,界面元素经常会有出现、隐藏、移动、转换以及大小调整的动作。作为对操作的回应,为元素变化适当添加时间延迟有时候让用户更容易理解刚刚发生了什么。以动画或者过渡的形式刻意制造的延时,给了用户理解元素大小或者位置变化的必要的反应时间。当然了,你也要记住,我们应该将过渡的时间控制在0.5s之内,时间太久的话,用户可能就会感到不适。对于那些只转载 2015-05-24 02:25:25 · 836 阅读 · 0 评论 -
HTML5 rgba与opacity的属性 兼容ie6/7/8/9各浏览器
在css3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值,HSL颜色值及HSLA颜色值,并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。alpha通道与opacity属性的区别opacity属性时css转载 2015-05-24 02:32:36 · 1756 阅读 · 0 评论 -
交互设计技巧——创造好的用户体验(3)(翻译)
人类与生俱来就有认知偏见,正如卡尼曼所观察到的那样,优惠是一种人类很难抵抗的偏见。这表明第一个引起我们注意的数据会影响我们的决策。当我们以一个稍微贵一点的价格开始,然后将价格降低,这个价格突然就显得不再那么贵了。如果我理解正确的话,许多用户放弃的是没有打折的商品或服务。这或许只是一个数据的效应。营销人员利用优惠效应的一个常见的例子是在制造商建议的零售价之后写一个更低的价格。 42转载 2015-05-24 02:28:16 · 1136 阅读 · 0 评论 -
每天学一点7
1.注意:任何地方省略var关键字,定义的变量都是“全局变量”,因此,一般情况下,不要省略var关键字。2.JavaScript 注释单行的注释以 //开始;多行注释以 /* 开头,以 */ 结尾3.php中 isset()函数的作用是判断一个变量是否定义过。4.内置函数str_replace可以实现字符串的替换。.例子 $arr = “苹果很好吃”; $arr原创 2015-07-13 01:56:26 · 316 阅读 · 0 评论 -
大熊君说说JS与设计模式之------代理模式Proxy
一,总体概要1,笔者浅谈当我们浏览网页时,网页中的图片有时不会立即展示出来,这就是通过虚拟代理来替代了真实的图片,而代理存储了真实图片的路径和尺寸,这就是代理方式的一种。代理模式是比较有用途的一种模式,而且 变种较多 ( 虚代理、远程代理、copy-on-write代理、保护代理、Cache代理、防火墙代理、同步代理、智能指引 ) , 应用场合覆盖从小结构到整个系统的大结构转载 2015-07-17 23:57:33 · 670 阅读 · 0 评论 -
myFocus插件的使用说明。
Step 1. 在html的标签内引入相关文件提示:符合条件的情况下,引入风格文件(js/css)可省,引入myFocus库即可。那么风格文件是如何自动引入的?详情请看myFocus的文件结构与自动引入风格文件机制。Step 2. 创建myFocus标准的html结构,并填充你的内容原创 2015-07-17 17:31:59 · 536 阅读 · 0 评论 -
HTML5 Web Workers之网站也能多线程的实现
Web Workers 是在HTML5中新增的,用来在web应用程序中实现后台处理的一种技术在HTML4中,js创建的程序都是单线程的,如果花费时间比较长的话web界面就会长时间没有响应,最恶劣的情况还会跳出一个脚本提示框:提示脚本运行时间过长,是否继续。。。。于是就引出了本文的主角:Web Workers API使用这个API用户可以非常容易的创建在后台运行的线程,要创建转载 2015-07-15 23:05:13 · 439 阅读 · 0 评论 -
IE6、 IE7、IE8、IE9、Firefox兼容性问题
1.区别IE和非IE浏览器#tip {background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/}2.区别IE6,IE7,IE8,FF转载 2015-07-11 19:40:39 · 373 阅读 · 0 评论 -
如何做好div+css的浏览器兼容性
如何做好div+css的浏览器兼容性是个头疼的事情。如果没有很好的系统规划,到后期开发的时候再东补西补 很累人。有没有一些好的 标准写出更好的div+css 的方法?总结如下:导致兼容性的原因去网上搜索一下,主要原因还是各种浏览器对于margin,以及padding还有float等几种个别的属性不兼容而已,所以我们转载 2015-07-13 00:55:18 · 620 阅读 · 0 评论 -
交互设计技巧——创造好的用户体验(1)(翻译)
一个好的用户界面具有较高的转化率和易用性。换句话说,它既能满足商业用途也便于使用。以下是我们发现的一些想法清单。 1. 尝试使用一列布局代替多列 一列布局会让你对全局有更好的掌控。它也能让你的用户预先对整体的内容从上到下有一个大致的了解。然而多列布局则会让用户从页面的核心内容上分散注意力从而增加额外的风险。最好的方法是用一个有逻辑的叙述然后在文末加上一个行动的口号来引导用户。转载 2015-05-24 02:21:00 · 769 阅读 · 0 评论 -
Javascript 多浏览器兼容性问题
一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"];Firefox 下,只能使用document.formName.elements["elementName"]。解决原创 2015-06-05 22:18:59 · 382 阅读 · 0 评论 -
javascript笔记:深入分析javascript里对象的创建(上)续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里java的程序员要少点吧,也可能是javascript使用的人太多了吧,不过写javascript的文章还是比较大众化,以后多写写javascript了。 本篇文章不是《深入分析javascr转载 2015-05-20 12:25:19 · 409 阅读 · 0 评论 -
background:url(../images/list01.png) no-repeat 0 center;详解
background:url(../images/list01.png) no-repeat 0 center;background:url(../images/bg.png) no-repeat -4px -3px;这里面的后面两个值是什么意思0 center和 -4px -3px?的意思是 图像地址 不重复 水平位置0 垂直位置居中0 center 的意思就是 水平位置0 垂直位置原创 2015-05-16 17:35:25 · 7078 阅读 · 0 评论 -
响应式网页设计教程:展示响应式设计的基本原理
响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上,它比你想象的简单得多。为了让你能快速入门,我准备了一个简易的教程。通过这三个步骤,你一定可以了解响应式设计的基本原理和media query(在你有一些CSS基础的前提下)。第一步. Meta 标签 (查看 dem转载 2015-05-01 00:09:09 · 1292 阅读 · 1 评论 -
深入了解 CSS3 新特性
现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观、用户体验更好的界面。CSS3,这个新一代的标准应运而生。为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画、元素的变换。这些 CSS 新特性在现阶段可以说翻译 2015-04-30 22:45:45 · 693 阅读 · 0 评论 -
移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a转载 2015-04-30 10:06:42 · 369 阅读 · 0 评论 -
CSS3 Media Queries
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> link href="css/style.css" rel="stylesheet" type="text/css" med转载 2015-04-30 10:28:15 · 359 阅读 · 0 评论 -
javascript笔记:深入分析javascript里对象的创建(中)
深入分析javascript里对象的创建这个小系列是我整个博客里最受欢迎的文章,有博友催我把下篇写完,昨天和今天整理资料发现一篇文章还真讲不完我下半部分的内容,所以把本来打算写的下篇分成两部分了。 本主题的上篇里我讲到了三种对象创建的方式,最后通过类比java面向对象的思想反过来理解javascript对象的创建。如果根据标题的核心对象的创建,我所阐述的问题其实已经讲完,但是我写完上篇时转载 2015-05-20 12:27:33 · 338 阅读 · 0 评论 -
javascript笔记:深入分析javascript里对象的创建(上)
今天要讲的是如何构建javascript对象。 ECMA-262对对象的定义是:无序属性的集合,其属性可以包含基本值、对象或函数。javascript的对象其实就是java里的map,即键值对。 在javascript创建一个对象一共有三种方式: 方式一:通过Object对象 方式二:通过构造函数 方式三:对象初始化 1.通过Object对象来构建对翻译 2015-05-20 12:21:40 · 398 阅读 · 0 评论 -
如何在javascript中获取dom对象
javascript dom操作!!!原创 2015-05-18 21:47:13 · 1085 阅读 · 0 评论 -
js split 的用法和定义 js split分割字符串成数组的实例代码
于js split的用法其它也不多说什么,下面直接举例给大家看看 复制代码 代码如下: str="2,2,3,5,6,6"; //这是一字符串 var strs= new Array(); //定义一数组 strs=str.split(","); //字符分割 for (i=0;i{ document.write(strs[i]+""); //分割后的字符输出原创 2015-05-18 21:35:04 · 477 阅读 · 0 评论 -
inline-block元素间的间隙问题
在我们使用inline-block时会发现元素间存在间隙,如下例所示[html] view plaincopynav> a href="#">onea> a href="#">onea> a href="#">onea> nav> [css] view pl转载 2015-05-21 23:20:01 · 480 阅读 · 0 评论 -
Number()、parseInt()和parseFloat()数值转换
有3个函数可以把非数值转化成数值:Number()、parseInt()和parseFloat()。第一个函数,即转型函数Number()可以用于任何数据类型,而另两个函数则专门用于把字符串转换成数值。这个3个函数对于同样的输入会有不同的结果。 Number()函数的转换规则如下:如果是Boolean值,true和false将分别被转换为1和0如果是是数字值,只是简单的传入和原创 2015-05-17 22:30:40 · 679 阅读 · 0 评论 -
javascript 基础,js中节点问题。文档结构问题。text节点问题
什么是节点?节点代表文档树中的一个单独的节点。节点可以是元素节点、属性节点、文本节点。 节点拥有改变文档结构的能力:如增(appendChild)、删(removeChild)、改(replaceChild)、插(inertBefore)等方法,此类方法都是属于操作文档结构的方法。 节点原型图: 什么文本节点? 文本节点是最小的节点,不能包含其他节点,仅供文本。原创 2015-05-21 15:41:12 · 517 阅读 · 0 评论 -
消除浮动》》页面局部布局详解
*{margin: 0;padding: 0;}.section{width: 700px;border: 1px solid red;margin: 50px auto;}span{border: 1px solid blue;margin: 0 0 5px 0;}img{float: left;margin: 0 4px 4px 0;}.clearfix原创 2015-05-17 11:05:22 · 341 阅读 · 0 评论 -
CSS3 @font-face 太神奇了!
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及转载 2015-05-17 11:29:22 · 410 阅读 · 0 评论 -
javascript笔记:深入分析javascript里对象的创建(下)---从对象创建到javascript程序优化
为什么现在主流程序语言里我们都要创建对象了?下面这个定义我想能给我们一个答案: 面向对象语言里对象的定义是:对象是人们要进行研究的任何事物,从最简单的整数到复杂的飞机等均可看作对象,它不仅能表示具体的事物,还能表示抽象的规则、计划或事件。抛开这些抽象的定义,从计算机底层技术来理解,对象其实就是一种存储数据的方式。 写这个系列下篇着实让我犯难了,本来我想写闭包和原型的,但是总觉得转载 2015-05-20 12:28:17 · 328 阅读 · 0 评论