共有日志：1851 篇 | 共有评论：1476 篇

当前位置：首 页>> 影视音乐

[MOVIESHOW] lifecycles 一部关于自行车的纪录片 微信扫一扫
分享给朋友

作 者：笑傲江湖分 类： 影视音乐 发布于：2011年-2月-14日 4:45 星期一


　　虽然我个人不是很喜欢运动，从小到大如此，没有什么我特别感兴趣的体育运动，顶多就是跑跑步，什么球类的我都只是看看别人玩可以，平时也就是世界杯的时候看看足球赛，当然，我是十足的伪球迷，虽然也熬夜看比赛，权当是凑热闹。

　　看了这个纪录片才晓得，自行车还能这么玩，不过不是不是随便谁都可以玩，有危险性，片中的那种速降，一不小心可能就车毁人亡了。何况用的自行车，不是一般人可以玩的起，我估计也起码好几万才能买一辆，所以我也只是看得心潮澎湃，因为片子拍的实在是太好了，使用的是4K的超高清摄像机拍摄，画面细腻精致，纤毫毕现，虽然我看得是1080P的从编码，但也感觉画质是相当优秀了，再加上拍摄的角度和大气的取景，配以动感十足与画面水乳交融的音乐，从头看到尾，秒秒都让你目不转睛，两个字，精彩！三个字，哇～精美！
　　平常看得纪录片一般都是人文地理类的，BBC之类的，这是第一次看关于体育类的片子，所以就强烈推荐一下，尤其是玩自行车的爱好者更应该看一下，当然，有条件的起码得看1080P的，配合好的屏幕和音响，这样才对的起这片子。网上没有搜索到更多关于本片的介绍，英文资料就下面这么多。
Released: 2010
Genre: Sports
Directed by: Derek Frankowski, Ryan Gibb
Cast: Graham Agassiz, Mike Hopkins, Matt Hunter, Cam McCaul, Cameron McCaul, 
Riley McIntosh, Evan Schwartz, Brandon Semenuk, Thomas Vanderham, 
Graham Tracey (Narrator)
About the film:
　　Life Cycles tells a spectacular story of the bike, from its creation to its eventual demise.
 A visually stunning journey, with thought provoking narration, Life Cycles uses 4k Ultra HD
 to document the many stories surrounding the mountain bike and its culture. Ride along 
into breath taking natural settings, as we battle the elements, showcase the progression
 of riding, take a road trip, fix the bike, and show the destruction and eventual creation
 of trails.
　　Semenuk, Hopkins, Schwartz, McIntosh, McCaul Agassiz, Hunter and Vanderham guide
 you through this wonderful story. Life Cycles is a celebration of the bicycle, and is sure to
 entertain anyone who has ever ridden one.
website:http://www.lifecyclesfilm.com/
[Edit on 2011-2-13 20:49:35 By 笑傲江湖]

标 签：电影推荐纪录片自行车

评 论0 引 用0 浏 览5341

仔细的研究了一下CSS的Image Sprites 微信扫一扫
分享给朋友

作 者：笑傲江湖分 类： 百 宝 箱 发布于：2011年-2月-12日 8:14 星期六

