冰剑'blog

在web页面中引用css的四种方法

xunzou@gmail.com (冰剑) — Wed, 30 Nov 2011 15:04:58 +0800

作为一名前端开发工程师，平时在制作页面的时候，我们我们会用到很多中将CSS引入页面的方法，那么，今天我将分享一下这些方法，并讨论那种方法更好一些。

1.用标签：

这种方法是最好的一种，在页面的标签中加入如下代码：

[code=html][/code]

2.用@import规则：

[code=html]

[/code]

@import 可以放在页面的style标签里面，也可以方式在css样式表里面。

如果放在css样式文件里面，它必须在其他样式规则的最前面，否则将会无效。

3.用style元素

你可以将任何css样式放置在页面任何位置，但是需要将样式放置在style标签里面

[code=html]

[/code]

建议将其放置在head标签里面。

4.用内联样式

内联样式可以允许你将任何css样式应用于页面的任何标签上，这些样式仅仅应用于当前样式，如下：

[code=html]

这里是一些文本

[/code]

总结：

一般来说，第一种方法是比较好的方法，也是用的最广泛的方法。

@import方法，可以查看linxz写的一篇文章诡异的@import 能够更好的帮你理解。

后面两种方法是最不推崇的方法，一般不要用这两种方法，他们既不利于样式的重用，也不利于后期的修改。

继续阅读《在web页面中引用css的四种方法》的全文内容...

分类: 前端技术 | Tags: CSS style | 添加评论(1)

@Font-face 用法及全部浏览器支持的方法 (2011-6-8 17:33:53)
Css content属性详解 (2010-7-6 18:54:17)
视频播放缩略图增加播放按钮 (2010-3-8 18:5:27)
css属性之clip (2010-2-25 15:46:54)

@Font-face 用法及全部浏览器支持的方法

xunzou@gmail.com (冰剑) — Wed, 08 Jun 2011 17:33:53 +0800

@Font-face基本介绍：

@font-face 是一个css2的一个语法，它允许你在网页上显示一个自定义的字体。即使客户机器上可以没有安装这种字体，网页也可以显示。

本文将介绍@font-face的基本用法，以及在所有浏览器都能使用的方法。

@Font-face基本语法：

@font-face {   font-family: <a-remote-font-name>;   src: <source> [,<source>]*;   [font-weight: <weight>];   [font-style: <style>]; }

具体介绍请移步到这里：https://developer.mozilla.org/en/css/@font-face

一个例子：

@font-face {   font-family: MyHelvetica;   src: local("Helvetica Neue Bold"),   local("HelveticaNeue-Bold"),   url(MgOpenModernaBold.ttf);   font-weight: bold;
}

font-family是字体的名称，src是字体的路径，可以是客户本机字体，也可以是服务器上的字体。

@Font-face目前浏览器的兼容性：

Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；
Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；
Internet Explorer：自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；
Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。

@Font-face 让所有浏览器都兼容的方法：

有一个专门用于@font-face 的字体网站：http://www.fontsquirrel.com/fontface/generator

fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具，可以生成不同的字体格式，并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供的一些字体，也可以上传你自己的字体还是用。

@font-face Kit Generator demo
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html
@font-face Kit Generator demo
http://www.font2web.com/

@font-face demo
http://www.xunzou.com/demo/font-face/font-face.html

其它font服务：

Google font API，也是一个不错的字体服务，另外一些字体替换还有cufon等。
Google font API 可以参考之前的一片文章：http://www.xunzou.com/blog/post/619.html

参考资料：

http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
https://developer.mozilla.org/en/css/@font-face
http://www.miltonbayer.com/font-face/
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
http://www.fontsquirrel.com/fontface/generator

继续阅读《@Font-face 用法及全部浏览器支持的方法》的全文内容...

分类: 前端技术 | Tags: font CSS | 添加评论(5)

在web页面中引用css的四种方法 (2011-11-30 15:4:58)
google font API 使用指南 (2011-2-23 15:31:37)
Css content属性详解 (2010-7-6 18:54:17)
视频播放缩略图增加播放按钮 (2010-3-8 18:5:27)
css属性之clip (2010-2-25 15:46:54)

Html5初探（1）——HTML5新增标签及属性

