css_ie6__ie7_fie兼容问题。 html

来源：互联网发布：兄弟连it教育靠谱吗编辑：程序博客网时间：2024/05/01 21:19

vogue_king2000@hotmail.com

　　//note 设置PHP超时时间

　　set_time_limit(0);

　　//note 取得样式文件内容

　　$styleFileContent = file_get_contents('images/style.css');

　　//note 匹配出需要下载的URL地址

　　preg_match_all("/url/((.*)/)/", $styleFileContent, $imagesURLArray);

　　//note 循环需要下载的地址，逐个下载

　　$imagesURLArray = array_unique($imagesURLArray[1]);

　　foreach($imagesURLArray as $imagesURL) {

　　file_put_contents(basename($imagesURL), file_get_contents($imagesURL));

　　}

　　最后预祝各位在扒皮的过程中，一扒到底！

标签：CSS、PHP 87 views | 发表评论

css命名规则 04/22, 2010 10:45 | 分类：未分类

头：header　　

内容：content/container　　

尾：footer　　

导航：nav　　

侧栏：sidebar

栏目：column　　

页面外围控制整体布局宽度：wrapper　　

左右中：left right center　　

登录条：loginbar　　

标志：logo　　

广告：banner　　

页面主体：main　　

热点：hot　　

新闻：news

下载：download　　

子导航：subnav　　

菜单：menu　　

子菜单：submenu　　

搜索：search　　

友情链接：friendlink　　

页脚：footer　　

版权：copyright　　

滚动：scroll　　

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

状态态：status

投票：vote

合作伙伴：partner

注释的写法

/* Footer */

内容区

/* End Footer */

id的命名

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

id的命名

页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

标签：CSS、XHTML+CSS、命名规则 98 views | 发表评论

DIV+CSS中标签ul ol li dl dt dd用法 03/29, 2010 14:33 | 分类：未分类

ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦!

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义，块级元素div尽量少用，和table一样，嵌套越少越好。

ol 有序列表。

<ol>

</ol>

表现为：

1……

2……

3……

ul 无序列表，表现为li前面是大圆点而不是123

<ul>

</ul>

很多人容易忽略

dl dt dd的用法

dl 内容块

dt 内容块的标题

内容

可以这么写：

<dl>

</dl>

　　dt和dd中可以再加入 ol ul li和p

　　理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。DD DT DL标签

我们平时常用的是<ul><li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。

<dl></dl>用来创建一个普通的列表,

<dt></dt>用来创建列表中的上层项目，

<dd></dd>用来创建列表中最下层项目，

<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了：

dl ——define

list——定义列表

dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。

dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解

例子1：

<dl>

<dt>Today

<dd>Today is yesterday.

<dt>Tomorrow

<dd>Tomorrow is today.

</dl>

例子2：

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

<title>无标题文档</title>

<!–

dt {

float: left;

width: 60px;

margin: 0px;

padding: 0px;

}

dd {

float: left;

clear: none;

width: 290px;

margin: 0px;

padding: 0px;

}

dl {

width: 350px;

font-size: 9pt;

line-height: 1.5em;

position:relative;

margin: 0px;

padding: 0px;

left:15px;

}

.red {

color: #FF3300;

}

#box {

width: 500px;

background-color: #F1F1F7;

}

#box #content {

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left:

20px;

}

–>

</style>

</head>

<body>

<dl>

<dd><strong>[好大的一只啊] </strong>忧惠：<span

class=”red”><em>8.5折</em></span></dd>

<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称

商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span

class="red";>详细介绍</span>]</dd>

<dd>0000-12345678 87654321

</dd>

</dl>

</div>

</body>

</html>

标签：CSS、dd、div、dl、dt、li、ol、ul、XHTML+CSS 547 views | 发表评论

几个常用CSS 03/25, 2010 15:45 | 分类：未分类

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致）

清除容器浮动

#main { overflow:hidden; }

不让链接折行

a { white-space:nowrap; }

