CSS样式调控之盒子模型

2014/09/27 | 星期六 分类:JsCss | 没有评论 标签: | 作者: | 922 views

什么是CSS?是英文Cascading Style Sheets的缩写,中文是层叠样式。说说样式的盒子,上图:
CSS-Style
CSS盒子模型:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性,请看衍生示例:
4.内容(CONTENT)就是盒子里装的东西;
3.而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其他抗震的辅料;
2.边框(BORDER)就是盒子本身了;.
1.至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,也为了方便取出;
如下从上几点细细说上四点:

1.对象外边框距设置
margin : auto | length
#一个值代表全部,否则将按“上-右-下-左”的顺序作用于四边,拆分:
margin-top : auto | length
margin-right : auto | length
margin-bottom : auto | length
margin-left : auto | length

2.对象设置边框样式
border : border-width || border-style || border-color
#可拆分为四
#如果只提供一个参数,将用于全部的四条边;如果只提供两个参数,第一个用于“上-下”,第二个用于“左-右”;如果只提供三个参数,第一个用于上,第二个用于“左-右”,第三个用于下;若提供全部四个参数值,将接“上-右-下-左”的顺序作用于四个边框。.
border-color border-style border-width
border-top-color border-top-style border-top-width
border-right-color border-right-style border-right-width
border-bottom-color border-bottom-style border-bottom-width
border-left-color border-left-style border-left-width

3.对象外边距设置
padding : length
#如果提供全部四个参数,将按“上-右-下-左”的顺序作用于四边,如果只提供一个,将用于全部的四条边;如果提供两个,第一个用于“上-下”,第二个用于“左-右”;如果提供三个,第一个用于上,第二个用于“左-右”,第三个用于下。.
padding-top padding-right padding-bottom padding-left

4.对象高度与长度设置(1+2+3)
height : auto | length
#按照样式表的规则,对象的实际高度为其下列属性值之和;
#margin-top + boder-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
width : auto | length
#按照样式表的规则,对象的实际宽度为其下列属性值之和;
#margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
max-height : none | length
min-height : none | length
max-width : none | length
min-width : none | length

===========================================

其他样式:对象布局设置
display : block | none
#块对象的默认值,块对象将占用整个空间
#隐藏对象,其不为被隐藏的对象保留其物理空间