　　sprite：鬼怪,小妖精,调皮鬼,（童话中的）小仙子，小精灵。这是词霸给的解释，不能是雪碧哦，呵呵。CSS的这个Image Sprites，暂且翻译成图片精灵吧。实际说的是一个图片集合，因为网页里的图片如果太多，加载的时间会很长，对服务器来说，一个下载就是一个请求，如果把一些相关的图片，很小，都放在一个大图片里，这样只需要下载着一个大图片就行了，然后用CSS的Image Sprites来控制什么时候显示大图片中的某一小块图片。这样可以节约带宽，减轻服务器负担。
　　具体使用中，一般来说是导航菜单里使用翻转背景图片用的，做出一些动作的特效来（当然你用在其他地方也一样没问题）。比如一个导航的链接，鼠标没有移动上去显示的是一个图片，当鼠标移动上去之后显示另外一个图片，当导航里的链接项目比较多的时候，CSS的Image Sprites优势就体现出来了。
　　先来看看要用到的css语句：background:url(img_navsprites.gif) 43px 0px;这是简洁型定义方法，完整的写法是这样的：background:#FFFFFF url(*.*) no-repeat scroll left top;用在Image Sprites上的话，无非是给一个块指定一个背景图片，背景色的参数就可以不要了，背景图片是否重复就看你实际需要了，但是咱们这里要用的背景图片只是一个大图片中的一部分，所以需要用left和top这两个参数来定位具体要用的那一部分图片。实质上是把块要用的图片背景部分显示出来，不用的就隐藏了，而块的宽高咱们已经定义了。看下面的代码：

.img_next{width:43px;height:44px;background:url(img_navsprites.gif) 43px 0px;}


　　img_navsprites.gif这个图片里包含了3个小图标，如上图所示，每个小图标之间使用一个像素宽的竖线隔开，从左至右，三个小图标实际的宽度是46px/43px/43px，上面css代码里.img_home这个class定义了块的宽度width:43px;和高度height:44px;，那块能显示的背景图片的宽度和高度也是这么多。再来看最后一句background:url(img_navsprites.gif) 43px 0px;，指定的背景图片是img_navsprites.gif，背景是自动重复的，因为这种简洁写法里，如果没有出现的参数，就是用默认值，是否重复的参数如果没有定义，默认是自动重复背景的。最后的两个像素值就是默认参数的left top的值，在这里咱们理解成背景图像的左右和上下移动。这个43px表示图片img_navsprites.gif向右移动43个像素，因为会自动重复，所以移动的结果就是背景图片里会显示向右的箭头这个图标（也就是原图中最右边的那个图标）。当然，这个43px，你还可以给成-91px，这表示图片img_navsprites.gif向左移动91个像素，最终显示的还是向右的箭头这个图标。你可能会问为何是43px和91px，呵呵，那就麻烦你用Photoshop打开img_navsprites.gif这个图片，标尺的显示单位设置成像素，把图片放大，看看横向，从图片左上角开始，向右91px的位置在哪里；从图片右上角开始，向左43px的位置在哪里。其实这两个位置是同一个位置。也就说明css定义里，43px和-91px的效果是一样的。再说说最后的这个0px，前面说了是表示背景图片的上下移动，0px那就是不用上下移动了，如果你想让它上下移动也行，移动多少呢？呵呵，44px的倍数即可，正负都行，你可以自己测试一下,最后left top的值，用43px 0px和43px 44px，或者是43px -44px，或者是43px 88px，效果是一样的。当然，用-91px 0px和43px 44px，和用-91px 0px和43px -44px，也都是一样的，组合方式就多了去了，罗嗦这么多其实就为了说明白最后的left top这两个值是怎么工作的。left的值，正值表示向右，负值向左。top的值，负值向上，正值向下。从而得知，若咱们使用的大图片里，横向和纵向都有多个小图的时候，left和top这两个值还是都使用负值来的更直观一点。