上面的设定就能避免链接折行

始终让 Firefox 显示滚动条

html { overflow:-moz-scrollbars-vertical; }

body, html { min-height:101%; }

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto; margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用

body{ text-align: center; }

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea { overflow:auto; }

Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页

h2 { page-break-before:always; }

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus { outline:none; }

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* { margin: 0; padding: 0 }

标签：CSS、XHTML+CSS 130 views | 发表评论

巧用css实现强制不换行、自动换行、强制换行 08/03, 2009 16:46 | 分类：未分类

我们在写页面代码的时候，有时把一个表格的宽度定死后会出现里面的文字不见了，特别是英文。这就是他换行了所导致的，这时我们就需要加些CSS元素让它来听我们的话！根据自己以往的经验，也参考了些网上的文章，具体如下：

强制不换行

div{

white-space:nowrap;

}

自动换行

div{

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

div{

word-break:break-all;

}

============================================

CSS设置不转行:

overflow:hidden 隐藏

white-space：normal 默认

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象

设置强行换行

word-break:

normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

============================================

看了以上的介绍，赶快试一下，看看效果吧！

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有，在FF下测试,FF可以自己加滚动条，这样也不影响效果

建议大家做Skin时，记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文，应该使用break-all 。

对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例：

div {word-break : break-all; }

标签：CSS、XHTML+CSS、强制不换行、强制换行、自动换行 203 views | 发表评论

对IE6、IE7、FF兼容性的详细CSS HACK介绍 06/18, 2009 21:05 | 分类：未分类

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

现在写一个CSS可以这样：

#example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。我真希望那个IE6快点退休……

css Hacks，css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:http://www.webdevout.net/，这个CSS补丁(hacks)很简单，在样式表中单独为ie7设置某个元素，id或者class前面这样写:

*:first-child+html #ID{}

或者

*:first-child+html .class{}

别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.

IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：

>body

html*

*+html

这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。

最后作者给出了最佳方式：

IE 6 and below

Use * html {} to select the html element.

IE 7 and below

Use *+html, * html {} to select the html element.

IE 7 only

Use *+html {} to select the html element.

IE 7 and modern browsers only

Use html>body {} to select the body element.

Modern browsers only (not IE 7)

Use html>/**/body {} to select the body element.

The IE7 CSS Hack(!important在ie7.0的hack方法)

由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.

新建一个css样式如下：

插入代码：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式：

插入代码：

在body表现这里加入lang属性,中文为zh：

插入代码：

现在对div元素再定义一个样式：

插入代码：

[/code]

*:lang(en) #item{

background:green !important;

}

[/code]

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

插入代码：

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试：

ie7 beta 2 preview/win

ie5.01+/win

firefox 1.5/win

opera 8.5/win & linux

netscape 7.01, 8/win

mozilla 1.7.12/win & linux

safari 2/mac

firefox 1.0.4/linux

epiphany 1.4.8/linux

galeon 1.3.20/linux

Screenshot of the IE7 css hack in IE7

Screenshot of the IE7 css hack in Firefox 1.5

按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.

标签：CSS、firefox、IE6、IE7、XHTML+CSS 194 views | 发表评论

CSS样式表也要玩结构化 06/18, 2009 21:01 | 分类：未分类

CSS样式表也要玩结构化

很多人可能会觉得奇怪，这标题是什么意思，不过就一个样式表而已，还谈什么结构化？且听如下理由：

玩Web重构的朋友对CSS应该都不会陌生了，都知道CSS里面有几种常用的选择符的样式定义方法，才子将常用的几种大致讲解一下：

第一种是通配选择符，就是将所有的元素先预定义一个样式，如：

* { margin:0px; padding:0px; }* { margin:0px; padding:0px; }

这样设置之后，所有的元素都已经将内边距和外边距都设置成0px了。

PS：才子从来不这样设置，因为它会直接影响ul和ol之类的列表元素的样式。

