如何用css把页面变灰,寄托我们的哀思

方法有很多种,这里做个总结
第一:
最快速度把自己网站变灰,只支持IE~
在CSS文件或style中加入
*{filter:gray; color:gray;}
第二:
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
这个比 filter:gray; 好,可解决与 position: relative; 的冲突,加在 css 第一行即可
第三:
指定flash层样式,加入:*{filter: Gray;}
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的 和 之间插入:


什么是css框架

框架就是一个你可以用于你的网站项目的基本的概念上的结构体。
css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

typography.css?基本排版规则
grid.css?基于网格的布局
layout.css?通常的布局
form.css?for 表单样式
general.css?更多通用规则

下面一起来了解一下各种不同的CSS框架吧:
1.960 Grid System

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。
2.WYMstyle CSS Framework

这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。
3.YAML CSS Framework

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。
4.YUI Grids CSS

基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。
有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

负Margin技术
使用度量单位em
清除布局的浮动

5.Logicss?Framework

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局网格利用css代码生成工具。
6.CleverCSS

CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比 CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。
7.Elements CSS Frameworks

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读?概述了解更多。
8.Blueprint CSS

Blueprint?是一个?CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。
9.Schema Web Design Framework

Schema是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。
10.Emastic CSS Framework

Emastic?是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。
11.That Standards Guy CSS Framework

* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0);
* [...]


如何解决FCKEditor自动过滤HTML,BODY

使用FCKEditor做后台模板编辑器的时候,经常会遇到Html,body,head等被过滤掉生成类似于


使用font-family实现HTML奇妙的文字图形

把FONT-FAMILY属性值设置为Webdings时,对于不同的ASCII对象将会有怎样的字符显示呢,且看看(请使用以IE为内核的浏览器,其它浏览器的有效性并未验证):
<p><FONT color=”#008000″ style=”FONT-SIZE: 120pt; FONT-FAMILY: Webdings”>$</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings”>%</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings”>&</font></p>
<p><FONT color=”#666666″ style=”FONT-SIZE: 120pt; FONT-FAMILY: Webdings”>’</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings”>(</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings”>)</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings”>*</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings”>+</FONT></p>
<p><FONT color=”#FF0000″ style=”FONT-SIZE: 120pt; FONT-FAMILY: Webdings”>,</FONT></p>
<p><FONT style=”FONT-SIZE: 120pt; COLOR: [...]


在HTML中使用frameset

框架便是网页画面分成几个框窗,同时取得多个URL。只需要<FRAMESET><FRAME>即可,面所有框架标记需要放在一个总起的html 档,这个档案只记录了该框架如何分割 ,不会显示任何资料,所以不必放入<BODY>标记,浏览这框架必须读取这档案面不是其他框窗的档案。<FRAMESET>是用来划分框窗,每一窗框由一个<FRAME>标记所标示,<FRAME>必须在<FRAMESET>范围中使用。
<FRAME>
用法:定义一个帧
开始/结束标识:必须/非法
属性:name=”…”定义帧的名字
   scr=”…”定义在帧中显示的内容的来源
   frameborder=”…”定义帧之间的边界(0或1)
   margwidth=”…”设置帧的边界和其中内容之间的间距
   margheight=”…”设置帧的边界和其中内容之间的间距化
   noresize=”…”使帧的尺寸不能变
   scrolling=”…”设置滚动条的表示方式(auto,yes,no)
空:不允许
?
<FRAMESET>…</FRAMESET>
用法:定义在一个窗口中帧的布局
开始/结束标识:必须/必须
属性:rows=”…”设定行的数目
   cols=”…”设定列的数目
   onload=”…”当载入文档时的内部事件触发器
   onunload=”…”当卸载文档时的内部事件触发器
空:不允许
注释:FRAMESET可以嵌套
参数:
COLS=”90,*”
垂直切割画面(如分左右两个画面),接受整数值、百分数,*则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS=”30,*,50%”可以切成三个视窗,第一个视窗是30pixels的宽度,为一绝对分割,第二个视窗是当分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个视窗画面的50%宽度为一相对分割。你可自己调整数字。
ROWS=”120,*”
这是横向切割,将画面上下分开,数值设定同上。COLS与ROWS两参数尽量不要放在同一个<FRAMESET>标记中,因Netacape偶然不能显示这类型的框架,尽量采用多重分割,如以上各例。
frameborder=”0″
设定框架的边框,其值只有0和1,0表示不要边框,1表示要显示边框。
border=”0″
设定框架的边框厚度,以pixels为单位。
bordercolor=”#008000″
设定框架的边框颜色。
framespacing=”5″
表示框架与框架间保留的空白的距离。
标记:<FRAME>
功能:设定每一个框窗内的参数属性。
参数:
SRC=”a.html”
设定此框窗中要显示的网页档案名称,每个框窗一定要对应一个网页档案。
NAME=”top”
设定这个框窗的名称,这样才能指定框架来作链接,必须但任意命名。
frameborder=0
设定框架的边框,其值只有0和1,0表示不要边框,1表示要边框。
framespacing=”6″
表示框架与框架间的保留的空白的距离。
bordercolor=”#008000″
设定框架的边框颜色。
scrolling=”Auto”
设定是否要显示卷轴,YES表示要显示卷轴,NO表示无论如何都不要显示卷轴,AUTO视情况而定。
noresize
设定不让使用者可以改变这个框框的大小,如没有设定此参数,使用者可随意地拉动框架改变其大小。
marginhight=5
表示框架高度部分边缘所保留的空间。
marginwidth=5
表示框架宽度部分边缘所保留的空间。


