Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码, ASP代码, 精选JS代码, WORDPRESS, 网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 | 酷码资源 » css

限制图片最大宽度的CSS

admin — Sun, 22 Aug 2010 15:10:18 +0000

我们在制作一个网页的时候，经常要对一个区域里可能出现的图片的宽度进行限制，不然它可能会把页面撑得很烂很烂。
如果你采用固定宽度，长度来设置的话，比如在

中设置，或者是在CSS中用

.img {height:200px;width:200px;}
来控制，不同规格的图片有可能会变形。这是一种最蠢的方法。经过摸索，我找到一串CSS代码，可以让图片在超过规定的宽度时，自动缩小，并且是按比例缩小，不会造成图片变形。如下：
.img{
max-width: 200px;
height:auto;
width:expression(this.width > 200 ? "200px" : this.width);
}

经过不严格测试，这串CSS代码能兼容IE6 IE7 FF。不知道这个算不算是“万能代码”呢？

DIV+CSS英文网站优化

admin — Thu, 29 Jul 2010 15:53:54 +0000

什么是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文件中相应的行，那么整个站点的所有页面都会随之发生变动。

IE下如何设置iframe背景透明

admin — Tue, 20 Jul 2010 10:32:39 +0000

首先：在iframe标签中加入 allowtransparency="true"属性
然后：在调用的页面的标签里加入 style="background:transparent;"

示例：

aa.html

Untitled Document

asda

das

sad

asdddddddddddddddddddd

简单易用的JS+CSS伸缩菜单

admin — Tue, 11 May 2010 05:27:58 +0000

简单易用的JS+CSS伸缩菜单-3code.cn/

Firefox与IE在CSS样式表中的差异

admin — Thu, 22 Apr 2010 08:00:22 +0000

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指定一个类：
然后CSS这样设计：。

#container{
min-width: 600px;
width:expression(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代码

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 时。例： ..

p对象中的内容

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属性。

简单有效的纯CSS提示框

admin — Thu, 22 Apr 2010 06:54:10 +0000

简单有效的纯CSS提示框

先写出HTML结构:

简单有效的纯CSS提示框(这是提示内容--简单有效的纯CSS提示框) 简单有效的纯CSS提示框简单有效的纯CSS提示框简单有效的纯CSS提示框

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

DIV层拖动

admin — Tue, 20 Apr 2010 06:08:44 +0000

adasdza

兼容IE FIREFOX3.5以上的透明度设置

admin — Sat, 03 Apr 2010 13:19:06 +0000

filter:alpha(opacity=50); opacity:0.5;

Javascript打印网页中定义的部分内容

admin — Fri, 26 Mar 2010 04:16:40 +0000

正常情况下的打印是使用 window.print(); 直接整页打印，但假如需要打印网页中定义的部分内容，则可使用如下的方法：

1、在页面的代码头部处加入Javascript：
Javascript代码

2、在页面正文处加上和标识。
也就是在需要用户打印保存的正文所对应的html处附加上。同时，假如采用小偷程式获得远程数据并需打印，可将此等数据置于该定义标签之内即可。

3、截取内容部分已完成，现在加个“打印”的链接：

打印

经典的菜单效果CSS范例

admin — Wed, 20 Jan 2010 06:43:27 +0000

经典的菜单效果CSS范例

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

使用方法：

PALV MENU01

PALV MENU02

PALV MENU03

PALV MENU04

PALV MENU05

PALV MENU06

FireFox 3.5+不再支持-moz-opacity属性

admin — Sat, 09 Jan 2010 04:59:27 +0000

安装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还不支持这一属性。

在firefox与IE下DIV+CSS Padding效果不同的解决方法

admin — Mon, 21 Dec 2009 05:48:01 +0000

test

以上代码在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

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

DIV背景图片在IE下正常,Firefox下不显示

admin — Thu, 10 Dec 2009 15:59:09 +0000

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下显示出背景来,大家试试.

CSS在线使用手册

admin — Tue, 01 Dec 2009 18:00:09 +0000

CSS在线使用手册

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

DIV相对于父DIV底部对齐

admin — Mon, 30 Nov 2009 07:31:00 +0000

DIV相对于父DIV底部对齐

重点是：bottom:0;

CSS滤镜效果说明

admin — Thu, 26 Nov 2009 09:36:40 +0000

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 事件。无返回值。

很酷的css控制的文本框flash+txt源文件

admin — Wed, 25 Nov 2009 16:13:59 +0000

很酷的css控制的文本框flash+txt源文件

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

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

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

如何让网页同时兼容FireFox和IE

admin — Wed, 25 Nov 2009 15:59:02 +0000

如何让网页同时兼容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属性，只需要把代码改为：

就可以了。

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;}