xunzou@gmail.com (冰剑) — Sat, 12 Mar 2011 16:19:01 +0800

HTML5已经出来了很长时间了，最近也终于有空写一下HTML5的一些内容。本文主要了解一下HTML5新增加的一些标签及属性。

HTML5增加了一些新的标签，

HTML5新增加的标签主要有： article、aside、audio、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、ruby、section、summary、time、video、source、wbr

下面来对一些标签进行介绍

article

article标签表示一篇文章、博客日志等，实例代码如下：

[code=html]

这是我的第一篇博客文章

html5是一项新的技术。

[/code]

aside

aside标签用于定义一个与主要内容有关的辅助性内容。

audio

audio标签html5新增加的一个新的标签，用于显示网页上的声音媒体，之前都是借助第三方插件来实现网页声音。目前有是三种声音格式在html5里能被支持，.Ogg， .MP3 和 .WAV。audio标签的基本格式如下

[code=html]

Y你的浏览器不支持video,请更新你的老爷车浏览器。

[/code]

audio 标签的属性

audio有5个属性src、loop、preload、autopaly、controls；

src有一个值“url”，用来定义一个音频地址、以是本地地址、也可是是远程服务器的地址

loop有一个值“loop”定义音频是否重复播放。

preload表示音频是否预先加载。它有三个值：

auto值表示：页面一打开就开始加载；
Metadata值表示：页面不预先开始加载，但是音频文件的一些属性信息可以加载，比如文件大小、第一帧等信息；
none值表示：不预先加载。

autopaly有一个值“autoplay”，定义视频自动播放。如果定义了这个属性，将会覆盖上面的preload属性。

controls有一个值“controls”，定义音频的控制按钮，比如播放、暂停、音量等。

canvans

canvans标签用于定义一个图形，使得web开发人员不用借助三方插件（flash、Silverlight）来完成图像的制作，而是直接使用javascript脚本来绘图。Canvans标签有宽、高属性

关于canvans绘图的一些内容，详细可点击这里查看IBM的教程：使用 HTML5 canvas 进行 Web 绘图

command

command标签用于定义命令按钮。实例代码

[code=html]
Click here for more info on HTML5!
[/code]

command有5个属性type=command/radio/checkbox、checked= checked、disabled=disabled、label=[ command name]、icon=[一个url]、radiogroup=[ radiogroup的名字]

datalist

datalist标签用于定义一个下啦列表，示例代码如下：

[code=html]

[/code]

details

details标签用于定义关于一个文档的详细说明。Details有一个属性open值为open。

embed

embed标签用于定义一个外部的内容或插件，可以是任何的媒体文件。

footer

footer标签用来定义一个页脚/页面底部。可以是整个网页的footer，也可是一个section的footer。

header

header标签用来定义一个页脚/页面底部。可以是整个网页的header，也可是一个section的header。

hgroup

hgroup标签用来定义一组标题。比如：

[code=html]

冰剑blog

专注于web前端开发

[/code]

nav

nav 标签用来定义一个导航。可以是整个网页的导航，也可是一个section的导航。

[code=html]

这是一个mark标签的例子，这里需要标记一下。

[/code]

meter

meter标签是用来测量一个范围。有一个预先定义的最小值喝最大值。必须预先指定一个范围。有最小值喝最大值。

[code=html]

你的分数： A+

[/code]

high值为一个数值，表示这个定义的范围的最高部分；

low 值为一个数值，表示这个定义的范围的最低部分；

max值为一个数值，表示这个定义的最大值；默认为1

min 值为一个数值，表示这个定义的最小值；默认为0

optimum值为一个数值，表示这个定义的范围的最佳值、最好值；

value 值为一个数值，表示这个定义的实绩值；

output

output标签是用来显示通过指令计算出来的结果

progress

progress标签是用来显示一个进度。它包含两个属性：value 表示的是当前进度；max表示一个任务或工程的总量，是一个必须的属性。

section

section 表示一个页面文档的一部分，包括header、footer、article等。

summary

summary标签是用来显示一个摘要，它是details标签的一个子元素，也就是说，它必须和details标签一起使用。

[code=html]

冰剑blog

专注于web前端开发

[/code]

time