什么是html的nowrap属性

HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。在表格有宽度限制的时候,碰到英文字体与符号超长会强制换行!
<style>
td {white-space : nowrap }
</style>
强制不换行,相当于<nobr></nobr>
注意:td元素noWrap属性的行为与td元素的width属性有关。td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。
nowrap表示是否允许表格中的文本换行
nowrap=true的时候不能换行
nowrap=false可以换行


如何用CSS实现背景半透明效果

HTML代码:
<div class=”alpha1″>
<div class=”ap2″>
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
</div>
CSS代码:
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter: Alpha(Opacity=30);
}
.ap2{
position:relative;
}
这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式:
HTML代码:
<div class=”alpha1″>
<div class=”ap2″>
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
<!–[if IE]><![if !IE]><![endif]–> <div class=”alpha2″></div> <!–[if IE]><![endif]><![endif]–>
</div>
CSS代码:

.alpha1,.alpha2{
width:100%;
height:auto;
min-height:250px;/* 必需 */
_height:250px;/* 必需 */
overflow:hidden;
background-color:#FF0000;/* 背景色 */
}
.alpha1{
filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
background-color:#FFFFFF;
-moz-opacity:0.8; /* Moz FF 透明度20%*/
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
position:absolute;
}


怎么做网站(制作静态页的工具软件)

在我看来网站的建设可以分为三级跳,其中第一级就是我们所常说的,静态页。在大多人刚刚接触网站制作的时候往往会提及到这样两个软件,frontpage,Dreamweaver 。这个两个建站利器蚕食了初级网站架设的绝大部分版图。
当人们问起这两个软件的优缺点的时候,我们大多反应为:Frontpage是初学者最易上手的制作软件,而Dreamweaver 则略显专业些,若想把站点做的完善点,还是用Dreamweaver 好。
Frontpage作为微软OFFICE软件群中不可或缺的一环,把初学者建站的门槛已经降得不能再低,只要会点OFFICE常用软件例如WORD的人,想要操作Frontpage简直轻而易举。不过,有利必有弊,一旦软件以贴合普通大众的使用习惯为目标,往专业化发展就有些捉襟见肘了。Frontpage会产生很多“垃圾”代码,这简直是那些需要精确定位和排版却不懂HTML的人工作时候的梦魇。而Dreamweaver 这个方面却显得异常出众。选择一个好的编辑在学习初期显得尤为重要。
Dreamweaver 起先为Macromedia 旗下产品,曾经和FLASH,FIREWORKS并称为“网页三剑客”,后来Macromedia 为Adobe 收购。
个人建议,在接触建站的初期就把软件为Dreamweaver
以下是维基百科对以上两个软件做的定义的链接,大家可以参考下
http://zh.wikipedia.org/wiki/Microsoft_Frontpage
http://zh.wikipedia.org/w/index.php?title=Adobe_Dreamweaver&variant=zh-cn

网站建设说起来简单,但做起来却没有那么容易。以上是本人的心路总结,希望对新人的成长能有所帮助。当然我也不是什么高手,如有不妥之处,还望大家指正。如有转载请表明出处,谢谢。


最优秀的Javascrīpt框架-jQuery

jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
1.经典的jQuery
为达到document.getElementById()的目的,jquery是这样写的:
代码
var someElement = $(”#myId”);
看起来比其他两个框架的要多了一个#,好,看看下面的用法:
代码
$(”div p”);(1)
$(”div.container”)(2)
$(”div #msg”);(3)
$(”table a”,context);(4)
在prototype里看过这样的写法吗?第一行代码得到所有标签下的元素。第二行代码得到class 为container的元素,第三行代码得到标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
2.Jquery对象
jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):
代码
var a = $(”#cid”);
var b = $(”hello”);
var c = document.createElement(”table”); var tb = $&copy;;
3.jquery可以使javascrīpt代码与html代码分离
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:
代码
$(document).ready(function(){
alert(”hello”);
});(1)
<body onload=”alert(’hello’);”>(2)
上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jqeury的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。
jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
代码
$(document).ready(function(){
$(”#clear”).click(function(){
alert(”i am about to clear the table”);
});
$(”form[0]“).submit(validate);
});
function validate(){
//do some form validation
}
4.同一函数实现set
代码
$(”#msg”).html();
$(”#msg”).html(”hello”);
上面两行代码,调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
5.ajax
使用jquery实现ajax同样简单异常
代码
$.get(”search.do”,{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post(”search.do”,{id:1},rend);
function rend(xml){
alert(xml);
} (2)
$(”#msg”).ajaxStart(function(){
this.html(”正在加载。。。。”);
});(3)
$(”#msg”).ajaxSuccess(function(){
this.html(”加载完成!”);
});(4)
这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。
3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jquery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。
6.渐入淡出
代码
$(”#msg”).fadeIn(”fast”);
$(”#msg”).fadeOut(”slow”);
没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。