第二种是类型选择符，才子喜欢称它为标签选择符，就是通过标签元素的名称直接定义其样式，如：

body { font-size:14px; }body { font-size:14px; }

这样设置之后，所有body元素里的字体大小都是14px，但表格元素是个例外，要令表格元素字体大小也一样，要这样：

body,td { font-size:14px; }body,td { font-size:14px; }

第三种是ID选择符，通过一个唯一的ID标识符来定义某个元素的样式，如：

#nav { color:red; }#nav { color:red; }

这样设置之后，nav元素下的字体都应该是红色的了。

应用如：

<div id="nav">这里是内容</div>

第四种是类选择符，才子一般叫它class选择符，通过一个类来定义一种样式，让所有指定这个类的元素都生效，如：

.left { text-align:left; } .right { text-align:right; }.left { text-align:left; }<br/>.right { text-align:right; }

上面定义了两个类，这样设置之后，指定哪个类的元素下的内容就将依据类里的样式定义来居左或居右排列了。

应用如：

<div class="left">这里是left内容</div> <div class="right">这里是right内容</div>

<div class="left">这里是left内容</div><br/><div class="right">这里是right内容</div>

常用的大概就这四种，还有一些什么属性选择符，包含选择符，我们平时应用得相对比较少，在此不多说了，有兴趣的朋友请在本站下载苏小雨的CSS 2.0中文手册(这里有下载)。

下面来讲主题了，怎么样来结构化呢？

做一个网站首先要有一个构思，整站采用什么样的色系，什么字体，字体大小如何等等，那么我们就可以把这些最基本的标签选择符的样式先写入一个CSS文件，如base.css，这个CSS里把这个站需要用到的一些标签元素都做一个基本的样式设定，如body下的字体颜色和大小，超链接的样式等等，甚至是用不到的标签也设置一下都无妨，为什么呢？哈哈，因为可以重用嘛。下次再做其它的站的时候，base.css基本不需要写了，直接拿来用，最多也只是稍微改动一下下就行了，省不少事。

OK，再来看网站结构了。玩Web重构的朋友都知道，现在都用div+css来布局了，那么我们也将整个布局做一个单独的CSS文件，如layout.css，把布局全部定义好。大多数网站布局也都差不太多，都大致有以下几个模块吧，如header,nav,content,sidebar,footer等等，那就都定义一下样式吧，考虑到元素都有样式的继承性，其实有一些具体的属性我们已经不需要再次定义在ID选择符里了。因为它们可以继承base.css里的一些样式了。

这个是重点了，我们再来做一个类选择符的辅助CSS文件，如common.css，里面是些什么内容呢？才子把自己用的文件copy一段共享一下。^0^

.clear { clear: both; } /*闭合浮动元素*/ .left { text-align: left; } .right { text-align: right; } .center { text-align: center; }