CSS样式调控
设置样式背景样式
background:background-color || background-image || background-repeat || background-attachment || background-possition
#默认值为:transparent none repeat scroll 0% 0%
.example{background:#CEDFEF url(“normal.png”) no-repeat right center;}

定位问题
Position : static | absolute | fixed | relative
static : 默认值,无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。若不存在这样的父对象,则依据body对象,而层叠通过 z-index 属性进行定义。
relative : 对象不可叠层,将依据left,right,top,bottom 等属性在正常文档流中偏移位置。

z-index : auto | number
#auto : 默认值,遵从其父对象的定位number;无单位的整数值,可为负数;
#number : 好比一张张透明的纸叠在一起,数值大的在最前端,且此属性仅仅作用于position属性值为 retative 或 absolute 对象

===========================================

在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能够大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。

填充只有宽度属性,可以理解为生活中盒子每个HTML标记多可以看作一个盒子。

从上描述:CSS属性可以转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫盒子模式。

通篇看完,大致对CSS有所了解鸟。

JavaScript构造函数详解

2014/09/24 | 星期三 分类:JsCss | 没有评论 标签: | 作者: | 939 views

JavaScript构造函数详解

此页面的字,脚本,手抄一遍,电脑上打两遍,目的都是为了加深理解,最近懒,想到这招方法学习JavaScript,在此献丑鸟.

1.JavaScript构造函数中显式地用 return 语句返回一个自定义对象(包括函数)时,不论new调用该构造函数,还是对该构造函数的普通调用都会返回该自定义对象。

2.不易理解,请看示例代码.

或者

构造函数返回值
JavaScript 中的构造函数通常是没有返回值,但函数是允许有返回值的;若一个构造函数有一个返回值,则返回的对象成为new表达式的值,在此情况下,作为this的对象将会被抛弃。

另外:在构造函数中 var name; function 都成了私有方法,只能在构造函数内部使用。

3.构造函数中显式用return 返回一个非对象的值时(或为空的retrun;语句)用new调用该构造函数时,该return语句会被抛弃掉,会真正返回this指向的新创建的对象;普通调用该构造函数时,会返回retrun语句中的值。

4.构造函数没有显式的return语句时,用new调用该构造函数时,将返回this指向的对象,普通调用该构造函数时,将返回undefined值。

#new一个构造函数,它的生成对象的执行过程怎样子的?

#示例中的
#var this = Object.create( Person.prototype );
#return this;.
#这两个语句是被隐式执行的(实际代码中不用这样写)
#注意:一开始,新创建的对象就从Person.Prototype 中继承了所有属性;
#最后,隐式地返回了该新创建的对象;
#自动调用构造函数
#为了防止一个构造函数被当成普通函数被调用所带来的问题,通过判断this指向的对象是否是当前构造函数的实例来完成判断;

或者

#构造函数:使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法;
#当对象被实例化后,构造函数会立即执行它所包含的任何代码.

Node.js研究分享,入门示例

2013/07/04 | 星期四 分类:JsCss | 没有评论 标签: , | 作者: | 1,781 views

Node.js研究分享

A.什么是Node.js ?
Node.js是一个基于V8引擎[1]的,可以快速构建网络服务及应用的平台,通俗点说是一套用来编写高性能网络服务器的JavaScript工具包。

更多相关Node.js的解释:.
1.Node.js是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅。
2.Node.js的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。处理高并发和异步I/O是Node受到开发人员的关注的原因之一。.
3.Node.js本身运行Google V8 JavaScript引擎,所以速度和性能非常好,看chrome就知道,而且Node对其封装的同时还改进了其处理二进制数据的能力。因此,Node不仅仅简单的使用了V8,还对其进行了优化,使其在各种环境下更加给力。
4.Node.js第三方的扩展和模块在Node的使用中起到重要的作用,比如:使用NPM安装各种Node的软件包(socket.io,express,redis等)并发布自己为Node写的软件包。

B.Node.js安装:window7 系统
1.win7系统32位,下载32-bit:node.exe 安装(办公环境电脑,简称WORK)
2.win7系统64位,下载64-bit:node.msi 安装(64-bit:node.exe 家里的机器无法安装,简称HOME)
注释:Linux,Mac OS X 等平台请查阅相关资料安装。

测试安装示例1:hello.js

图1:命令行运行
1
图2:浏览器查看
2
C.示例1解释:
a. 全局方法require()是用来导入模块的,一般直接把 require() 方法的返回值赋值给一个变量,在 JavaScript 代码中直接使用此变量即可 。require(“http”) 就是加载系统预置的 http 模块
b. http.createServer 是模块的方法,目的就是创建并返回一个新的web server对象,并且给服务绑定一个回调,用以处理请求。
c. 通过 http.listen() 方法就可以让该 HTTP 服务器在特定端口监听。
d. console.log 这个指令是在浏览器控制台输出日志,用来调试程序,跟alert 类似,但不像alert那样会打断程序:例如火狐,你打开firebug控制台,就可以看到调试结果了。
总结:通过这个简单示例,体现了事件驱动、异步编程,在createServer函数的参数中指定了一个回调函数(采用Javascript的匿名函数实现),当有http请求发送过来时,Node.js就会调用该回调函数来处理请求并响应。.
阅读全文

Jquery与常见demo示例

2013/05/07 | 星期二 分类:JsCss | 没有评论 标签: | 作者: | 1,312 views

Jquery相关插件要么功能太强大体积也大,要么是固定的格式需要预设标题、内容、关闭按钮等,而Jquery相关插件要非固定样式又非常灵活的很难没找到。

于是就把手头的一个有bug的原生javascript弹出层改动了一下,.借助jQuery绕开了麻烦的兼容性问题,正好如今每个项目都用了jQuery,最终效果凑合着用还是可以的。

目前已经设计了四个源生简单Jquery demo 拿来即用。

1.全部JS: JS拖动
2.Jquery:遮罩
3.Jquery:选项卡
4.JQ天猫: Tmall Banner

即将上线更多的demo 不局限与JQ,将作为自己的源生代码库,.拿来即用到项目中。

Jquery与Ajax应用示例

2013/04/29 | 星期一 分类:JsCss | 没有评论 标签: , | 作者: | 1,346 views

Jquery ajax示例
document.ready()可以说是jQuery的一大特色,它不仅比传统的Javascript函数onload()要快,而且加上jQuery强大的选择器可以在不用修改HTML代码情况下(例如:不用在HTML标签加入onClick()函数来调用其它自定义Javascript函数)对Web页面中的各种元素和事件进行控制、实现和Web客户交互的作用。.

示例1:jQuery.getJSON(url, [data], [callback])
url,[data],[callback]String,Map,FunctionV1.0url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

#按钮,注意按钮与JS先后顺序

json.php
获取传参数据,比如Mysql获取数据,PHP处理,最后返回.

Jquery 示例1 注意先后顺序,否则必须如示例2一样 JS中必须加载如下语句。
#$(document).ready(function(){})

示例2:jQuery.ajax(url,[settings])
url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。

ajax.php
获取传参数据,比如Mysql获取数据,PHP处理,最后返回.

两个示例,更多详细信息请访问Jquery手册ajax模块。