　　为了进一步说明一下，特意弄了个图，把下面例子中的包含两行三列图标的图放大了，纯为演示说明问题。看上图，图中红框就是下例css中.img_home所定义的块，蓝色框表示背景图完整的大小，以红框为基准，咱们幻想一下蓝色框周围是自动重复的多个背景图，块img_home的基准点就是红框左上角带X的地方，以X为基准点，依照块的宽度和高度，background定义里left和top的值都是0，表示蓝色框内的背景图原地不动，但.img_home:hover里定义了left和top的值是0px -45px，表示蓝色框内的背景图左右原地不动，向上移动45个像素，这时，图中B处的颜色稍暗的图标就移动到红色框里了，那img_home这个块的背景图片就变化了，当鼠标移动到img_home块上的时候就显示颜色稍暗一点的这个图标了。原理我理解的是这样的。当然，你也可以把A点的背景图移动下来，top的值给成正值即可，至于给多少，答案留给你自己。剩下的两个块显示的pre和next的图标原理是一样的，只是红框的宽度稍有变化而已。如果background定义里你给定背景不自动重复，加上no-repeat的话，那上图中蓝色框的周围就是空白了啥也没有，你只能使用负值来定义left和top的值了，仅此而已，自己可以试验一下。[因为img_navsprites_hover.gif是个透明的gif图片，所以上图背景是灰白相间的格子表示透明，无他意。]
　　下面就弄个具体的实例吧，图片用的是img_navsprites_hover.gif，两行三列共六个图标，如下图所示。具体的css定义看代码。点击运行代码按钮查看，代码框里的内容可以修改，修改之后再次点击运行代码按钮查看修改结果。




标 签：CSSImage Sprites

评 论0 引 用0 浏 览5324

DIV+CSS 学习心得<9>：Position和Float 微信扫一扫
分享给朋友

作 者：笑傲江湖分 类： 百 宝 箱 发布于：2011年-2月-11日 8:07 星期五

　　Position的意思比较多，我理解成定位，就是用于给块来安排位置用的，一个块怎么放，放哪里，什么方式，当块内的内容超出了块定义的宽和高后怎么个表现方式（是覆盖其他块，还是被其他块覆盖）等，都是可以定义的。定位用的属性有四个：top, bottom, left, right，就是上下左右了，但必须是先定义了定位的方式，这四个属性才会起作用，否则无效。属性具体的效果也根据定位方式的不同而有差别。
　　Position的方式：Static/Fixed/Relative/Absolute，按照字面意思翻译就是静态/固定/相对/绝对，我是这么翻译的。下面就一个一个唠叨一下。
　　Static：HTML的元素，缺省情况下都是这个定位方式， A static positioned element is always positioned according to the normal flow of the page.这句英文我确实不知道怎么翻译才好，尤其是最后的页面的标准流这个概念，我理解是页面的逐行方式，页面的自然位置安排。由此可知，默认情况下，定位的方式是static，所以上面说的的四个属性top, bottom, left, right是没有的，即便是你定义了值也是和没定义一样。暂且咱就把这种状态称作一个块的原始状态。
　　Fixed：这个固定，是相对于浏览器窗口而言的，如果一个块被position:fixed，那这个块的位置的宽高的起点是浏览器显示网页内容区域的左上角，具体显示的位置是你定义的top, bottom, left, right的值。同时，这个块是不会随着浏览器的滚动条滚动发生位置变化的，说白了，这块就已经被钉死在那里了。所以这个fixed方式一般是用作页面上浮动面板，导航等等需要固定位置显示的内容用的。
　　Relative：相对定位，这里的相对，是说的相对与这个元素本身在Static方式时的位置，就是上面说的原始状态，下看下图：

　　图中有9个块，假如都是按照static状态排列的（实际可能不可能，只是为了说明问题），用中间的编号为5的块来举例，现在把5这个块的position:relative;top:100px;left:100px之后，块的位置会发生变化，变化见上图，其中的top和left的起点是该块原始位置的左上角标注X的地方，位置变化后，块的左上角同样我标注了一个X，这样就好理解位置是如何发生变化的了。既然位置发生变化了，是要和其他块发生位置重叠的，图中的块5和块6、8、9产生了位置重叠，这样就有个块内容谁覆盖谁的问题，也就是哪个块显示在上，哪个在下。假如9个块是按照编号依次放置，那后放置的会覆盖前面块的内容，这个我在图中没有表示出来，按照前面说的都是按照static状态排列的话，块5位置变化后，和块6、8、9重叠的部分，应该是被块6、8、9的内容覆盖的，这个实验留给你自己去体会吧。当然，你要是不想让块6、8、9的内容覆盖块5的内容，可以给块5指定一个大于块6、8、9的z-index的值，这个z-index的值用于控制各个块在垂直于屏幕的方向上的显示顺序，类似于Photoshop里层的概念，就是哪个块在上面，哪个块在下面。如果都没有指定，那就按照块的自然顺序，越靠后的块会覆盖前面的块。
　　Absolute：绝对定位，这里说的绝对是说对于一个块的父级元素、父级块而言的，如果没有父级元素、父级块，那默认的父级块是<html>，同时父级元素、父级块必须是除static之外的position定位方式，也就是父级块、父级元素需要有position为Fixed/Relative/Absolute的定位方式才有效。如果一个合适的父级都没找到，那父级块就又成了<html>了。用下面我写的代码测试一下吧，先直接点击运行代码按钮查看效果，修改了值以后再次点击运行代码按钮看看修改后的效果：