.red { color: #F00; } .green { color: #0F0; } .blue { color: #00F; } .yellow

{ color: #FF0; } .orange { color: #F90; } .gray { color: #696969; }

.bold { font-weight: bold; } .hide { overflow: hidden; } .none { display: none; } .block { display: block; } .inline { display: inline; }

.f11 { font-size: 11pt; } .m5 { margin: 5px; } .p8 { padding: 8px; }.clear { clear: both; } /*闭合浮动元素*/<br/>.left { text-align: left; }<br/>.right { text-align: right; }<br/>.center { text-align: center; }<br/><br/>.red { color: #F00; }<br/>.green { color: #0F0; }<br/>.blue { color: #00F; }<br/>.yellow { color: #FF0; }<br/>.orange { color: #F90; }<br/>.gray { color: #696969; }<br/><br/>.bold { font-weight: bold; }<br/>.hide { overflow: hidden; }<br/>.none { display: none; }<br/>.block { display: block; }<br/>.inline { display: inline; }<br/><br/>.f11 { font-size: 11pt; }<br/>.m5 { margin: 5px; }<br/>.p8 { padding: 8px; }

哈哈，将一些我们比较常用的附加属性都定义了一下，方便我们随时调用，因为类选择符可以同时选用好几个，而且优先级比较高，比类型选择符和ID选择符都要优先，那么我们就可以不管类型选择符和ID选择符定义过什么，我们都可以用class选择符来重定义该元素的样式，如

这样，不管nav的ID选择符里定义了什么内容，那么这个元素里的字体肯定是加粗的红色字体，内边距为8px。

讲到这里，相信大家也看到了才子说的所谓的结构化了，如同我们写程序时将表现层与数据层分开一样，三个CSS文件都非常重要，紧密关联，但似乎又很独立，只要layout.css文件加载成功，那么网站就应该已经不会很明显的变形了，而且这三个文件我们以后都可以很轻松的拿来重用，需要修改的地方不会太多，远比你重新为一个网站写一个完整的CSS文件要快得多。

以上是才子对CSS样式表的结构化的经验，欢迎各位讨论及拍砖！

标签：CSS、XHTML+CSS 157 views | 发表评论

让网站变灰色的CSS代码 05/11, 2009 21:34 | 分类：未分类

网站灰色代码

在网站的css中加入

body{filter:Gray;}

</style>

标签：CSS、XHTML+CSS、灰色代码 158 views | 发表评论

CSS背景色的半透明设置 04/11, 2009 11:47 | 分类：未分类

在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。具体语法如下：

{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

具体参数含义如下：

opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。

finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style 指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

以上的参数可以选用，可以只设置一个opacity

例如：

{filter:alpha(opacity=50)}

这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用";"间隔，不然设置是无效的

例如：

我要设置模版区域背景的颜色（白色）+半透明

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都设置background-color:white

这些就是模版背景设置的ID

然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个

中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了

如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可

background:transparent 这就是背景全透明的代码

不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在

.modbl{}

.modbc{}

.modbr{}

中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样

另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明

我把我的背景半透明代码贴出来吧

.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}

.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}

.modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

红色字是关键设置，如果不想设置全透明的话，可以把.modbl{}.modbc{}.modbr{}三个中的background:transparent改成.modbox{}中的background-color:#FFFFFF，当然这里的#FFFFFF你可以换成自己喜欢的颜色，不过为了美观统一，建议这4个的颜色代码最好设置为一样的

附：#FFFFFF就是white，白色；#000000就是black，黑色

哎，累死了，打了这么多，希望大家能学习到啊……………………

不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在

.modbl{}

.modbc{}

.modbr{}

中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样

另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明

我把我的背景半透明代码贴出来吧

.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}

.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}

.modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

附：#FFFFFF就是white，白色；#000000就是black，黑色

标签：CSS、XHTML+CSS、半透明、背景色 204 views | 发表评论

html css js php 注释 03/12, 2009 03:08 | 分类：未分类

HTML 注释 <!–This is a comment–>

CSS注释以"/*" 开头，以"*/" 结尾，如下：

/* 定义段落样式表 */

text-align: center; /* 文本居中排列 */

color: black; /* 文字为黑色 */

font-family: arial; /* 字体为arial */}

JavaScript 注释可用于增强代码的可读性。

第一：单行的注释以 // 开始。举例如下：

// 这行代码输出标题：

document.write("<h1>文章标题</h1>");

// 这行代码输出段落：

document.write("<p>我的未来不是梦！</p>");

</script>

第二：多行注释以 /* 开头，以 */ 结尾。举例如下：

下面的代码将输出

一个标题和一个个段落

<?php

echo "这是第一种例子。n"; // 本例是 C++ 语法的注释

/* 本例采用多行的

注释方式 */

echo "这是第两种例子。n";

echo "这是第三种例子。n"; # 本例使用 UNIX Shell 语法注释

不过在使用多行注释时请注意，不能让注释陷入递归循环当中，否则会引起错误。

css_ie6__ie7_fie兼容问题 。 html

css_ie6__ie7_fie兼容问题。 html