Srain的共享空间: CSS

Profil de SrainSrain的共享空间PhotosBlogListes

Outils

Aide

Blog

Résumé

Regroupement par :

<< Première < Précédente Suivante > Dernière >>

4 juin

CSS3介绍第四章用户界面

//Srain翻译原文地址：http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface

本教程将来看看在CSS3中操作用户界面的一些新的方法。那么，我们说的“用户界面”究竟是指什么呢？CSS3带来了一些新的伟大的性能，涉及改变大小，光标定位，轮廓，方框布局等。在这个教程中，我们将注意力放在用户界面的三个重要改善上面。在我们的CSS3例子页面可以看到下面的例子，当然，多是只能在最新的浏览器下实现：

查看在线例子页面

改变大小

最新的版本的Safari浏览器有一个功能，可以调整文本域的大小。这是非常的改进，也是我几乎每天都会用到的。CSS3可以让你在任何与案件中很轻易的使用这个功能，最终实现跨平台兼容。它的代码是resize:both; line:（resize是调整大小的意思）：

.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

盒子尺寸调整

“盒子模型”是CSS3应用更广泛的一个领域，在正式的规范里面，有充分的信息可以证明这一点。盒子尺寸调整可以让你定义某些内容，以一种特殊的方式扩充一个区块。举个例子，如果你想要两个有边框的盒子并排排列，就可以通过设置“border-box”（盒子边框）来实现。强制浏览器使边框与指定的宽度和高度相同，并把边框和间距距填充在盒子里面。

目前，所有的浏览器都要求支持额外的标点符号-你可以查看完整的例子页面代码列表，这是一些基本的可能：

.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}

.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

轮廓

在CSS2里面已经可以看到可以设置一个元素的轮廓了，但是在CSS3里面，包括了可以使元素远离轮廓的方法-用你定义的一个值，不同于从边框定义的两个地方：

1轮廓不占用空间

2轮廓可以不是矩形

可以以以下的方式创建：

.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

总结：

在设计社区，这些功能不是革命性的，而且不可能引起轰动。不可否认的是，他们是有用的，尤其是给读者用来调整内容。

在这个系列接下来的文章里面，将会探索CSS3更深入的一个革命性的功能-文本分栏。请记住，看看这些功能在线的例子。

本章翻译完了，想和同学们探讨一下下面的词翻译是否准确，是否有更合适的翻译方法？

Outline 轮廓

element 内容元素

cursors 光标定位

box layout 盒子布局

resizing 调整大小

sizing 尺寸调整

padding 间距（？）

00:14 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

31 mai

让层出现下拉滚动条

//iwind 原文地址http://tips.4kiki.net/t/3e387833d4c4848868eb6c05c933afef

有时候div内内容很多的时候，会把div撑破，用下面样式就可以让层的右边出现下拉滚动条
width:100px;
height:100px;
overflow-y:auto;
overflow-x:hidden

示例：
<style type="text/css">
div {
    width:100px;
    height:100px;
    overflow-y:auto;
    overflow-x:hidden;
}
</style>

<div>Sraiin翻译：CSS3系列文章的第三章将会深入探讨新的文字特效。毫无疑问，排版技术是设计一个布局最重要的部分之一。透过一个网页的字体可以吸引浏览者，以一种特别的表达方式，在不同的内容里面提供有冲击力、微妙的或辅助性的效果。CSS已经有很多的方法去设计文字，但仍局限于少数的领域里面，CSS3会提供一些途径去解除这些限制。</div>

18:52 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

30 mai

CSS3介绍第三章文字特效

//Srain翻译

原文地址：http://designshack.co.uk/tutorials/introduction-to-css3-part-3-text-effects

CSS3系列文章的第三章将会深入探讨新的文字特效。毫无疑问，排版技术是设计一个布局最重要的部分之一。透过一个网页的字体可以吸引浏览者，以一种特别的表达方式，在不同的内容里面提供有冲击力、微妙的或辅助性的效果。

CSS已经有很多的方法去设计文字，但仍局限于少数的领域里面，CSS3会提供一些途径去解除这些限制。

所有的例子如下所示，可以在我们的CSS3例子页面找到。当然，很多的效果只能在最新的各种浏览器中呈现：

查看在线例子页面

文字阴影