time标签是用来显示一个日期，或者时间。

[code=html]

我大概 09:00到达。

I have an appointment with doctor on date day.

[/code]

video

video标签是用来显示一个视频。Source 是video标签的一个子元素，用来显示视频来源。Source 的type属性来显示视频的类型。Video示例代码如下：

[code=html]

你的浏览器不支持video标签，点击这里查看视频

[/code]

总结：

写关于HTML5方面的东西，可能会有一些错误或者不当的地方。欢迎大家在下面的评论里和我交流！

本文由冰剑原创文章。转载请注明出处，来自冰剑blog。

一些HTML5的参考资料：

IBM-- HTML5专题：http://www.ibm.com/developerworks/cn/web/lp/html5/

W3C-- HTML5： http://www.w3.org/TR/html5/

W3C-- HTML5 Reference ： http://dev.w3.org/html5/html-author/

HTML5 Tag Reference ： http://www.w3schools.com/html5/html5_reference.asp

继续阅读《Html5初探（1）——HTML5新增标签及属性》的全文内容...

分类: 前端技术 | Tags: HTML5 | 添加评论(13)

还没有相关文章，您来说两句？

google font API 使用指南

xunzou@gmail.com (冰剑) — Wed, 23 Feb 2011 15:31:37 +0800

最近一个客户的网站用了一个非标准的字体，客户要求用google font API来替换这个非标准字体。由于之前没有做过这个，就上google上找了找网站，现将使用方法分享给大家。

google font API 是什么呢？

google font API 是google推出的一款支持高质量的开源字体文件的服务。

网站地址：http://code.google.com/apis/webfonts/

字库地址：http://www.google.com/webfonts

怎样使用google font API ?

第一步：在你的html页面里面像添加普通样式表一样，添加字体的样式连接。这里以“Fontdiner Swanky”字体为例：

[code=html]
[/code]

第二部，在需要使用字体的地方用font-family给元素定义样式：

[code=css]
h3{font-family: 'Fontdiner Swanky', arial, serif; }
[/code]

Ok，现在打开你的页面浏览就可以看到字体变成“Fontdiner Swanky”字体了。

注意，大家看到font-family里面不仅仅只写了一个字体，是因为我要给我们的h3留个备选字体，如果某些原因导致了google font api不能工作，我们的元素也有备选字体。其实我们在平时的页面制作中也应该这样做。

使用google font API 的好处

不必使用一些cufon等之类的字体替换，或者背景图替换，减少了页面对服务器的连接数；
使用的是google的cdn,而不是服务器上传的字体，减轻了服务器的流量压力；

元素里面用的是普通文本，即使没有样式，或者使用屏幕阅读器，都能看到内容。

google font API 的其它用法

上面只是介绍了google font API的一个普通的用法，如果有一个以上的字体呢？并且字体还有bold，italic等属性，当然google也考虑到了，下面介绍一些复杂的用法。

多种字体：

[code=html]
[/code]

上面我们可以看到family后面有三种字体，每个字体之间用“|”隔开，不要有任何空格。第三个字体中间有加号，因为有的字体名字中间有空格，这里需要将空格转换为“+”

字体多种样式：

[code=html]
[/code]

上面我们可以看到family后面的字体“Tangerine”后面有个冒号，后面是bold, bolditalic ，这就是字体的样式，加粗，加粗斜体。

注意，这里的每个字体样式之间用“,”(逗号)隔开。

上面的bold, ,bolditalic 等也可以缩写：

斜体：italic可以写为italic或者i；
粗体：bold可以写为bold或者b；
加粗斜体bold italic可以写为bolditalic 或者 bi。

总结

google font api 能够在绝大多数的浏览器里运行，并且不依赖于javascript。它里面的字体都是开源字库，所以，你可以随意的使用。

但是它也有一定的局限性。目前字体还比较少，不支持中文字体。

如果你有什么问题，欢迎在下面的评论里与我交流。

继续阅读《google font API 使用指南》的全文内容...

分类: 前端技术 | Tags: google font api | 添加评论(5)

@Font-face 用法及全部浏览器支持的方法 (2011-6-8 17:33:53)

自适应浏览器窗口的页面背景

