Wordpress外贸企业主题, Wp企业主题, wordpress主题定制, PHP代码, ASP代码, 精选JS代码, WORDPRESS, 网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 | 酷码资源 » CSS http://www.3code.cn Wordpress外贸企业主题, Wp企业主题, wordpress主题定制, PHP代码,ASP代码,精选JS代码,WORDPRESS,网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 Fri, 30 Jul 2010 05:13:15 +0000 http://wordpress.org/?v=2.8.5 zh-cn hourly 1 DIV+CSS英文网站优化 http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/ http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/#comments Thu, 29 Jul 2010 15:53:54 +0000 admin http://www.3code.cn/?p=1809 什么是Div+CSS标准?
Div+CSS的标准化设计到底有什么好处?

Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用是一样的。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码
CSS是 Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用 CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

Div+CSS标准的优点:
1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生优化了seo
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，LX不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML，例如：

标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
8.更好的控制页面布局。不用多说。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
17.你可以轻松地控制页面的布局 。
18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

]]> http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/feed/ 0 IE下如何设置iframe背景透明 http://www.3code.cn/ie-iframe-background/ http://www.3code.cn/ie-iframe-background/#comments Tue, 20 Jul 2010 10:32:39 +0000 admin http://www.3code.cn/?p=1717 标签里加入 style="background:transparent;"]]> 首先：在iframe标签中加入 allowtransparency="true"属性
然后：在调用的页面的<body>标签里加入 style="background:transparent;"

示例：
<iframe allowtransparency="ture" src="aa.html" width="500" height="500"></iframe>

aa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body bgColor="transparent">
asda<br>
das<br>
sad<br>
asdddddddddddddddddddd
</body>
</html>

]]> http://www.3code.cn/ie-iframe-background/feed/ 0 简单易用的JS+CSS伸缩菜单 http://www.3code.cn/js-css-menu-2/ http://www.3code.cn/js-css-menu-2/#comments Tue, 11 May 2010 05:27:58 +0000 admin http://www.3code.cn/?p=1643 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>简单易用的JS+CSS伸缩菜单-3code.cn/</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F;
}
#navigation > ul > li > a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{
background-color:#990020;
color:#ffff00;
}

#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
-->
</style>
<script language="javascript">
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.style.display == "none")
oSecondDiv.style.display = "";
else
oSecondDiv.className = "none";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;    //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;    //找到超链接
oA.onclick = change;    //动态添加点击函数
}
}
}
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="/">Basketball</a></li>
<li><a href="/">Football</a></li>
<li><a href="/">Volleyball</a></li>
</ul>
</li>
<li><a href="/">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="/">Contact Me</a></li>
</ul>
</div>
</body>
</html>

]]> http://www.3code.cn/js-css-menu-2/feed/ 0 Firefox与IE在CSS样式表中的差异 http://www.3code.cn/firefox-ie-css/ http://www.3code.cn/firefox-ie-css/#comments Thu, 22 Apr 2010 08:00:22 +0000 admin http://www.3code.cn/?p=1621 1 针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释， 会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“* html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样： ..

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */ .

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 .

2 css布局中的居中问题 .

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } !

说明： .

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 .

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 ..

3 盒模型不同解释. ..

#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff ie6.0
width /**/:500px;
//for ie6.0-
} !

4 浮动ie产生的双倍距离 成功的人生，需要自己去经营，别再说了，莫再等了，现在就为自己的人生做好规划，为人生点亮一盏明灯，赢在人生起跑点上。

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} .

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素); .

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table; .

5 IE与宽度和高度的问题 。

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏 览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是 比较重要的。要解决这个问题，可以这样： .

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 成功的人生，需要自己去经营，别再说了，莫再等了，现在就为自己的人生做好规划，为人生点亮一盏明灯，赢在人生起跑点上。

6 页面的最小宽度 ...

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计： 。

#container{
min-width: 600px;
width:e&shy;xpression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 .

7 清除浮动 .

.hackbox{
display:table;
//将对象作为块元素级的表格显示
} 本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系。


.hackbox{
clear:both;
}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。

......#box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. 。

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) .

p[id]{}div[id]{}
p[id]{}div[id]{} 根据专家观察，这样的理论和现象都是值得各位站长深思的，所以希望大家多做研究学习，争取总结出更多更好的经验!

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例： ..

<div id="box">
<p>p对象中的内容</p>
</div> ..