文字阴影听起来可能有点简单，但这完全取决于你怎样实现他们。当为这篇文章做实验的时候，我发现一些组合看起来比较可怕，有一些可以实现比较有吸引力的、奇妙的特效。阴影特效可以很好的用于标题，Matthias Kretschmann 的博客上面有一些非常好的例子。

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

自动换行

目前，如果一行里面语句太长的话，会自动延伸到这个区域的外面，这种事情不是经常发生，但偶尔也会以外出现。新的语句包含能力允许你强制将文字包起来：即使这意味着把这个语句分开。这段代码难以置信的直接：

.text_wrap {
word-wrap: break-word;
}

网页字体

虽然这些不能都被列在“文字效果”里面，但我们还是简略的介绍一下。在你的页面里面应用任何字体，一个网页字体是一个简单的方法都会被浏览器自动下载。对于设计来说，这是一个革命性的变化，以前被广发支持的文字限制在10-15。当然，这些新功能也带来了版权方面的争论，因为只有经过授权的字体才可以使用。

目前位置，只有最新版本的Safari（3.1）的浏览器才可以支持网页文字特效，Opera浏览器是另外一个将要能够支持的浏览器，毫无疑问的是，其他的也会紧跟其后，如果实现的一个例子：

@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.co.uk/fonts/font.ttf');
}

举几个页面已经仿照这种技术的几个例子。下面的例子，可以在CSS禅意花园的名单里面找到，所链接的版本只能在特定的浏览器中运行：

结论

很多CSS2欠缺的特征已经在这次升级中被弥补，这篇文章没有覆盖增加的文字特效的方方面面，如果你有兴趣的话，可以阅读关于文字模块的更多东西，所有这些补充都很不错，如果用的巧妙的话，可以大大加强页面的排版布局。

这个系列接下来的文章将扩展到一些在CSS3中用户界面效果的增强，不要忘记看在线的例子。

23:18 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

29 mai

水平细线制作方法

//Srain

做这些技术性不是太强的设计，方法在精不在多，一般掌握一种比较好的方法并能灵活应用就可以了，当我们知道了细边框的制作方法以后，就可以利用同样的方法再稍加变化后做类如水平细线的设计了，现在就拿水平细线来说明一下。

首先，没有看过利用CSS定义制作细边框的同学先看一下这篇文章，因为下面将用到前面定义好的.border样式表。

1.新建一条水平线（<hr/>）

2.将这条线的高度设为0像素（size="0"），这跟前面用的表格边框都是0像素是一样的。

3.去除水平线的阴影效果（noshade="noshade"）

4.应用前面定义好的CSS样式表.border（class="border"）

综合起来的代码就是

<hr size="0" noshade="noshade" class="border" />

是不是很简单呢？赶快预览看看吧。如果你用的是Dreamweaver CS3网页制作工具的话，就可以在点选水平线后，在属性面板设置水平线的高度和去掉阴影的选框，然后在“类”里面选择border就可以了。

别忘记了.border是我们已经定义好的：

<style type="text/css">

</style>

这个时候的水平细线的颜色是红色的，可以通过改变#FF0000来改变它。

利用CSS定义制作细边框

//Srain

定义CSS，新建一个新的样式表，名称为.border

<style type="text/css">

</style>

上段代码的意思是边框（border）的宽度为1像素（px）的实线（solid），颜色为红色（#FF0000）

在新建一个边框宽度为0像素的表格，并应用已定义的CSS样式表.border

<table width="559" height="96" border="0" class="border">
<tr>
<td height="42"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

这样我们就做了宽度只有1像素的细边框，我认为这是目前为止制作细边框的最好的方法了。

当然，如果对代码不是很懂或者觉得代码比较复杂的同学可以利用Dreamweaver所见即所得的方法来实现，我以Dreamweaver CS3的版本来说明：

1.在CSS面板右键选择“新建”弹出新建样式的对话框
2.在新建CSS规则对话框中，选定“类”，“仅对该文档”，名称可以填上.border，点确定就可以进入详细设置了。
3.选择.border的CSS规则定义的“边框”选项，样式下面选“实线”，宽度填1（注意是1像素），颜色选择红色，点击“确定”，就建好了一个样式表。
4.回到Dreamweaver设计视图，选择已插入的表格，在属性栏中的类中选择“border”，保存。这样就成功了。

是不是比较复杂呢？所以说，学习一些CSS语法对我们的设计师来说，还是很有用的，以后我们可以尝试着用CSS来做如圆角边框、阴影边框或者有渐变效果的表格填充。最近正在翻译CSS3的介绍文章，希望能给大家一些帮助。