xunzou@gmail.com (冰剑) — Wed, 29 Dec 2010 17:03:03 +0800

最近在做的一个项目中，客户要求网页的背景不管客户浏览器大小多大，背景都要铺满全屏。在网上找了一下，有人已经研究出来了方法，不用js就可以做到。下面看代码：

CSS代码：
[code=css]
html, body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
body {/*为页面body添加一些基本信息*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
background:#DDDAD9;
}
#wrap{position:absolute;width:100%; height:100%;top:0; left:0; overflow:auto;overflow-x: hidden; z-index:2;}
#background {position:absolute; z-index:-1; width:100%; height:100%;}
.container{width:960px;margin:0 auto;}
[/code]
HTML结构代码：
[code=html]

这里是Main content

[/code]

解释一下上面的css和html，这个其实就是将html和body的滚动条取消，用div#wrap容器来模拟页面的滚动条。其实并不是用图片做背景的，是将background的图片z-index设置为-1；使它放在wrap页面的底部，这样既覆盖了body的背景色和背景图（如果有），又使内容区域的最上面。

点此查看demo

这样看起来没啥问题了，挺好。

但是，但是客户的要求是千变万化的，客户说：如果我的img的src地址出错了，怎么办，这样把，我再在body里面增加一个bg吧。然后css就变成了这样：

[code=css]
body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
background:#DDDAD9 url(images/bg.png) no-repeat center top;
}
[/code]

点此查看#background没有背景的demo

但是，但是客户看了之后说：这个背景图要随着内容变化，也变化，不能让它固定在浏览器窗口上面。于是，再搜索信息，再修改：

在网上找到了一个外国佬写的一个Jquery插件Full Size Background Image jQuery Plugin

他做的一个demo： Full Size Background Image jQuery Plugin DEMO

具体使用方法：
CSS代码：
[code=css]
html {height:100%;}
body {/*为页面body添加一些基本信息*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height:100%;
line-height:1.5;
color:#FFFFFF;
#background {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: auto;
z-index: -1;
overflow: hidden;
}
#wrap{position:absolute;width:100%;height:100%;top:0; left:0; z-index:2;}
.container{width:960px;margin:0 auto;}
[/code]
HTML结构代码：
[code=html]

这里是Main content

[/code]

但是他这个插件有一个问题，当页面内容高度超过一个屏幕的高度，在ie6浏览器下会出现问题，背景图片只出现在了当前页面的当前窗口，当拉动页面右边的滚动条的时候，下面就没有背景了。请分别在ie6和其它浏览器里浏览：

点此查看demo

并且当添加的图片背景不存在的时候，ie6浏览器页面底部会出现一大块空白，查看下面没有背景的demo, 请分别在ie6和其它浏览器里浏览：

点此查看demo

于是又对页面css进行修改：
[code=css]
html {height:100%;_overflow:hidden;}增加overflow:hidden;
#wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflow-x:hidden; z-index:2;}
[/code]

添加了上面的代码之后，解决了上面的问题，当页面内容高度超过一个屏幕的高度的时候，ie6下面不会再出现问题，请看demo：

点此查看demo

但是由于在ie6下面这是用wrap模拟的滚动条，所以在ie6页面下，当#background标签没有图片的时候，body背景图会固定在窗口里不变。请看demo：

点此查看demo

总结：

文章前两个demo没有用js，纯css写的，唯一不足之处就是：当页面#background没有图片的时候，拉动右边滚动条，body的背景是不变的。

文章后面四个demo用了js，不足之处就是：ie6浏览器会出现一些问题，当然如果不考虑ie6的话，就可以这里的4个demo中的任意一个了。

其实这里我们考虑的body的背景问题，如果不考虑body的背景问题的话，我们完全可以用纯css的那个demo。

如果你有什么好的意见和建议，欢迎在下面的评论处与我交流。

继续阅读《自适应浏览器窗口的页面背景》的全文内容...

分类: 前端技术 | Tags: background fullbg | 添加评论(4)

还没有相关文章，您来说两句？

blockquote 引用的分析

xunzou@gmail.com (冰剑) — Sat, 27 Nov 2010 00:10:36 +0800

平时我们在制作页面的时候，总是会碰到这样那样的引用，比如引用某人的一句话，或者引用一些名言警句，我们可以用一些引号将其特殊区分开来。现对平时遇到的一些引用的相关例子进行一些分析：

例子1：

例子2：QQ空间的一些好友说的话

下面提供四种类似的解决方法：

第一种实现方法：

用blockquote来做左边引号的背景，用p来做右边的背景

HTML代码：
[CODE=html]

10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。

[/CODE]
CSS代码：
[CODE=css]
.box .bq1 {
color:#333;
background:#ccc url(images/quotebefore.gif) no-repeat 10px 10px;
text-indent:30px;
padding:10px;
margin:50px 0;
}
.box .bq1 p {
margin:0;
background:url(images/quoteafter.gif) no-repeat right bottom;
}
[/CODE]

第二种实现方法：

用blockquote来做左边引号的背景，用一个空标签，比如span来做右边引号的背景，将span设置为left或者right的padding，然后给span加背景。

HTML代码：
[CODE=html]

10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。

[/CODE]
CSS代码：
[CODE=css]
.box .bq2{
color:#333;
background:#ccc url(images/quotebefore.gif) no-repeat 10px 10px;
text-indent:30px;
padding:10px;
margin:50px 0;
}
.box .bq2 span {
padding:0 0 0 25px;
background:url(images/quoteafter.gif) no-repeat;
}

[/CODE]

第三种实现方法：

用blockquote的after和before伪类来做两个前后的引号。不过ie6不支持。

HTML代码：
[CODE=html]

10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。

[/CODE]
CSS代码：
[CODE=css]
.box .bq3 {
background:#666;
color:#CCC;
margin:0;
padding:20px 10px;
}
.box .bq3:before, .box .bq3:after {
display:inline-block;
height:16px;
font-size:40px;
vertical-align:-16px; /*修复位置*/
line-height:20px;
content:"“";
color:#000;
}
.box .bq3:after {
content:"”";
}