CSS： .

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } .

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

]]> http://www.3code.cn/firefox-ie-css/feed/ 0 简单有效的纯CSS提示框 http://www.3code.cn/css-tips/ http://www.3code.cn/css-tips/#comments Thu, 22 Apr 2010 06:54:10 +0000 admin http://www.3code.cn/?p=1617 简单有效的纯CSS提示框

先写出HTML结构:

<p>
<a href="http://www.3code.cn/">简单有效的纯CSS提示框<span>(这是提示内容--简单有效的纯CSS提示框)</span></a>
简单有效的纯CSS提示框简单有效的纯CSS提示框简单有效的纯CSS提示框
</p>

上面的代码中，将锚设置类名为tooltip，是为了区别其它不需要提示框的锚。接着，需要将该锚的position属性设置为relative，这样才可验对span的内容进行绝对定位。同时
不希望提示在最初时就显示出来,所以将它的display属性设置为none,经过这些分析,CSS可以这样写,并不难:)

<style>
a.tooltip {position:relative;}
a.tooltip span{display:none;}
a.tooltip:hover span {
display:block;
width:180px;
position:absolute;
top:1em;left:2em;

/*给span加一些填充、边框等----*/
padding:0.2em 0.6em;
border:1px solid #ff6633;
background-color:#ccc;
color:#000;
/*----*/
}

/*为了让IE6.0 也有效果----*/
a.tooltip:hover{
font-size:100%;/*Fixex bug in IE5.x/Win */
/*----*/
}

/*去掉IE显示提示框的下线----*/
a.tooltip:hover span {text-decoration:none;
/*----*/
}
</style>
]]> http://www.3code.cn/css-tips/feed/ 0 兼容IE FIREFOX3.5以上的透明度设置 http://www.3code.cn/ie-firefox3-5-opacity/ http://www.3code.cn/ie-firefox3-5-opacity/#comments Sat, 03 Apr 2010 13:19:06 +0000 admin http://www.3code.cn/?p=1605 filter:alpha(opacity=50);  opacity:0.5;

]]> http://www.3code.cn/ie-firefox3-5-opacity/feed/ 0 经典的菜单效果CSS范例 http://www.3code.cn/css-menu-image/ http://www.3code.cn/css-menu-image/#comments Wed, 20 Jan 2010 06:43:27 +0000 admin http://www.3code.cn/?p=1508 经典的菜单效果CSS范例

用以下CSS，可以实现菜单项常用效果。例如hover时，可以与link时显示不同的背景图片、背景色、字体、字体颜色等等。也就是说这个CSS是通用的，你可以根据他进行拓展应用。
<style>

#topnav {
margin:0px;
margin-top:0px;
padding:0px;
padding-left:0px;
padding-top:5px;
clear:both;
width:100%;
background:#000000; border-bottom:1px solid #202020;
height:20px;
overflow:auto;
}
#topnav ul { padding:0px; margin:0px;}
#topnav ul li {
height:14px;
float:left;
list-style:none;

}
#topnav ul li a {
display:block;
color:#fff;
font-size: 11px;
line-height: 11px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
border-right:1px solid #555;
text-decoration:none
}
#topnav ul li a:hover { color:#ff9900;}
#topnav ul li.current_page_item a {
color:#ff9900;
}

</style>

使用方法：

<div id="topnav" >
<ul>
<li><a href="#">PALV MENU01</a></li>
<li><a href="#">PALV MENU02</a></li>
<li><a href="#">PALV MENU03</a></li>
<li><a href="#">PALV MENU04</a></li>
<li><a href="#">PALV MENU05</a></li>
<li><a href="#" style="border-right:0px;">PALV MENU06</a></li>
</ul>
</div>

]]> http://www.3code.cn/css-menu-image/feed/ 0 FireFox 3.5+不再支持-moz-opacity属性 http://www.3code.cn/firefox-3-5-moz-opacity/ http://www.3code.cn/firefox-3-5-moz-opacity/#comments Sat, 09 Jan 2010 04:59:27 +0000 admin http://www.3code.cn/?p=1470 安装FireFox3.5后，发现以前项目网页中有透明属性的一些DIV都不透明了。于是猜想，FireFox3.5难道不支持它自家的CSS透明属性-moz-opacity了？上网一查，果真如此。
在https://developer.mozilla.org/En/CSS:-moz-opacity里说得很清楚了：
Note:  Firefox 3.5 and later do not support -moz-opacity.  By now, you should be using simply opacity.
现在都要改用opacity这个属性。

