mongoose学习笔记

连接

引入mongoose后然后用connection连接就okay了
推荐一个可视化数据库软件robomongo

1
2
3
4
5
6
7
8
var mongoose=require("mongoose");
var db=mongoose.connect("mongodb://127.0.0.1:27017/test")
db.connection.on("error",function(err){
console.log(err)
})
db.connection.on("open",function(){
console.log("okay")
})

Schema

schema就像一个模块的框架.查询根据这个模板框架来查询,插入也根据这个模板框架来插入.

1
2
3
4
5
6
7
8
var mongoose=require("mongoose")
var testSchema=new mongoose.Schema({
name :{type:String},//属性为name,类型为String
age:{type:Number,default:0},//属性为age 类型为Number 默认值为0
time:{type:Date,default:Date.now},
email:{type:String,default:""},
gender:{type:Boolean,default:true}
})

Model

有了模板框架现在就可以生成模板了
test1是数据库中的集合名称 如果test1已经存在 则会保存到其目录下 如果不存在则会创建test1集合保存数据

1
2
var db =mongoose.connect("mongodb://127.0.0.1:27017/test")
var testmodel=db.model("test1",testSchema)

Entity 实体

有了模板就可以生成实体
这里没有传入time 所以默认time是当前时间.现在仅仅生成实体了 但是,还没有保存,
我们可以console.log打印一下

1
2
3
4
5
6
7
8
var testEntity=new testmodel({
name:"soul",
age:18,
email:"admin@emufan.com",
gender:true
})
console.log(testEntity.time)//Fri Nov 06 2015 13:27:58 GMT+0800 (中国标准时间)
console.log(testEntity.age)//18

jade学习笔记

安装jade

jade模板引擎

安装至全局 npm install jade -g
jade编译html

1
2
3
4
jade file //压缩编译 如jade index.jade
jade file -P //不压缩编译
jade file -w //对文件状态监控 一但文件变化则会实时编译、
jade file -w -P //两个指令 实时不压缩编译

jade中的元素标签

  • 无需成对出现
  • 无需使用尖括号
  • 子级对父级需要缩进
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    doctype
    html
    head
    meta(charset="utf-8")
    title soul 学习笔记
    body
    h1 hello soul jade
    section
    hr
    br
    p
    input

对应HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>soul 学习笔记</title>
</head>
<body>
<h1>hello soul jade</h1>
<section></section>
<hr><br>
<p></p>
<input>
</body>
</html>

一个简单的TCP聊天程序

nodejs中创建net服务器

引入nodejs自带的net模块 然后创建一个net服务
其中的conn保存着每个链接,就像你的身份证一般,那个conn就是身份证.在众多的人群(链接)中我总是可以通过conn(身份证)找到你的身影.

1
2
var net=require("net")
var server=net.createServer(function(conn){})

nodejs中的net事件

总所周知nodejs是事件驱动的,So.每个conn都提供了一些事件, 失去链接的事件,链接发送数据的事件.
客户端链接进来了,服务端亦然可以对客户端发送消息表示你已经加入进来了.
客户端发送消息用的是”流”.

引用 nodejs权威指南中的一段话(摘选)
在使用write方法写入数据时,系统首先将该部分数据读到内存,再把数据写入文件
引用 nodejsAPI
socket.write(data, [encoding], [callback])
在套接字上发送数据。第二参数指明了使用字符串时的编码方式-默认为UTF8编码。
如果所有数据被成功刷新到内核缓冲区,则返回true。如果所有或部分数据在用户内存里还处于队列中,则返回false。当缓冲区再次被释放时,’drain’事件会被分发。
当数据最终被完整写入时,可选的callback参数会被执行 - 但不一定是马上执行。