[/CODE]

第四种实现方法：

在blockquote里面增加两个标签，在标签里用文字的引号。

HTML代码：
[CODE=html]

“10M的网卡中只有四根弹片，8根线中另四根不起作用所以要求低，两边是同一顺序就行，但最好按规范做；100M的网卡中有8根弹片，四根用于数据传输，另四根用于防串扰，严格按照规范做线能减少网络故障。”

[/CODE]
CSS代码：
[CODE=css]
.box .bq4 {
color:#333;
background:#ccc;
padding:10px;
margin:50px 0;
}
.box .bq4 strong {
font-size:36px;
*font-size:28px;
font-family:Arial, Consolas;
display:inline-block;
display: -moz-inline-stack;/*firefox 2 的display inline-block */
line-height:38px;
*line-height:30px;
height:16px;
overflow:hidden;
vertical-align:-1px;
*vertical-align:6px;
color:#999999;
}

[/CODE]

以上四种方法，只是个人总结，如果你有更好的建议或方法，可以留言共同探讨

查看demo：http://www.xunzou.com/demo/blockquote/blockquote.html

继续阅读《blockquote 引用的分析》的全文内容...

分类: 前端技术 | Tags: blockquote | 添加评论(5)

还没有相关文章，您来说两句？

一款JQuery Slider 插件----bxSlider

xunzou@gmail.com (冰剑) — Mon, 15 Nov 2010 21:31:14 +0800

今天在做一个页面的时候，需要一个Slider的效果，由于客户要求要用Jquery来做，就想着去网上找一个方便的，实用的Slider插件。

bxSlider 是一个 jQuery 的插件，它可以实现 Slider 和滚动效果。这个插件使用非常简单，并且也比较小，是一个轻量级的Jquery插件。

bxSlider使用：

要使用bxSlider，必须先下载Jquery的库，你可以在这里下载：www.JQuery.com。当然，你也可以直接使用下面的CDN。链接到你的页面即可：

jQuery CDN: http://code.jquery.com/jquery-1.4.4.min.js Minified version; http://code.jquery.com/jquery-1.4.4.js Source version
Google Ajax API CDN: https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
Microsoft CDN: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js

下载bxSlider插件：

http://bxslider.com/jquery.bxSlider.zip

查看相关demo

http://bxslider.com/