　　最后说一下Float，说白了就是一个HTML元素的左对齐和右对齐的问题，跟在这个元素之后的内容将会环绕包围着它，之前的元素不受影响，Float一般应用于图片，当然，也可以用在其他元素，或者用于块。所以，float是水平方向的移动，上下是不行的。至于一个块或者元素能向左和向右float的程度，是依据它的父级元素、块给留下的空间有多大。如果有多个元素或块是float的，且这多个元素和块都在同一个父级元素或块中，它们会一个挨一个的排成一排，顺序吗当然就是元素或块出现的先后顺序。
　　上面也说了，一个float的元素或块之后的元素或块是环绕它周围的，如果之后的元素或块你需要从新开始一行，那就需要在从新开始一行的元素或块的css定义clear一下，clear:both;就这句了，both表示左右都不环绕了，也可以单独clear left或者clear right。具体的例子我就不说了，自己动手实验一下吧。
　　到这里，俺个人的DIV+CSS之旅心得算是讲的差不多了，以后就是零零星星一些具体细节上使用的东西了，活到老学到老吗，整个这九回的心得，也花了我不少时间和精力，当然，我知道这对我自己是有好处的，等过段日子，再回过头来看看那自己写的东西，估计还会有新发现，到时候会补充进来。如果哪里说的不对，或者有问题，还请高手高抬贵手留言指出，俺万分感谢。如果也有初学的，大家可以多交流，至于怎么找到我，博客最下面关于我＆博客的页面里有联系方式，欢迎骚扰^_^
[Edit on 2011-2-12 0:40:55 By 笑傲江湖]

标 签：CSSDIV

评 论0 引 用0 浏 览4774

DIV+CSS 学习心得<8>：分组，嵌套，伪类，伪元素 微信扫一扫
分享给朋友

作 者：笑傲江湖分 类： 百 宝 箱 发布于：2011年-2月-11日 8:05 星期五

　　这次说的东东，基本是CSS样式里写法的一些细节和技巧问题了，因为我也只初学，也不一定说的就全是对的，具体问题具体对待，您还得自己研究之后消化了才行。
　　样式相同的定义是可以分组的，下面例子中，两种写法效果是一模一样的，使用分组的方法可以简化css代码，只需要将不同的样式定义名称（官方叫selector选择器）用逗号（英文状态下的逗号）隔开。

h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}


h1,h2,p{
color:green;
}

　　当然，分组也有不好的地方，如果你后来只想修改其中的一个，那不是麻烦了，所以还是看实际应用情况，这里只是告诉你有这么一种可以分组的写法。
　　然后是样式定义的嵌套，英文说法是Nesting Selectors，我英文不是很好，不知道这个Nesting（nest是巢的意思）在这里该翻译成什么好，所以我理解就是嵌套吧，或者叫级联？。官方解释是可以给一个选择器（比如A）内的选择器（B）定义样式，这样的话，在A作用的元素中如果出现了B所定义的元素，那这个元素就只使用B定义的样式，看例子，说的有些拗口，容易绕晕：

p{
color:blue;
text-align:center;
}
.marked{
background-color:blue;
}
.marked p{
color:white;
}