28 mai

CSS3介绍第二章边框

//Srain 翻译

原作地址：http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

作为CSS3介绍第二章，我们来看看边框。使用CSS的时候，我们最熟悉它的边框属性：它是一种结构化的内容，可以作用于图片，也可以改善页面结构。利用渐变、圆角、阴影和图片边框效果，CSS3将边框应用提升到一个新的等级。让我们来看看一些比较详细的CSS3使用的例子吧。

所有的都会呈现在我们的CSS3例子页面。当然，很多都需要各种最新的浏览器支持。

点击查看例子页面

圆形的边框

利用现有的CSS代码可以实现圆形的边框，不幸的是，虽然有很多方法，但没有一个是直接达到目的的。为图像创建的每个边框，往往需要另外添加。但如果使用CSS3，创建一个圆形边框则非常简单，它可以应用于每个角，也可以应用于单独的一个角，并且，很容易改变宽度和颜色。CSS的代码如下：

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

渐变

如果能正确的使用的话，渐变边框看起来比较有效果，这个代码复杂了一点，需要你去定义每个颜色的渐变。如下面代码所示：

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

方块阴影

就目前来说，要加入阴影效果还是比较困难的，一个不错的方法就是，把它分几个区域，但同任何的效果一样，还是少用为妙。CSS的代码如下：

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

图形边框

图形边框是个最有用的补充，我们期待发掘人们选择怎样使用它们。CSS可以重复使用，也可以扩展你所选择的图形边框。这样的CSS代码跟下面的有些类似（目前不同的浏览器都可以支持）：

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

总结

CSS3的边框是具有革命意义的，这些CSS3新增的东西，必将为你的设计工作节约大量的时间。它还将有很长的一段路要走，以后会简化布局和允许你创建有视觉冲击力的模块，甚至开始丢掉PhotoShop。

这个系列接下来的文章中，将扩展到一个新的领域：文字特效。千万要记住去看我们的CSS3在线例子，点击这里查看CSS3例子页面。

21:42 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

27 mai

CSS3介绍第1章 CSS3是什么？

//Srain翻译对CSS还不是很熟悉，所以如果发现翻译过程中有谬误的话，欢迎批评指正，srain_liu@live.cn

原作者：Design Shack

原文地址： http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it

此文章将分为几个章节，介绍一个建立在CSS2基础上的、新的CSS3标准。我们将从最基础的部分开始，让你从从来没有听说过CSS3，到能够随时运用各种功能，并开始广泛运用它。

CSS3是什么？

css3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。这第一个教程将给你一些利用这个标准创造新的可能性最基本的介绍。

模块

CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：

盒子模型
列表模块
超连结方式
语言模块
背景和边框
文字特效
多栏布局

点击查看完整的列表模块

时间表

几个模块现已完成，包括的SVG （可扩展矢量图形），媒介资源类型（Media Queries）和命名，而其他的模块开发工作则仍在进行中。如果要给出一个预定的日期的话，非常困难，不管怎样，web浏览器将全面支持CSS3的各种新特点，一些新的探索已经开始了。针对不同浏览器，新的功能是逐渐应用的，仍然需要1-2年的时间，每一个新的模块才有可能被广泛应用。

CSS3将给我带来哪些新的影响

首先，我们希望，这是个正确的方式，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。这个系列接下来的文章，将分别讲解不同的CSS3模块规范和带来的新的效果，下一章将涉及到CSS3边框。

22:10 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

20 mai

国殇日，网站怎样变灰色

//Srain

在body标签后面加上CSS滤镜语句style="filter:gray"就可以了

<body style="filter:gray"....

附：CSS中的filter常用滤镜属性及语句大全（转）

滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.

1.滤镜:alpha
语法:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明：
Opacity:起始值，取值为0-100,0为透明，100为原图.
FinishOpacity:目标值.
Style：1或2或3
StartX：任 ?
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")

2.滤镜:blur
语法:
STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
说明：
Add:一般为1，或0.
Direction:角度,0-315度，步长为45度.
Strength:效果增长的数值,一般5即可.
例子：filter:Blur(Add="1",Direction="45",Strength="5")

3.滤镜:chroma
语法:
STYLE="filter:Chroma(Color=color)"
说明:
color:#rrggbb格式，任意.
例子：filter:Chroma(Color="#FFFFFF")