下载完成后：

在你的页面head区域添加：
[CODE=html]

[/CODE]
html代码如下：
[CODE=html]

hello i am the first header!

and i am some groovy body text.
hello i am the second header!

and i am some more groovy body text.

[/CODE]

bxSlider 详细配置参数：

bxSlider有很多配置参数，使你能够用参数制作出各种各样的slider效果：

[code=html]
mode: 'horizontal', // 'horizontal', 'vertical', 'fade' 定义slider滚动的方向，有三个值可供选择
infiniteLoop: true, // true, false - display first slide after last 无限循环
hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果设置true，将会在最后一个幻灯片隐藏“next”，在最前面的幻灯片因此“prev”
controls: true, // true, false - previous and next controls 是否显示“previous”和“next”按钮
speed: 500, // integer - in ms, duration of time slide transitions will occupy 速度，单位为毫秒
easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
pager: true, // true / false - display a pager
pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4 如果设置full，将显示1，2，3……，如果设置short，将显示1/4 .
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 页码的位置
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 页面分隔符
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 当前页码的className
nextText: 'next', // string - text displayed for 'next' control 下一页的文字
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以设置下一页为图片
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string - text displayed for 'previous' control 上一页的文字
prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一页的图片
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false - display image captions (reads the image 'title' tag) 是否显示图片的标题，读取图片的title属性的内容。
captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically 幻灯片自动滚动
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse 自动滚动的顺序
autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自动滚动的控制键
autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
autoStart: true, // true, false - if false show will wait for 'start' control to activate
autoHover: false, // true, false - if true show will pause on mouseover 设置鼠标mouseover将会使自动滚动暂停
autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
pause: 3000, // integer - in ms, the duration between each slide transition 过渡时间
startText: 'start', // string - text displayed for 'start' control 开始按钮的文字
startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' 开始按钮的图片
stopText: 'stop', // string - text displayed for 'stop' control 停止按钮的文本
stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg' 停止按钮的图片
ticker: false, // true, false - continuous motion ticker mode (think news ticker)
// note: autoControls and autoControlsSelector apply to ticker!
tickerSpeed: 5000, // integer - has an inverse effect on speed. therefore, a value of 10000 will
// scroll very slowly while a value of 50 will scroll very quickly.
tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
tickerHover: false, // true, false - if true ticker will pause on mouseover
wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
displaySlideQty: 1, // integer - number of slides to display at once
moveSlideQty: 1, // integer - number of slides to move at once
randomStart: false, // true, false - if true show will start on a random slide

[/code]

继续阅读《一款JQuery Slider 插件----bxSlider》的全文内容...

分类: 前端技术 | Tags: jquery slider | 添加评论(2)

还没有相关文章，您来说两句？

Css content属性详解

xunzou@gmail.com (冰剑) — Tue, 06 Jul 2010 18:54:17 +0800

Content作为css的一个属性，它可以和伪对象:before :after一起使用。

例如：

CSS

[CODE=css]
.xunzou:before {
content:"你好啊";
color:#F00;
}
[/CODE]

html

[CODE=html]

欢迎光临我的blog

[/CODE]

浏览器显示的应该是：

这里红色的文字，你好啊，由content生成

Content 的值还可以设置为元素的属性

例如：

CSS

[CODE=css]
.xunzou2:hover{position:relative;z-index:1}
.xunzou2:hover:after{
content:attr(href);
padding:8px;
background:#DCDCDC;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
position:absolute;
left:0;
top:150%;
z-index:2
white-space: nowrap;
-moz-box-shadow:2px 2px 5px #333;
-webkit-box-shadow:2px 2px 5px #333;
box-shadow:2px 2px 5px #333;
}
[/CODE]

html

[CODE=html]
欢迎光临我的blog
[/CODE]

浏览器显示的应该是：

点此查看demo

继续阅读《Css content属性详解》的全文内容...

分类: 前端技术 | Tags: CSS content | 添加评论(5)

在web页面中引用css的四种方法 (2011-11-30 15:4:58)
@Font-face 用法及全部浏览器支持的方法 (2011-6-8 17:33:53)
视频播放缩略图增加播放按钮 (2010-3-8 18:5:27)
css属性之clip (2010-2-25 15:46:54)

