PHP下载CSS文件中的图片

  作为一个资深并且专业的扒皮人员,在我从初三开始投入伟大的互联网中到现在积累了丰富的扒皮经验。我相信每个做web的程序员也都会有类似的经历。

  在扒皮过程中,必不可少的需要下载样式文件中的图片。碰到比较庞大的样式文件,其中可能会有上百个需要下载的图片,那么使用下面这段小代码是最为合适的了。

  

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

css命名规则

头: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
注册:regsiter
状态态: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
注册:regsiter
搜索: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

DIV+CSS中标签ul ol li dl dt dd用法

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

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

ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:
1……
2……
3……

ul 无序列表,表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略
dl dt dd的用法
dl 内容块
dt 内容块的标题
dd
内容
可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
  dt和dd中可以再加入 ol ul li和p
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。DD DT DL标签

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

<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>
<style type=”text/css”>

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

<div id=”box”>
<div id=”content”>
<img src=/Article/UploadFiles/200704/20070412091408274.gif align=”left”/ >

<dl>
<dt>商品名称:</dt>
    
<dd><strong>[好大的一只啊] </strong>忧惠:<span
class=”red”><em>8.5折</em></span></dd>
       
<dt>商品简介:</dt>
       
<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span
class=”red”;>详细介绍</span>]</dd>
       
<dt>店铺地址:</dt>
        <dd>商品名称</dd>
       
<dt>联系电话:</dt>
        <dd>0000-12345678 87654321
</dd>
</dl>
</div>
</div>
</body>
</html>

几个常用CSS

使用 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实现强制不换行、自动换行、强制换行

我们在写页面代码的时候,有时把一个表格的宽度定死后会出现里面的文字不见了,特别是英文。这就是他换行了所导致的,这时我们就需要加些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; }

对IE6、IE7、FF兼容性的详细CSS HACK介绍

现在我大部分都是用!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出处: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的样式:
插入代码:

<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh:
插入代码:

<body lang="en">

现在对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样式表也要玩结构化

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>

 

<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选择符来重定义该元素的样式,如

<div id="nav" class="bold red p8">内容</div>

 

<div id="nav" class="bold red p8">内容</div>
这样,不管nav的ID选择符里定义了什么内容,那么这个元素里的字体肯定是加粗的红色字体,内边距为8px。

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

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

CSS背景色的半透明设置

在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%}

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

附:#FFFFFF就是white,白色;#000000就是black,黑色

html css js php 注释

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

CSS注释以"/*" 开头,以"*/" 结尾,如下:
/* 定义段落样式表 */
p{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial; /* 字体为arial */}

JavaScript 注释可用于增强代码的可读性。
第一:单行的注释以 // 开始。举例如下:

<script type="text/javascript">
// 这行代码输出标题:
document.write("<h1>文章标题</h1>");
// 这行代码输出段落:
document.write("<p>我的未来不是梦!</p>");
</script>

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

<script type="text/javascript">
/*
下面的代码将输出
一个标题和一个个段落
*/

<?php
   echo "这是第一种例子。n"; // 本例是 C++ 语法的注释
   /* 本例采用多行的
      注释方式       */
   echo "这是第两种例子。n";
   echo "这是第三种例子。n"; # 本例使用 UNIX Shell 语法注释
?>

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

<?php  /*   echo "这是错误的示范。n"; /* 递归注释会引起问题 */  */?>