于是要设置一下透明度为60%的DIV就应该这样写了：
div.transp { /* make the div translucent */
opacity: 0.6;                /* Firefox, Safari(WebKit), Opera)
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60);   /* IE 4-7 */
zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */
}

opacity这个是属于CSS3里面的东西了，属于CSS3的标准。然而微软IE8还不支持这一属性。

]]> http://www.3code.cn/firefox-3-5-moz-opacity/feed/ 0 在firefox与IE下DIV+CSS Padding效果不同的解决方法 http://www.3code.cn/firefox-ie-divcss-padding/ http://www.3code.cn/firefox-ie-divcss-padding/#comments Mon, 21 Dec 2009 05:48:01 +0000 admin http://www.3code.cn/?p=1371 <div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
以上代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同

fixfox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,

要解决这一个矛盾,可以利用!important

padding-top:5px;
height:10px !important;
height:15px;

以上定义了两个height, 其中一个后面加了!important , IE将会忽略这个属性,而使用后面的height:15px; 而firefox却不会忽略这个属性, 直接使用height:10px

这样就可以很巧妙的解决这个问题

]]> http://www.3code.cn/firefox-ie-divcss-padding/feed/ 2 DIV背景图片在IE下正常,Firefox下不显示 http://www.3code.cn/div-ie-firefox-background-image/ http://www.3code.cn/div-ie-firefox-background-image/#comments Thu, 10 Dec 2009 15:59:09 +0000 admin http://www.3code.cn/?p=1275 DIV背景图片在IE下正常,Firefox下不显示的问题?

一般情况下是因为你的div里面加了float属性, 如float:left，在FF里如果里面的元素加了float属性float:left（right),它就不会被撑开的，也就是说的它的高度是0.

如果正常显示，必须加上：overflow:auto.

即：#div1 {
width:700px;
background-image: url(../images/bg.gif);
overflow:auto；
}

这样子就可以在firefox下显示出背景来,大家试试.

]]> http://www.3code.cn/div-ie-firefox-background-image/feed/ 0 CSS在线使用手册 http://www.3code.cn/css-online/ http://www.3code.cn/css-online/#comments Tue, 01 Dec 2009 18:00:09 +0000 admin http://www.3code.cn/?p=989 CSS在线使用手册

CSS在线使用手册 方便实用。汇集了CSS里面的所有属性和方法。
并有示例，方便调阅。请大家查看。

]]> http://www.3code.cn/css-online/feed/ 0 DIV相对于父DIV底部对齐 http://www.3code.cn/div-subdiv/ http://www.3code.cn/div-subdiv/#comments Mon, 30 Nov 2009 07:31:00 +0000 admin http://www.3code.cn/?p=915 DIV相对于父DIV底部对齐

<style type="text/css"> .box1 {border:1px #cccccc solid;  width:500px; height:600px;position:relative;} .box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:0;} </style> <div>     <div></div> </div>

重点是：bottom:0;

]]> http://www.3code.cn/div-subdiv/feed/ 0 CSS滤镜效果说明 http://www.3code.cn/css-transition/ http://www.3code.cn/css-transition/#comments Thu, 26 Nov 2009 09:36:40 +0000 admin http://www.3code.cn/?p=776 CSS滤镜效果说明

语法：
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
示范:参考文章:
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。

duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式。 0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。

特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
Duration : 可读写。浮点数(Real)。参阅 duration 属性。
Transition : 可读写。整数值(Integer)。参阅 transition 属性。
Percent : 可读写。字符串(String)。设置或检索当前静态滤镜输出在转换进程中所处的点。取值范围为 0 - 100 。默认值为 0 ，转换尚未开始。 100 为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤：
使用转换滤镜的 apply 方法。这将捕获对象内容的初始显示，设置 Percent 特性值为 0 。
改变对象内容。如 visibility ， innerText ， background-color ， border ，或者其子对象的属性。
设置转换滤镜的 Percent 特性。即确定你希望的转换进程中某一点。这将捕获到转换进程中在该点处的一张内容图像。
设置转换滤镜的 Enabled 特性值为 true 。则滤镜作用的对象将依据获取到的图像更新其内容。
请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
status : 只读。整数值(Integer)。检索转换的当前状态。0 | 1 | 2 0 : 转换停止(stop)。
1 : 转换被应用(apply)。
2 : 转换在进行(play)。