　　上面的css样式定义，第一个定义了所有p这个元素的样式为文字颜色蓝色，文字居中显示，marked这个class定义了元素的背景色是蓝色，.marked p则表示：如果p元素的父级元素的样式如果是.marked，那么这个p元素内的文字颜色就是白色，会脱离第一个p的样式定义。这第三个.marked p的写法就是Nesting Selectors，自己有时间在DW里写好可以测试一下具体是怎么玩的。
　　Pseudo-classes，直译就是伪类，我也没搞明白这个伪到底是啥意思。假的？冒充的？忽悠用的？What ever！下面是伪类的语法：

selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

下面是咱能用的伪类的列表：

Pseudo name    Description
:active        Adds a style to an element that is activated 
:first-child        Adds a style to an element that is the first child of another element
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang        Adds a style to an element with a specific lang attribute
:link            Adds a style to an unvisited link
:visited        Adds a style to a visited link

　　咱们用的最多的伪类估计就是给链接定义四个不同状态样式的时候了，其他的用的不多。你可以给其他HTML元素，比如DIV，定义一个:hover的样式试试看，很给力哦。
　　Pseudo-elements，直译就是伪元素，同上，不是很明白。下面是伪元素的语法：

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

下面是咱能用的伪元素的列表：

Pseudo name    Description
:after        Adds content after an element
:before        Adds content before an element
:first-letter    Adds a style to the first character of a text
:first-line        Adds a style to the first line of a text

　　其中first-line只能作用于block级别的元素，能用的属性property有：

font properties
color properties 
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

　　其中first-letter也只能作用于block级别的元素，能用的属性property有：

font properties
color properties 
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

　　:after和:before的写法如下，具体有啥效果，烦请自己准备好图片在DW里实验。

h1:before{
content:url(smiley.gif);
}

h1:after{
content:url(smiley.gif);
}

　　这回就说到这里了，还是那句老话，我说的你不一定能看懂，还得靠你自己Google去研究，如果我理解错了，还麻烦您给指点一下，别让俺一错再错哦。
[Edit on 2011-2-11 0:06:21 By 笑傲江湖]

标 签：CSSDIV

评 论0 引 用0 浏 览6107

[MOVIESHOW] Faster 极速复仇 微信扫一扫
分享给朋友

作 者：笑傲江湖分 类： 影视音乐 发布于：2011年-2月-11日 2:38 星期五


　　十年前，一起拙劣的银行抢劫案夺去了德莱沃哥哥的生命，也将自己送入了监狱，被判了10年的有期徒刑。在监狱里，他时刻不忘要为哥哥复仇，十年的监狱生涯让他变得愈加强壮。如今，他出狱了，为了切实有效的为哥哥报仇，他列了一份清单，他要把名单上的所有人都杀掉。

　　但很快，这个猎人就成了一个即将退休的警察和一个杀手的猎物，复仇变成了一场生死游戏。随着复仇行动的深入，他发现，他的名单真的太短了……


上映日期：2010年11月24日（美国）
编　　剧：Tony Gayton | Joe Gayton |
导　　演：小乔治·提尔曼 George Tillman Jr.
主　　演：道恩·强森 Dwayne Johnson | 比利·鲍伯·松顿 Billy Bob Thornton | 卡拉·古奇诺 Carla Gugino | 玛姬·格蕾斯 Maggie Grace | 奥利弗·杰森-科恩 Oliver Jackson-Cohen | 穆恩·布拉得古德 Moon Bloodgood |
类　　型：动作/惊悚
官方网站：Fasterthemovie.com


标 签：电影推荐Faster

评 论0 引 用0 浏 览5351

人到穷途应一笑，几凡失意仍能傲。成败何须问江湖，我心依旧任逍遥。
这一生只想好好做个平凡的人，有个家有个梦，陪我迎接每一个早晨。
这一生只想好好做个平凡的人，何必争何必问，只有快乐开心才是真。