close与end事件
当底层套接字关闭时,nodejs会触发close事件 nodejs中有两个和连接终止相关的事件:end与close.前者是客户端关闭TCP连接时触发,比如你关闭客户端,如Telnet协议的
客户端,telnet会发送一个名为FIN的包给服务器,意味者结束连接.
当连接发生错误时(触发error事件),end事件不会被触发.因为服务端未收到FIN包.这两种情况下 close事件都会被触发.
设置字符编码
conn.setEncoding(“utf8”) //仅仅对于客户端发送的数据有效

1
2
3
4
5
6
7
8
9
10
11
var net=require("net")
conn.setEncoding("utf8")
var server=net.createServer(function(conn){
conn.write("欢迎来到TCP")
conn.on("data",function(data){
console.log(data)//未设置编码是buffer 设置编码则为相应的字符集
})
conn.on("close",function(){
console.log("客户端断开连接")
})
})

开始做一个TCP聊天程序

为了方便解释和说明.我决定把解释都放程序代码块中,涉及到重要的API和知识点再放外面说明
整体思路为
监听用户输入–根据输入判别是否为聊天消息—群发给每个用户

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var net=require("net")
//创建net服务器
var count=0;
var users={};
var server=net.createServer(function(conn){
var nickname;
//设置获取客户端输入编码
conn.setEncoding("utf8")
count++
conn.write("welcome now conn:"+count+" please input your name and press enter:\r\n")
console.log("当前连接数为:"+count)
//监听退出事件
conn.on("close",function(){
count--
//删除相应的conn
delete users[nickname]
console.log("退出一位链接 当前链接数为"+count)
})
//监听用户输入事件
conn.on("data",function(data){
data=data.replace("\r\n","")
/*
* 这里相当于做路由,因为我们只能监听用户的输入
* 根据用户第一次输入来判断是否输入了姓名,以及用户后续的输入判别为聊天消息
*
* */

//如果还不存在注册姓名
if(!nickname){
//用户输入了触发了data时间 然后再根据data检测.
//检测用户名是否重复
if(users[data]){
conn.write("\r\n nickname already in use try agin: ")
return false;
}else{
//注册用户名
nickname=data
//存储每一个用户链接
//conn相当于身份证 这里就可以通过key value来索引到conn看
users[nickname]=conn
for(var i in users){
users[i].write("\r\n"+nickname+"joined the room\r\n")
}
}
//用户输入了姓名后的消息都视为聊天记录
}else{
//聊天消息
//把消息发送给每个用户
for(var i in users){
//除了发送者本人
if(i!=nickname){
users[i].write(nickname+": "+data+"\r\n")
}
}
}

})
})
server.listen(4120,function(){
console.log("监听4120端口")
})

HTTP实现一个简单网站

HTTP实现一个简单网站

我们要实现的的网站功能有:

  • 提供图片访问服务
  • 首页提供当前目录的文件

啊喂…就这样么?…没错,就这么简单
看完这节后再用中间件来对比一下就知道不用中间件实现的蛋疼了..

建立路由

这也算是一个路由了,这里对req.url进行了解码 因为如果你访问带中文的图片浏览器提交的时候会转码 所以这里要解码成中文
比如访问127.0.0.1/img/233.jpg
req.url=>/img/233.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http=require("http");
var fs=require("fs");
var server=http.createServer(function(req,res){
var cdurl=decodeURIComponent(req.url)
//访问首页路由
if(req.method=="GET"&&cdurl=="/"){
})
//访问的是图片资源..并且是以jpg结尾的 图片路由
}else if(req.method=="GET"&&cdurl.substr(0,4)=="/img"&&cdurl.substr(-4)==".jpg"){
//其他的返回404
}else{
res.writeHead(404);
res.end("404没找到")
}
})

首页路由处理

这里利用了一个 fs.readdir来读取img目录下的所有文件
并且返回一个a标签给浏览器