方法：
apply : 捕获对象内容的初始显示，为转换做必要的准备。无返回值。
当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用 play 方法开始转换。
请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
当你调用 play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的 visibility 属性的改变)。
play ( iDuration ) : 开始转换。无返回值。参数见下表。
iDuration : 可选项。浮点数(Real)。 指定滤镜作用持续的时间。默认单位为秒。
使用 play 方法的 iDuration 参数设置转换回放的持续时间，其值在转换的当前一个周期内会替换 Duration 属性的设置。但是下一次转换会恢复使用 Duration 属性设置的值。

stop : 停止转换回放。并呈现转换结果图像。同时激发 onfilterchange 事件。无返回值。

]]> http://www.3code.cn/css-transition/feed/ 0 很酷的css控制的文本框flash+txt源文件 http://www.3code.cn/css-flash-txt/ http://www.3code.cn/css-flash-txt/#comments Wed, 25 Nov 2009 16:13:59 +0000 admin http://www.3code.cn/?p=748 很酷的css控制的文本框flash+txt源文件

支持css控制的文本框flash+txt源文件

支持css控制的文本框flash+txt源文件

说明：可以能过css控制flash的样式. 内容是由flash从txt文件中读取而来，txt文件同时支持txt和html两种格式。

下载：本地下载css-flash-txt-3code.cn.rar

]]> http://www.3code.cn/css-flash-txt/feed/ 0 如何让网页同时兼容FireFox和IE http://www.3code.cn/divcss-firefox-ie/ http://www.3code.cn/divcss-firefox-ie/#comments Wed, 25 Nov 2009 15:59:02 +0000 admin http://www.3code.cn/?p=746 如何让网页同时兼容FireFox和IE

CSS 兼容要点：DOCTYPE 影响 CSS 处理效果

FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。

FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中。

FireFox: 设置 padding 后, div 会增加 height 和 width, 但IE不会, 故需要用 !important 多设一个 height 和 width。

FireFox: 支持 !important, IE 则忽略, 可用 !important 为 FireFoxFF 特别设置样式。

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

cursor: pointer 可以同时在 IE FF 中显示游标手指状，hand 仅 IE 可以。

FireFox: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找。

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据说!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改：

div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px}

关于这个/**/是什么www.qpsh.com也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义：

ul{margin:0;padding:0;}

就能解决大部分问题。

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为：

<script  type="text/javascript">

就可以了。

5.如果你在BOX容器里使float和text-align的方向设为一致：

{float:left;text-align:left;margin:0 0 0 200px;}

可做如下修改：

{float:left;text-align:left;margin:0 0 0 200px;display:inline;}

]]> http://www.3code.cn/divcss-firefox-ie/feed/ 0 CSS控制DIV底部对齐 http://www.3code.cn/css-div-22/ http://www.3code.cn/css-div-22/#comments Mon, 16 Nov 2009 02:33:04 +0000 admin http://www.3code.cn/?p=507 CSS控制DIV底部对齐

如果页面内容很少，不足填充一屏的窗口区域，按普通的CSS布局，就会出现底部内容并没有位于窗口的底部，留下了大量空白。

这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

下面是我找到的一个比较完美的方法，来自设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。

HTML代码:

<div id="wrap">
<div id="main">
<div id="content"></div>
<div id="side"></div>
</div>
</div>
<div id="footer"> </div>

说明: 使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。

CSS代码:下面是主要的CSS代码，让你的底部可以位于窗口的最下面:

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;}

说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。
就是这么简单，不过还没完。如果你的主体是使用悬浮布局，还得解决一些浏览器的兼容问题，这里使用的重点是为了Goolge Chrome。
对#main部份进行著名的Clearfix Hack:

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */注: 该方案测试于两栏悬浮布局，兼容各大主流浏览器，包括Google Chrome。

]]> http://www.3code.cn/css-div-22/feed/ 0 不错的CSS分页样式效果 http://www.3code.cn/css-pages/ http://www.3code.cn/css-pages/#comments Mon, 16 Nov 2009 02:23:36 +0000 admin http://www.3code.cn/?p=505 不错的CSS分页样式效果

不错的CSS分页样式效果, 有多种CSS样式，效果不错，推荐使用。

<script language="JavaScript">
<!--
/*

showPages v1.1
=================================

Infomation
----------------------
Author : Lapuasi
E-Mail : lapuasi@gmail.com
Web : http://www.lapuasi.com
Date : 2005-11-17

Example
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';    //定义参数名(可选,缺省为page)
pg.printHtml();        //显示页数

Supported in Internet Explorer, Mozilla Firefox
*/

function showPages(name) { //初始化属性
this.name = name;      //对象名称
this.page = 1;         //当前页数
this.pageCount = 1;    //总页数
this.argName = 'page'; //参数名
this.showTimes = 1;    //打印次数
}

showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
var args = location.search;
var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
var chk = args.match(reg);
this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
if (isNaN(parseInt(this.page))) this.page = 1;
if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
if (this.page < 1) this.page = 1;
if (this.pageCount < 1) this.pageCount = 1;
if (this.page > this.pageCount) this.page = this.pageCount;
this.page = parseInt(this.page);
this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
if (mode == '' || typeof(mode) == 'undefined') mode = 0;
switch (mode) {
case 0 : //模式1 (页数,首页,前页,后页,尾页)
strHtml += '<span>Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span>';
if (prevPage < 1) {
strHtml += '<span title="First Page">&#171;</span>';
strHtml += '<span title="Prev Page">&#139;</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
}
for (var i = 1; i <= this.pageCount; i++) {
if (i > 0) {
if (i == this.page) {
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
} else {
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
}
}
}
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">&#155;</span>';
strHtml += '<span title="Last Page">&#187;</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
}
strHtml += '</span><br />';
break;
case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
strHtml += '<span>Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span>';
if (prevPage < 1) {
strHtml += '<span title="First Page">&#171;</span>';
strHtml += '<span title="Prev Page">&#139;</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
}
if (this.page % 10 ==0) {
var startPage = this.page - 9;
} else {
var startPage = this.page - this.page % 10 + 1;
}
if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
for (var i = startPage; i < startPage + 10; i++) {
if (i > this.pageCount) break;
if (i == this.page) {
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
} else {
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
}
}
if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">&#155;</span>';
strHtml += '<span title="Last Page">&#187;</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
}
strHtml += '</span><br />';
break;
case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
strHtml += '<span>Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span>';
if (prevPage < 1) {
strHtml += '<span title="First Page">&#171;</span>';
strHtml += '<span title="Prev Page">&#139;</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
}
if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
if (this.page >= 5) strHtml += '<span>...</span>';
if (this.pageCount > this.page + 2) {
var endPage = this.page + 2;
} else {
var endPage = this.pageCount;
}
for (var i = this.page - 2; i <= endPage; i++) {
if (i > 0) {
if (i == this.page) {
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
} else {
if (i != 1 && i != this.pageCount) {
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
}
}
}
}
if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">&#155;</span>';
strHtml += '<span title="Last Page">&#187;</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
}
strHtml += '</span><br />';
break;
case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
strHtml += '<span>Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span>';
if (prevPage < 1) {
strHtml += '<span title="First Page">9</span>';
strHtml += '<span title="Prev Page">7</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
}
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">8</span>';
strHtml += '<span title="Last Page">:</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
}
strHtml += '</span><br />';
break;
case 4 : //模式4 (下拉框)
if (this.pageCount < 1) {
strHtml += '<select name="toPage" disabled>';
strHtml += '<option value="0">No Pages</option>';
} else {
var chkSelect;
strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
for (var i = 1; i <= this.pageCount; i++) {
if (this.page == i) chkSelect=' selected="selected"';
else chkSelect='';
strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
}
}
strHtml += '</select>';
break;
case 5 : //模式5 (输入框)
strHtml += '<span>';
if (this.pageCount < 1) {
strHtml += '<input type="text" name="toPage" value="No Pages" disabled="disabled">';
strHtml += '<input type="button" name="go" value="GO" disabled="disabled"></option>';
} else {
strHtml += '<input type="text" value="Input Page:" readonly="readonly">';
strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">';
strHtml += '<input type="text" value=" / ' + this.pageCount + '" readonly="readonly">';
strHtml += '<input type="button" name="go" value="GO" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);"></option>';
}
strHtml += '</span>';
break;
default :
strHtml = 'Javascript showPage Error: not find mode ' + mode;
break;
}
return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
if (isNaN(parseInt(page))) page = 1;
if (page < 1) page = 1;
if (page > this.pageCount) page = this.pageCount;
var url = location.protocol + '//' + location.host + location.pathname;
var args = location.search;
var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
args = args.replace(reg,'$1');
if (args == '' || args == null) {
args += '?' + this.argName + '=' + page;
} else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
args += this.argName + '=' + page;
} else {
args += '&' + this.argName + '=' + page;
}
return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
var turnTo = 1;
if (typeof(page) == 'object') {
turnTo = page.options[page.selectedIndex].value;
} else {
turnTo = page;
}
self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
this.getPage();
this.checkPages();
this.showTimes += 1;
document.write('<div id="pages_' + this.name + '_' + this.showTimes + '"></div>');
document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);

}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
if(!ie) var key = e.which;
else var key = event.keyCode;
if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
return false;
}
//-->
</script>
<style>
/* Pages Main Tyle */
.pages {
color: #000000;
cursor: default;
font-size: 10px;
font-family: Tahoma, Verdana;
padding: 3px 0px 3px 0px;
}
.pages .count, .pages .number, .pages .arrow {
color: #000000;
font-size: 10px;
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
}
/* Page and PageCount Style */
.pages .count {
font-weight: bold;
border-right: none;
padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
font-weight: normal;
padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
font-size: 10px;
}
.pages .number span {
color: #999999;
margin: 0px 3px 0px 3px;
}
.pages .number a {
color: #000000;
text-decoration: none;
}
.pages .number a:hover {
color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
font-weight: normal;
padding: 0px 5px 0px 5px;
}
.pages .arrow a, .pages .arrow span {
font-size: 10px;
font-family: Webdings;
}
.pages .arrow span {
color: #999999;
margin: 0px 5px 0px 5px;
}
.pages .arrow a {
color: #000000;
text-decoration: none;
}
.pages .arrow a:hover {
color: #0000ff;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
color: #000000;
font-size: 10px;
font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
color: #666666;
font-weight: bold;
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
}
.pages .input input.ititle {
width: 70px;
text-align: right;
border-right: none;
}
.pages .input input.itext {
width: 25px;
color: #000000;
text-align: right;
border-left: none;
border-right: none;
}
.pages .input input.icount {
width: 35px;
text-align: left;
border-left: none;
}
.pages .input input.ibutton {
height: 17px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana;
background-color: #999999;
border: 1px solid #666666;
padding: 0px 0px 2px 1px;
margin-left: 2px;
cursor: hand;
}
/* body */
body {
font-size: 12px;
}
</style>
<script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =12;  // 定义总页数(必要)
//pg.argName = 'p';  // 定义参数名(可选,默认为page)