4.滤镜:DropShadow
语法:
STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
说明:
Color:#rrggbb格式，任意.
Offx:X轴偏离值.
Offy:Y轴偏离值.
Positive:1或0.
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5.滤镜:FlipH
语法:
STYLE="filter:FlipH"
例子：filter:FlipH

6.滤镜:FlipV
语法:
STYLE="filter:FlipV"
例子：filter:FlipV

7.滤镜:Glow
语法:
STYLE="filter:Glow(Color=color,Strength=strength)"
说明:
Color:发光颜色.
Strength:强度(0-100)
例子：filter:Glow(Color="#6699CC",Strength="5")

8滤镜:Gray
语法:
STYLE="filter:Gray"
例子：filter:Gray

9.滤镜:Invert
语法:
STYLE="filter:Invert"
例子：filter:Invert

10.滤镜:Mask
语法:
STYLE="filter:Mask(Color=color)"
例子：filter:Mask(Color="#FFFFE0")

11.滤镜:Shadow
语法:
filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式.
Direction:角度,0-315度，步长为45度.
例子：filter:Shadow(Color="#6699CC",Direction="135")

12.滤镜:Wave
语法:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1，或0.
Freq:变形值.
LightStrength:变形百分比.
Phase:角度变形百分比.
Strength:变形强度.
例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

13.滤镜:Xray
语法:
STYLE="filter:Xray"
例子:filter:Xray

14.颜色变化
语法：
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

10:19 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

18 mai

带数字的图片切换效果实现代码

//摘自网络，作者不详，有少量改动

<STYLE type=text/css>
   /* 数字按钮框样式 */
   #imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;}
   #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; }
   #imgTitle_down {left:0px;text-align: right; width:inherit; }
   /* 图片框样式 */
   .imgClass {border: 0px solid #000;}
   /* 图片文字框样式 */
   #txtFrom {text-align: center;vertical-align: middle; color:#333333}
   /* 数字按钮样式 */
   .button {text-decoration: none; float:left; height:12px; line-height:12px; padding-left:7px; padding-right:6px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}
   a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}
   a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; }
   .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;}
   /*渐变*/
   .trans { width:88px; height:12px; overflow:hidden}

          </STYLE>