css3多列布局模块研究

xunzou@gmail.com (冰剑) — Mon, 31 May 2010 17:30:20 +0800

CSS3多列布局模块是css3提出的新的东西，可以将文章分成多列显示。

下图是应用了column样式后在webkit内核浏览器里的显示效果

column属性详解：

多列有四个属性，可以随意用1到4个：

column-count：列数
column-gap：两列中间的空隙;
column-rule：两列中间的分割比如：1px solid #333;
column-width：每列固定宽度;

用到的css：

[CODE=css] -webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule:5px solid #333;
-webkit-column-width:100px;

-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule:5px solid #333;

column-count: 3;
column-gap: 10px;
column-rule:5px solid #333;
column-width:50px;
[/CODE]

查看demo记得用firefox、以及chrome和Safari浏览哦

w3c官方的解释

CSS3info

继续阅读《css3多列布局模块研究》的全文内容...

分类: 前端技术 | Tags: css3 column | 添加评论(4)

用css3创建的3d效果的“带子” (2010-4-24 12:23:30)
CSS3属性选择符及其伪类 (2010-3-13 15:10:41)

腾讯微博邀请码十三个（已经全部注册完毕）

xunzou@gmail.com (冰剑) — Tue, 11 May 2010 08:26:29 +0800

腾讯微博邀请码曾经一码难求，现在是一码难送，特给大家送一些微博邀请码：

注册地址：http://t.qq.com/

划删除线的为已经使用过的邀请码，请大家使用过后留言注明一下，方便其他人注册。

8个微博邀请码：

~~http://t.qq.com/invite/fca1a1126d1deb3259c5~~

~~http://t.qq.com/invite/b25c9135a3b22cadda73~~

~~http://t.qq.com/invite/f50f0ca41787927c33b1~~

~~http://t.qq.com/invite/cf9b98a0094cdf6f66b7~~

~~http://t.qq.com/invite/7c9e05dfc370de2b0a55~~

~~http://t.qq.com/invite/5cd3bf2bcec7444da451~~

~~http://t.qq.com/invite/10fef405f454f9ab1345~~

~~http://t.qq.com/invite/a2e9e9b686c5709c63e9~~

请大家用过之后在下面留言，我好标记用过的邀请码。

刚发完又有5个了，再增加5个：

~~http://t.qq.com/invite/a50bef60d39001ab6589~~

~~http://t.qq.com/invite/8f91095181cfcc99bcef~~

~~http://t.qq.com/invite/eeae2aa54b4a07f1ec9f~~

~~http://t.qq.com/invite/353598790e29547a000b~~

~~http://t.qq.com/invite/5b6ec30c925a92618885~~

继续阅读《腾讯微博邀请码十三个（已经全部注册完毕）》的全文内容...

分类: 乱七八糟 | Tags: | 添加评论(3)

还没有相关文章，您来说两句？

冰剑'blog

在web页面中引用css的四种方法

1.用标签：

2.用@import规则：

3.用style元素

4.用内联样式

总结：

相关文章:

@Font-face 用法及全部浏览器支持的方法

@Font-face基本介绍：

@Font-face基本语法：

@Font-face目前浏览器的兼容性：

@Font-face 让所有浏览器都兼容的方法：

其它font服务：

参考资料：

相关文章:

Html5初探（1）——HTML5新增标签及属性

HTML5增加了一些新的标签，

article

这是我的第一篇博客文章

aside

audio

audio 标签的属性

canvans

command

datalist

details

embed

footer

header

hgroup

冰剑blog

专注于web前端开发

nav

google font API 使用指南

google font API 是什么呢？

怎样使用google font API ?

使用google font API 的好处

google font API 的其它用法

总结

相关文章:

自适应浏览器窗口的页面背景

blockquote 引用的分析

第一种实现方法：

第二种实现方法：

第三种实现方法：

第四种实现方法：

一款JQuery Slider 插件----bxSlider

bxSlider使用：

hello i am the first header!

hello i am the second header!

bxSlider 详细配置参数：

Css content属性详解

相关文章:

css3多列布局模块研究

相关文章:

腾讯微博邀请码十三个（已经全部注册完毕）