document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
//-->
</script>

]]> http://www.3code.cn/css-pages/feed/ 0 CSS+JS的下拉菜单效果代码 http://www.3code.cn/js-css-menu/ http://www.3code.cn/js-css-menu/#comments Fri, 13 Nov 2009 09:27:25 +0000 admin http://www.3code.cn/?p=457 CSS+JS的下拉菜单效果代码

<script language="javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
<!--
body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>

]]> http://www.3code.cn/js-css-menu/feed/ 0 CSS+JS图片提示框效果代码 http://www.3code.cn/css-js-tips/ http://www.3code.cn/css-js-tips/#comments Fri, 13 Nov 2009 09:18:14 +0000 admin http://www.3code.cn/?p=450 CSS+JS图片提示框效果代码

CSS+JS图片提示框效果代码

CSS+JS图片提示框效果代码

非常不错的CSS+JS图片提示框效果代码,推荐下载。

下载地址

]]> http://www.3code.cn/css-js-tips/feed/ 0 CSS中list-style-type的使用方法 http://www.3code.cn/css-list-style-type/ http://www.3code.cn/css-list-style-type/#comments Fri, 06 Nov 2009 16:45:09 +0000 admin http://www.3code.cn/?p=268 CSS中list-style-type的使用方法

语法格式：
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

输出格式：
disc :　 CSS1 默认值。实心圆
circle :　 CSS1 空心圆
square :　 CSS1 实心方块
decimal :　 CSS1 阿拉伯数字
lower-roman :　 CSS1 小写罗马数字
upper-roman :　 CSS1 大写罗马数字
lower-alpha :　 CSS1 小写英文字母
upper-alpha :　 CSS1 大写英文字母
none :　 CSS1 不使用项目符号
armenianl :　 CSS2 未支持。传统的亚美尼亚数字
cjk-ideographic :　 CSS2 未支持。浅白的表意数字
georgian :　 CSS2 未支持。传统的乔治数字
lower-greek :　 CSS2 未支持。基本的希腊小写字母
hebrew :　 CSS2 未支持。传统的希伯莱数字
hiragana :　 CSS2 未支持。日文平假名字符
hiragana-iroha :　 CSS2 未支持。日文平假名序号
katakana :　 CSS2 未支持。日文片假名字符
katakana-iroha :　 CSS2 未支持。日文片假名序号
lower-latin :　 CSS2 未支持。小写拉丁字母
upper-latin :　 CSS2 未支持。大写拉丁字母

]]> http://www.3code.cn/css-list-style-type/feed/ 0