清水的百宝箱

大家都知道现在已经是css3时代了，相信看到这篇文章的您也一定垂涎于

border-radius和box-shadow这样的属性吧。

虽然用上了ie-css3.htc 之后，可以感受到css3的强大，但是在实际使用中，大家一定非常头疼于不兼容

比如以下两段代码；

第一段:

.test {
width:560px;
height:400px;
background-color:#FFFFFF;
padding:10px 8px 6px;
border: 1px solid #ff0000;
margin-bottom:10px;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

<div id="sveinjoe">
<div>
这个页面是用以测试主机是否有正确的content-type。
</div>
</div>

经过测试，正常显示圆角和阴影，那么如果我对test的外围div设置背景之后，

#sveinjoe{
width:962px;
height:1000px;
margin:0 auto;
background-color:#FFFFFF;
}

 

效果就大大的不相同了，圆解和阴影都不见了，这里为了排除边框和底色颜色一致导致圆角看不到的可能，我把边框的颜色设置为了红色。但是还是没有显示。

所以初步结论是在多层DIV中，如果下一层的DIV设有背景的话，border-radius    box-shadow 失效；

一般DIV+CSS网站制作布局时经常会遇到LI点的情况，特别是对新手来说可能有点陌生，如何去掉<li></li>中 的点呢，或者如何改变点成数字1234或者改成空心圆方块等呢，又如何改变点的颜色？其实很简单：直接定义LI的CSS为list-style-type :none即可去掉点，如
li{
list-style-type :none;
}

如果要改变点的颜色，那么li里的字也会变颜色与大小的了，但你可以使用图片来作为前面的点，这样就可以随心所欲地装饰了。
li{
list-style: url("pre.gif") outside circle;
}

LI点的其他用法CSS代码：
list-style-type :
disc   默认值。实心圆
circle   空心圆
square   实心方块
decimal   阿拉伯数字
lower-roman   小写罗马数字
upper-roman   大写罗马数字
lower-alpha   小写英文字母
upper-alpha   大写英文字母
none   不使用项目符号

摘自：广州奇亿网站建设工作室

语法：STYLE="filter:filtername(fparameter1, fparameter2...)"

（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）

滤镜说明：

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="75",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');

(责任编辑：大宝库)

火狐与ＩＥ不和已被大家广泛认可。
这几天无风的飘逸又探测到一点，于是马上记下来了。

<center>您的文件已经上传完毕 上传图片预览: </center><br><center><img src='D:/sveinjoe/sites/sitemanager/temp/CR-AySZjEbkCa.jpg'></center><br><center>

像这样的scr指向一个windows绝对地址的形式，火狐是不支持的哦，它会识别不出来图片的位置的，而ＩＥ可以。

一行小小的代码，居然能够实现我找了十几分钟的回车提交表单，非常不简单。让我们看看这和行代码长什么样子吧！

<script language="javascript">
  function   document.onkeypress()  
  {
   if(event.keyCode==13)document.myform.submit();
  }
  </script>

我有一个表彰名字是name="myform",是一个登录界面如此简单而已

研究发现，如果正确运用好html语言体系的meta语法，可以很有效的防止CC攻击。
meta有一个windows-target设置，可以使你的网站在iframe里不被引用，虽然不能完全避免ＣＣ攻击，但是可以很大程序地缓存ＣＣ攻击带来的压力。

附上meta标签的使用说明：

转自：http://www.crazylemon.net/html/2612.html
Meta标签是用来描述网页属性的一种语言，标准的Meta标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签的，下面给大家讲讲meta标签含义与使用方法：

1、META标签的keywords
写法为：<meta name=”Keywords” content=”信息参数” />
meat标签的Keywords的的信息参数，代表说明网站的关键词是什么。

2、META标签的Description
<meta name=”Description” content=”信息参数” />
meat标签的Description的信息参数，代表说明网站的主要内容，概况是什么。

3、META标签的http-equiv=Content-Type content=”text/html
http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，
<meta http-equiv=”Content-Type” content=”text/html; charset=信息参数” />
meat标签的Description的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meat标签的Description的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meat标签的Description的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meat标签的Description的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meat标签的Description的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meat标签的Description的信息参数如UTF-8时，代表世界通用的语言编码；

4、META标签的generator
<meta name=”generator” content=”信息参数” />
meat标签的generator的信息参数，代表说明网站的采用的什么软件制作。

5、META标签的author
<meta name=”author” content=”信息参数”>
meat标签的author的信息参数，代表说明网页版权作者信息。

6、META标签的http-equiv=”Refresh”
<Meta http-equiv=”Refresh” Content=”时间; Url=网址参数”>
meat标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。

7、META标签的HTTP-EQUIV=”Pragma” CONTENT=”no-cache”
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访

问者将无法脱机浏览。

8、META标签的COPYRIGHT
<META NAME=”COPYRIGHT” CONTENT=”信息参数”>
meat标签的COPYRIGHT的信息参数，代表说明网站版权信息。

9、META标签的http-equiv=”imagetoolbar”
<meta http-equiv=”imagetoolbar” content=”false” />
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

10、META标签的Content-Script-Type
<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
W3C网页规范，指明页面中脚本的类型。
11、META标签的revisit-after
<META name=”revisit-after” CONTENT=”7 days” >
revisit-after代表网站重访,7 days代表7天，依此类推。

12、META标签的Robots
<meta name=”Robots” contect=”信息参数”>
Robots代表告诉搜索引擎机器人抓取哪些页面
　　其中的属性说明如下：

　　信息参数为all：文件将被检索，且页面上的链接可以被查询；

　　信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

　　信息参数为index：文件将被检索；

　　信息参数为follow：页面上的链接可以被查询；

　　信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

　　信息参数为nofollow：文件将不被检索，页面上的链接可以被查询。

13、META标签的<meta http-equiv=”windows-Target” contect=”_top”>
代表页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用,设置有：_blank、_top、_self、_parent。

14、META标签的set-cookie
<meta http-equiv=”set-cookie” contect=”Mon,12 May 2001 00:20:00 GMT”>
代表Cookie设定，如果网页过期，存盘的cookie将被删除,需要注意的也是必须使用GMT时间格式；

以上内容由无风的飘逸编辑修改，转载请尊重版权。