<SCRIPT language=JavaScript type=text/javascript>
   var imgWidth=300;              //图片宽
   var imgHeight=240;             //图片高
   var textFromHeight=21;         //焦点字框高度 (单位为px)
   var textStyle="bt_link";           //焦点字class style (不是连接class)
   var textLinkStyle="FONT"; //焦点字连接class style
   var buttonLineOn="#ce0609";           //button下划线on的颜色
   var buttonLineOff="#000";          //button下划线off的颜色
   var TimeOut=5000;              //每张图切换时间 (单位毫秒);
   var imgUrl=new Array();
   var imgLink=new Array();
   var imgtext=new Array();
   var imgAlt=new Array();
   var adNum=0;
   var theTimer=0;
   var tt=1;
   //焦点字框高度样式表开始
   document.write('<style type="text/css">');
   document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
   document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');
   document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+12)+'px;height:18px}');
   document.write('</style>');
   document.write('<div id="focuseFrom">');
   //焦点字框高度样式表结束


      tt=1;
      imgUrl[tt] ='indexbanner/1.jpg'; //第一张图片，可以用相对地址，也可以用绝对地址
      imgtext[tt]=' 第一张图片说明';
      imgLink[tt]='http://'; //图片链接
      imgAlt[tt]='第一张图片说明';

      tt=2;
      imgUrl[tt] ='http://....jpg'; //第二张图片
      imgtext[tt]=' 第二张图片说明';
      imgLink[tt]='http://';
      imgAlt[tt]='第二张图片说明';

      tt=3;
      imgUrl[tt] ='http://....jpg'; //第三张图片
      imgtext[tt]=' 第三张图片说明';
      imgLink[tt]='http://';
      imgAlt[tt]='第三张图片说明';

      tt=4;
      imgUrl[tt] ='http://.....jpg';   //第四张图片
      imgtext[tt]=' 第四张图片说明';
      imgLink[tt]='http://';
      imgAlt[tt]='第四张图片说明';

                                                //按照同样的格式设置第五、六.....

   var intPage =0;
   for (var i=1;i<=imgUrl.length;i++)
   {
    if (imgUrl[i]!="!!!")
    {
     intPage++;
    }
   }
   function changeimg(n)
   {
    adNum=n;
    window.clearInterval(theTimer);
    adNum=adNum-1;
    nextAd();
   }
   function goUrl(){
   window.open(imgLink[adNum],'_blank');
   }
   //NetScape开始
   if (navigator.appName == "Netscape")
   {
   document.write('<style type="text/css">');
   document.write('.buttonDiv{height:4px;width:21px;}');
   document.write('</style>');
   function nextAd(){
    if(adNum<(intPage-1))adNum++;
    else adNum=1;
    theTimer=setTimeout("nextAd()", TimeOut);
    document.images.imgInit.src=imgUrl[adNum];
    document.images.imgInit.alt=imgAlt[adNum];
       document.getElementById('focustext').innerHTML=imgtext[adNum];
    document.getElementById('link'+adNum).style.background=buttonLineOn;
    document.getElementById('imgLink').href=imgLink[adNum];
    for (var i=1;i<=intPage;i++)
    {
       if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
    }
   }
    document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="imgUrl[1]" name="imgInit" border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>')
    document.write('<div id="imgTitle">');
    document.write('<div id="imgTitle_down">');
   //数字按钮代码开始
   for(var i=1;i<intPage;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}
   //数字按钮代码结束
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');
    nextAd();
   }
   //NetScape结束
   //IE开始
   else
   {
   var count=0;
   for (i=1;i<intPage;i++) {
    if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
     count++;
    } else {
     break;
    }
   }
   function playTran(){
    if (document.all)
     document.images.imgInit.filters.BlendTrans.play();
   }
   var key=0;
   function nextAd(){
    if(adNum<count)adNum++ ;
    else adNum=1;

    if( key==0 ){
     key=1;
    } else if (document.all){
     //imgInit.filters.revealTrans.Transition=6;
     document.images.imgInit.filters.BlendTrans.apply();
        playTran();
       }
    document.images.imgInit.src= imgUrl[adNum];
    document.images.imgInit.alt=imgAlt[adNum];
    document.getElementById('link'+adNum).style.background=buttonLineOn;
    for (var i=1;i<=count;i++)
    {
       if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
    }
       focustext.innerHTML=imgtext[adNum];
    //links_ie_font.links=imglink[adNum];
    theTimer=setTimeout("nextAd()", TimeOut);
   }
   document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: BlendTrans ( duration=1 );" src="javascript:nextAd()" border=0 vspace="0" name=imgInit class="imgClass"></a>');
   document.write('<div id="txtFrom"><a target=_self href="javascript:goUrl()"><span id="focustext" class="'+textStyle+'"></span></a></div>');
   document.write('<div id="imgTitle">');
   document.write(' <div id="imgTitle_down"> <a class="trans"" style="float:left"><img src="http://www.webjx.com/upfiles/20070726/20070726203802_3.gif" border=0></a>');   //数字背景图片
   //数字按钮代码开始
   for(var i=1;i<intPage;i++){document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');}
   //数字按钮代码结束
   document.write('</div>');
   document.write('</div>');
   document.write('</div>');
changeimg(1);
   }
   //IE结束
     </SCRIPT>

效果如下：

21:53 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS

12 mai

发现一本关于CSS的好书

//Srain

　　定价69元RMB，本来想买下来的，但想想自己不是设计师，也不是程序员，何况69 元对我来说并不算少，所以作罢，推荐对CSS 有兴趣，或者工作中有需要的同学们看看，其实包装设计、质感（呵呵，买书也要看手感如何）、内容、思想都是不错的。

　　内容简介

　　本书是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用css 的各项技术，实现令人眩目的网页布局和效果。本书详细介绍了css 核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用了“探索式”的讲解方法，对于一个问题，例如标准流、浮动、定位等规律，均通过一系列动手实验，使读者自己就能够非常自然地得出结论，使读者不但知其然，而且还知其所以然。在本书中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单( 水平的、竖直的、固定宽度的、自适应宽度的、下拉的等)，Tab面板、伸缩面板和折叠面板，以及各种形式的分列布局( 固定宽度的、变化宽度的、固定宽度与变化宽度结合的) ，等等。这样读者在理解了方法的基础上，可以直接将案例用在自己的设计中的，只需要按照所需进行修改即可。本书适合需要使用cSs 的web设计人员和开发人员阅读，最好具备一定的HTML和网页设计制作基础。

14:14 | Ajouter un commentaire | Lien permanent | Ajouter au blog | CSS