1
2
3
4
5
6
7
fs.readdir(__dirname+"/img",function(err,arr){
console.log(arr)
arr.forEach(function(elem,index){
console.log(index)
res.write("<a href='http://127.0.0.1:3100/img/"+elem+"'>"+elem+"</a> </br>")
})
res.end()

图片路由处理

fs.exists用来判断文件是否存在 如果存在则设置一下返回头为jpg
fs.createReadStream创建一个文件读取流
.pipe建立一个管道给res
首先我们知道res有data事件和end事件
createReadStream也有data事件和end事件
这段代码相当于

1
2
3
4
5
fs.createReadStream(path)
.on("data",function(data){
res.write(data)
})
.on("end",function(){res.end()})

readStream是一个池子
res也是一个池子
中间用pipe(管道)连接起来 这样就实现了水的传输.
…当然..你用上面的代码写效果完全一样只是麻烦了点.

1
2
3
4
5
6
7
8
9
fs.exists(__dirname+cdurl,function(files){
if(files){
res.writeHead(200,{"Contenct-Type":"application/jpg"})
fs.createReadStream(__dirname+cdurl).pipe(res)
}else{
res.writeHead(404);
res.end("404没找到")
}
})

最终的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var http=require("http");
var fs=require("fs");

var server=http.createServer(function(req,res){
var cdurl=decodeURIComponent(req.url)
//访问首页
if(req.method=="GET"&&cdurl=="/"){
fs.readdir(__dirname+"/img",function(err,arr){
console.log(arr)
arr.forEach(function(elem,index){
console.log(index)
res.write("<a href='http://127.0.0.1:3100/img/"+elem+"'>"+elem+"</a> </br>")
})
res.end()
})
//访问的是图片资源..并且是以jpg结尾的
}else if(req.method=="GET"&&cdurl.substr(0,4)=="/img"&&cdurl.substr(-4)==".jpg"){
fs.exists(__dirname+cdurl,function(files){
if(files){
res.writeHead(200,{"Contenct-Type":"application/jpg"})
fs.createReadStream(__dirname+cdurl).pipe(res)
}else{
res.writeHead(404);
res.end("404没找到")
}
})
//其他的返回404
}else{
res.writeHead(404);
res.end("404没找到")
}
})
server.listen(3100)

HTTP客户端与服务端

HTTP客户端与服务端

原谅我标题党了..也不算一个chat,只是展示了一下http的请求和http接收
关于了不起的nodejs实例都可以在我的github上找到

服务端

这里利用到http上一课也就是http表单中的知识.
建立一个服务器,然后监听3100端口.同时处理下data事件和end事件
这里没啥难度.咋们看客户端的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http=require("http");
var qs=require("querystring");

http.createServer(function(req,res){
var body="";
req.on("data",function(data){
body+=data
})
req.on("end",function(){
res.writeHead(200);
res.end("okay")
console.log("接受到的name参数为:"+qs.parse(body).name)
})

}).listen(3100,function(){console.log("run 3100 port")})

客户端

首先我们了解下http.request
向某个网页发起一次http请求 可以是get也可以是post只需要以一个对象的方式写入进去就okay了
下例就是向127.0.1.1发起一次POST请求.同时附带一个查询字符串
http.request({},function(res)).end()
其中function(res)这个函数是请求成功后的一个回调函数 其中res就是服务器发送至你的返回体
既然是返回体那么肯定也有一些事件 比如data事件
process.stdout.write
这串代码是用来向客户端屏幕输出字符的
end()
end就是结束请求的意思 也就是说我们可以在结束请求的时候添加一些查询字符串 比如{name:”soul”}经过qs的转码后会变成name=soul
下例代码完整的请求应该是
POST 127.0.0.1:3100/?name=query

1
2
3
4
5
6
7
8
9
10
11
12
13
http.request({
"host":"127.0.0.1",
"port":3100,
"method":"POST",
"url":"/"
},function(res){
res.setEncoding("utf-8");
res.on("data",function(data){
console.log(data)
console.log("请求成功")
process.stdout.write("\r\n 请再输入你的名字:")
})
}).end(qs.stringify({name:query}))

然后我们把他封装成一个函数方便后面调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function send(query){
http.request({
"host":"127.0.0.1",
"port":3100,
"method":"POST",
"url":"/"
},function(res){
res.setEncoding("utf-8");
res.on("data",function(data){
console.log(data)
console.log("请求成功")
process.stdout.write("\r\n 请再输入你的名字:")
})
}).end(qs.stringify({name:query}))
}

process.stdout.write("第一次输入你的名字:");
//流默认是暂停的 需要resume()来恢复
process.stdin.resume();
process.stdin.setEncoding("utf-8");
process.stdin.on("data",function(name){
send(name.replace("\n",""))
})

process.stdin
客户端输入.默认是暂停的 所以我们得恢复输入流这样才能监听到输入的data事件
process.stdin.resume()//恢复输入流
process.stdin.setEncoding("utf-8");//设置一下编码 否则是buffer类型

HTTP表单

创建一个HTTP服务

引入nodejs提供的http模块后就可以创建一个HTTP服务.
http.createServer返回当前服务器,然后再监听一下端口就可以访问localhost:3100了
req:客户端(浏览器)请求
res:服务器发送至浏览器的接口

1
2
3
4
5
var http=require("http");
var app=http.createServer(function(req,res){}
app.listen(3100,function(){
console.log("监听于3100端口")
})

HTTP的req与res

req和res是一个对象,所以不妨用console.log输出一下就可以看到众多信息了
req.url
req.url即客户端访问的url地址 但不包含主机头 如

1
2
get http://baidu.com/nice/
req.url=>/nice

res.writeHead,res.write,res.end
res.writeHead用来设置服务器发送至浏览器的头部信息 如图
res.writeHead
res.write用来向客户端发送body体…大致理解为HTML源码就okay了~
如果这个方法被调用但是 response.writeHead() 没有被调用,它将切换到默认header模式并更新默认的headers。
res.end
当body发送完毕的时候得调用一下res.end(),否则浏览器会一致向服务器发送请求(长时间链接不会断开)
如果在res.end结束后调用res.write则会报错
下面的代码只会输出 sdsdas和hello而setTimeout中的代码则不会输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http=require("http");
var app=http.createServer(function(req,res){
if(req.url=="/"){
res.writeHead(200,{"Content-Type":"text/html"})

res.write("sdsdsa")
setTimeout(function(){
res.write("2333")
},5000)
res.end("<h1>hello</h1>")
}
})
app.listen(3100,function(){
console.log("监听于3100端口")
})

开始制作一个HTTP表单

req.data,end事件
当客户端有数据传输都会产生以上两个事件
data事件接受数据,当数据产生完毕则会触发end事件

req.headers
客户端向服务端发送数据会包含客户端的头部.同res.headers

querystring
查询参数格式化
querystring.(“name=soul”)=>{name:soul}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var http=require("http");
var fs=require("fs");
var qs=require("querystring")
var app=http.createServer(function(req,res){
if(req.url=="/"){
res.writeHead(200,{"Content-Type":"text/html"})
fs.readFile(__dirname+"/index.html",function(err,data){
res.write(data)
res.end()
})
}else if(req.url=="/url"&&req.method=="POST"){
var body='';
req.on("data",function(data){
//这里必须隐式转化为字符串
body+=data
});
req.on("end",function(){
//qs.parse默认只支持字符串 直接写入data是一个二进制的data
console.log(qs.parse(body))
console.log("接收完毕")
res.write("<h1>Content-Type:"+req.headers["content-type"]+"</h1> <h1>接收到的数据为:"+body+"</h1>"+
"<h1>格式化后的数据为:"+JSON.stringify(qs.parse(body))+"</h1>")
res.end()
})
}
})
app.listen(3100,function(){
console.log("监听于3100端口")
})

HTML

1
2
3
4
5
6
7
8
9
10
<form action="http://localhost:3100/url" method="post">
<label for="">
<p>
请输入用户名
<input type="text" name="username" />
</p>

</label>
<input type="submit" value="提交"/>
</form>

夏天

夏天

你我都是路人,像生命中的过客,相识,相知,也不过就是那擦肩而过的一刹那.时间停顿,你我均不回头.冷漠的向远方行去.
相知,相识.最后反目为仇,我怀念那段美好而又温馨的时光,脚步却不会停止往前,是时间的推动,还是内心那份不愿直视的逃避.
我最喜欢一年四季中的夏天,从夏天开始,到夏天结束,从火热再到沉寂,从温暖再到冰冷,一年又一年重复着,像是那蝴蝶的翅膀,找不到一片树叶来休息,只有不停的煽动翅膀,向前,向上,向着风,向着雨,以雷为乐,以云为伴.
我喜欢夏天的火热,也喜欢夏天的冰冷,你我相识在火热的夏天,却又结束在冰冷的夏天. 我喜欢那知了的鸣叫,喜欢那风吹过你我躺过的草坪,喜欢那高山上夕阳的彩霞.喜欢那橡树下的微风.
你我的相遇那一霎那就像一整个夏天,看起来很长,体会起来很短.每天都在重复着那些无趣得不能再无趣的事,平静的心又开始躁动,课桌上你的身影已不在,我停留在当时的课桌,读着当时最爱读的书,写着当时最爱写的诗,
一切都那么熟悉,熟悉的少了一个人.那么完整的画,画起来却那么不容易,我用画来绘画整个夏天,绘出的却是你的身影.唯独你的脸我已经记不清.
独自行走在茂密繁林下那星光点缀般的小道上.多想把整个星空分享.回头望,人散,影散,景犹在.
我记忆了整个夏天,却记住不了一张画.画的不是高山流水,画的不是虎啸山林.画的是.是那夏天中最美好的风景,相遇于路口,相离于路口.
时间在消磨那夏天的记忆,我记不住太多关于夏天的事.甚至我快要忘记这个夏天.
好几个夏天过去了,好几个夏天来了.人一天天长大,心一天天衰老.我快要忘记了,我不想忘记,我不想只看着风才会想起雨.
脚步不会停留在这个夏天,夏天的故事留在记忆最深处就好了.也许多年以后再想起夏天的事….也许多年以后没忘记夏天的事. 回想起来.你是否也会感到一丝丝的回味.

涨姿势!为什么有的颜色看起来非常高档?

本文转自优设:涨姿势!为什么有的颜色看起来非常高档?



不愿意看下文的直接看总结吧

总结:


1,之所以一些颜色看起来会显得高档,其实是因为该颜色传提出的情绪很少。


2,而降低色彩饱和度,或者不明确色相的颜色,其实就是在降低和削减色彩对人情绪的影响。所以会看起来略显高档。


3,黑白照片看起来比彩色照片高档,大部分奢侈品牌选择黑白,其实都是在降低色彩本身对于人情绪的影响,而使人感觉高档。


涨姿势!为什么有的颜色看起来非常高档?


@-eno-one- :高档色的色彩纯度、明度、饱和度低,是表象。但不是使得它们看起来显得高档的根本原因。


正确的答案是:


之所以一些颜色看起来会显得高档,其实是因为该颜色传提出的情绪很少。

而降低色彩饱和度,其实就是在降低和削减色彩对人情绪的影响。所以会看起来略显高档。


我先从色彩对我们情绪影响的由来开始说起。


每种色彩都会给人不同的心理感受。比如我们常说的,紫金搭配显贵气,紫色代表神秘,蓝色代表迷离空旷,红色代表热情与危险,绿色代表生命等等。


见下图示例:


涨姿势!为什么有的颜色看起来非常高档? 涨姿势!为什么有的颜色看起来非常高档?


这些色彩的心理感受,并不是人类后期赋予或者毫无根据杜撰出来的。我们现代人的行为、思维等等,其实都是因进化演变而形成的一种自然生理机制。


为什么蓝色会给人没有食欲?因为自然界中就没有天然存在的蓝色食物。为什么红色橙色会给人危险的感觉?因为自然界中,很多有毒的生物表体的颜色就是如此,


因此在人类长期的进化演变过程中,对于过分鲜艳的颜色,便有了独特的警觉性。还有更多的色彩心理,其实,都是因人类进化而逐渐被我们确定认知的。所以,就不再一一举例了。


见下图示例:


涨姿势!为什么有的颜色看起来非常高档? 涨姿势!为什么有的颜色看起来非常高档? 涨姿势!为什么有的颜色看起来非常高档?


结论:色彩饱和度较高的颜色,也就是我们通常所说的鲜艳的颜色,本身就会对我们观看者的情绪造成影响。


接下来,再说一下,色相对于情绪的影响。


色相:


色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性,而色相也就是由原色、间色和复色来构成的。色相,色彩可呈现出来的质的面貌。自然界中各个不同的色相是无限丰富的,如紫红、银灰、橙黄等。色相即各类色彩的相貌称谓。


下图的男士,身着三款不同颜色,但是色相明确的衬衣。


涨姿势!为什么有的颜色看起来非常高档? 涨姿势!为什么有的颜色看起来非常高档? 涨姿势!为什么有的颜色看起来非常高档?


以上三个颜色,我们大多数人都可以第一时间马上将它们说出来。比如黄色、绿色和蓝色。


而每种颜色,所让我们感受或联系到的情绪都会有不同,例如黄色会显得激烈,荧光的绿色会使人惊觉,较亮的蓝色让我们觉得干净。这些不同的感受,都是色彩带给我们的情绪影响。


接下来,我们再来做一组实验。


涨姿势!为什么有的颜色看起来非常高档?


我们先来看看上图中的衬衣,到底是蓝色还是绿色?是否发现,当物体的色相不那么明确之后,色彩对于我们情绪的影响也就随之减弱。


接下来,我们再来一次实验


涨姿势!为什么有的颜色看起来非常高档?


还是选择最开始图例中的绿色来进行比较。左边衣服的绿色,色彩饱合度较高,而右边的则降低饱和度。看看那一个颜色会显得略微高档。其实,降低色彩饱和度,也是削弱色彩对人情绪影响的一个手段。


总结:


1,之所以一些颜色看起来会显得高档,其实是因为该颜色传提出的情绪很少。


2,而降低色彩饱和度,或者不明确色相的颜色,其实就是在降低和削减色彩对人情绪的影响。所以会看起来略显高档。


3,黑白照片看起来比彩色照片高档,大部分奢侈品牌选择黑白,其实都是在降低色彩本身对于人情绪的影响,而使人感觉高档。

紧跟潮流之布局篇!2015年至关重要的四种排版趋势

本文来自优设:紧跟潮流之布局篇!2015年至关重要的四种排版趋势


简单总结了一下. 作者文笔比某逗比要好的很多.大家看看能够有所帮助就行




  1. 分割屏幕

  2. 去界面化

  3. 基于模块或网格

  4. 一屏以内



1.分割屏幕


在这类中,我们精选的网站都用了垂直分隔线来分割屏幕。可能这么做有很多原因,通过研究大量此类案例,我发现主要有两点。


原因之一,有时候在一套设计中,的确存在两个同等重要的主体元素。网页设计的通常方法,是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢?这种方式,可以让你突出两者,并让用户迅速在其中做出选择。


原因之二,有时你要表现出一种重要的两重性。以Eight and Four网站为例。他们在此要表达的是,他们的核心竞争力来自植根数字领域,还有多才多艺的员工。这两点成就了他们。通过屏幕分割来表现这一点,是种令人愉快的方式。


Eightandfour


kec2015012520


Carelpiethein


kec2015012519


Deweyspizza


kec2015012517


Fian.my.id


kec2015012518


Pomopizzeria


kec2015012516


 




2.去界面化!


网页设计中的主要元素之一,就是容器元素:方块、边框、形状和所有类型的容器,用于将内容从页面中分离开。想象一个古板的页头,元素刚好容纳其中,与内容分隔开。如今的一项普遍趋势,就是去除所有这些额外的界面元素。


这是种极简主义的方式,但它更进一步,带来一些有趣的转变。


Br-time


kec2015012514


在这个例子中,他们把页头和页尾的概念统统去掉了。反而更像一个交互式杂货摊。从左向右的排列,就基本完成了内容层次的排布,有助于让排版更加直观。用于分隔导航和内容的界面就不需要了。取而代之的是漂亮的产品惊艳全场。


Foreword


kec2015012515


可以发现,移除任何感官上的页头和页尾后,内容得到了极大的强调。你会先看到公司名称,然后是关于他们经营内容(和场所)的清晰描述,而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌,这个方式太棒了!它造就了优美的视觉流程。有趣的是,当你滚动页面时,页头和界面才出现。美观且有效的排版,这种模式的运用颇具启迪性。


Harvardartmuseums


kec2015012513


Voiceshavepower


kec2015012512


Drurybuildings


kec2015012511




3.基于模块或网格


接下来这些排版方式,建立在模块化或类似网格的结构上。在这些设计中,每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式,不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式,可以像搭积木一样,由各种模块组件创建而成。


Teambadcompanyrowing


kec2015012510


这个案例完美地诠释了这一点。整个设计都是响应式的。随着屏幕尺寸变化,每个模块都改变尺寸来适应空间。均匀划分屏幕使得设计更易于适应。他们还(在大屏幕尺寸中)引入一些元素来打破模块界限的束缚,这是画龙点睛之笔。


Madagascar.dreamworks


kec201501259


这个案例更加激进。当然,它也包含了模块化的方式,让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用,之前的案例是没有的。模块通过尺寸变化,来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险,它使每样东西尺寸都相同,这意味着无法强调任何事物。相反,这个案例还是清晰地突出了主要元素。


Plfixtures


kec201501258


Guide.residence-mixte


kec201501257


Tevko


kec201501256




4.一屏以内


最后,还有一些网站采用这样的方式,让设计完全在一屏内展现。这是响应式设计的一个分支,因为它会适应屏幕尺寸。不过在这个绝佳案例中,整个设计的适应方式完完全全吻合屏幕,没有产生滚动条。没有滚动,意味着内容必须极度聚焦,而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度,令人耳目一新。


Hatchcollective


kec201501254



Shamballajewels


kec201501255


Erikfischer


kec201501252


Twinpics


kec201501253


Nikolaylechev


kec201501251


 


 

JavaScript操控css -2:巧用一个变量设置奇数行,偶数行

真的不得不佩服作者大大的思维.膜拜


<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>JS-操作CSS-1</title>
<style type=”text/css”>
table,th,td{
border: 2px solid black;
border-collapse:collapse;
width: 100px;
}

</style>
<script type=”text/javascript”>
function changeBg(){//定义函数
var get_table =document.getElementsByTagName(“table”);//获取页面中的table标签
var obb;//定义变量 obb(偶数)
for (var i = 0; i < get_table.length; i++) {//开始遍历table
obb =false;//设置偶数行等于 假
var get_table_tr=get_table[i].getElementsByTagName(“tr”);//设置get_table等于table中的tr元素
for (var d = 0; d < get_table_tr.length; d++) {//开始遍历tr
if (obb==true) {//如果偶数行等于 真
get_table_tr[d].style.background=”red”;//设置tr的背景颜色为红色
obb=false;//设置obb等于 假
}else{//否则
obb=true;//返回obb等于 真
}
}
}
}

window.onload=function(){//页面加载完毕加载函数
changeBg();
}

</script>
</head>
<body>
<table>
<tr>
<th>名字</th>
<th>性别</th>
</tr>
<tr>
<td>soul</td>
<td>保密</td>
</tr>
<tr>
<td>seeker</td>
<td>你猜</td>
</tr>

</table>

</body>
</html>