Pages: 42/43 First page Previous page 33 34 35 36 37 38 39 40 41 42 43 Next page Final page [ View by Articles | List ]
Sep 1

w3c 不指定

tommyhu , 10:33 , 大前端 , Comments(0) , Trackbacks(0) , Reads(6656) , Via Original
[编辑本段]W3C释义
  W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。
  W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。
[编辑本段]W3C简介:
  自从Web诞生以来,Web的每一步发展、技术成熟和应用领域的拓展,都离不开成立于1994年10月的W3C(World Wide Web Consortium,万维网联盟)的努力。W3C是专门致力于创建Web相关技术标准并促进Web向更深、更广发展的国际组织。
  一、 W3C的发展历史和组织机构
  1994年10月,Web还是大学、研究机构的新宠时,Web技术和应用的发起人、被誉为Web之父的Tim Berners-Lee就敏锐地意识到Web的出路不是象牙塔中少数人的互联网络,而是供全社会使用的一种公共的信息资源和交流资源,而要达到这个目标,对其中所涉及的技术进行规范化、指导软件产业对基于此平台的技术的开发、相关技术的普及、推广和培训都必不可少。因此,Tim Berners-Lee这位Web的先驱联合CERN、DARPA和欧盟倡导并组织成立了Web的核心技术机构——W3C。
  W3C的核心最初位于Tim Berners-Lee供职的美国麻省理工学院计算机实验室(MIT/LCS);随后,该组织迅速吸引了大量在Web上的志同道合者,开始出现多个中心的格局,随后出现的另外两个中心分别位于法国的INRIA(Institut National de Recherche en Informatique et Automatique)和日本的Keio大学(庆应大学),其中2003年INRIA由ERCIM(Eruopean Research Consortium in Informatics and Mathematics)接替;此外,W3C还在全球各地建有14家办事机构,其中香港就有一处。
  W3C的工作以成员机构为载体负责实施。截止目前,W3C在全球已有超过450家会员机构,并与其他国际标准化等多家组织机构建立了广泛的合作关系。此外W3C还有少量的专职工作人员,总共有70多人。
  创建伊始,W3C就开始以引领Web 技术的发展和促进为己任。其宗旨概括为7点:
  * 推进Web的普及,即希望未来无论任何人、任何设备、任何地点以及任何时间(4A)都可以方便地使用Web和Web上的合法资源。
  * 解决语义网络(Semantic Web)问题,即不仅人能阅读和理解Web上的信息,计算机、程序以及其他硬件设备也 同样能理解并处理Web上的形形色色的 信息。
  * Web应该是可信任的网络,使Web上的机密信息有安全保证、同时使用者得到的也是一个安全可靠的网络资源环境。
  * 协同工作,W3C从成立之初就是一个厂商中立的技术组织,始终通过在工业上达成共识、鼓励开放性讨论来致力于设计、推广开放的语言,以及通过各种技术草案来推动基于Web的各类软件产品,从而避免市场上技术规范的混乱。
  * 可持续发展问题。W3C的立足点是发展和推广基于Web的技术,由于网络的易用性等特点,W3C已清楚地意识到Web的需求总是走得更远,因此,为保证Web的可持续发展,所有的设计都遵循简易性、可调节性、兼容性、可扩展性等指导原则。
  * 权利的分散问题。为避免人为和客观上造成的瓶颈和技术失衡问题,W3C的工作是分散处理的。
  * 支持多媒体,由于Web本身就拥有极其丰富的资源,其中相当一部分是多媒体信息,因此,多媒体信息处理领域内的规范是W3C的一个重要方向。
  总之,W3C以开发“Web 事实标准”的各种技术规范作为其核心任务,目前已开发了超过50个技术规范。这些技术规范中大部分是由各个功能组开发的各种功能性规范,同时也包括WWW的核心体系结构。W3C的这些成果基本上已由企业和研究机构进行了实现。
  基于W3C的组织原则和工作宗旨,以及Web的实际应用情况,W3C提出了其长远目标,包括3个方面的内容,分别是:
  * 建立一个普遍的、全社会易于使用的公共网络环境;
  * Web上的语义可管理和正确使用;
  * Web应该是安全可信的。
  二、 W3C推出的主要规范
  到目前为止,W3C已开发了超过50个规范(草案)。这些规范(草案)包括人们早已、耳熟能详的HTML、HTTP、URIs、XML等,也包括针对语义Web的RDF、OWL等。
  * HTML/XHTML:HTML是Web的基础之一,基于HTML,Web上开始出现丰富多彩的页面,蕴涵了各种信息。基于HTML,Web以一种简便易用的方式走出了象牙塔,成为全社会的公共资源和财富。W3C先后推出了多个HTML版本,分别是1997年12月的首个版本、1998年4月的更新、1999年12月推出HTML 4.01版。XHTML是对HTML 4.01的扩展,在其中可以使用XML的语义功能。XHTML 1.0已于2000年1月作为推荐标准发布;XHTML Basic是对XHTML1.0的独立于设备(如手机、PDA等)的扩展,于2000年12月发布;随后,2001年5月推出了XHTML的模块化版本——XHTML1.1。
  * CSS:CSS负责为网页设计人员提供丰富的款式空间来设计网页。CSS所提供的网页结构内容与表现形式的分离机制,大大简化了网站的管理,提高了开发网站的工作效率。CSS可用于控制任何HTML和XML内容的表现形式。CSS1.0于1996年12月推出,1998年5月CSS2.0发布。
  * XML:1998年2月发布的XML 1.0是W3C最具前瞻性和最有影响的标准之一。XML作为下一代Web的第一块重要基石,为分布式的、异构的数据交换提供了强大的功能,并且将数据本身和数据的表现分离,同时,就数据本身而言,数据的值和语义也是适当分离的。事实上,XML已经发展为一族技术,包括2001年5月发布的XML Schema、1999年1月发布的XML Namespaces、1999年11月发布的用于处理XML转换的XSLT和用于在XML文档中定位的XPath,以及2001年6月发布的XLink和XML Base等。此外,XML的出现为程序能够自动地处理Web数据和信息,以及Web服务(WSDL、SOAP、UDDI规范)提供了一种公共基础。
  * DOM:DOM为HTML、XML等数据载体和信息载体在内存中的处理提供了一种基本的对象模型,可提供连接到文件的结构、格式、事件等。由于不依赖于任何程序设计语言和网页描述语言,它为有效处理HTML和XML数据提供了一种标准的、独立的接口。DOM先后经历了3个版本,分别是1998年10月发布的DOM Level 1、2000年11月发布的DOM Level 2和2003年发布的DOM Level 3。
  * MathML:MathML为在Web上实现一种跨平台的数学描述机制提供了工具性语言。MathML先后推出过2个版本:1999年7月发布的MathML 1.0和2001年2月发布的MathML 2.0。
  * PNG(Portable Network Graphics):1996年发布的PNG是一种可移植的、对图形像素无影响的、便于图像压缩的图像文档格式。目前已是使用最广泛的Web图像格式之一。
  * SVG(Scalable Vector Graphics):SVG是针对Web上大量矢量图提供的图像内容管理机制,包括图像内容查询、定制和使用图像等功能。2001年9月推出的是SVG 1.0,SVG 1.1/SVG Basic和Tiny已经可以为一些小型设备提供矢量图像;2003年7月已提交SVG 1.2草案。
  * RDF(Resource Description Framework):RDF是第一个有关构建语义网络的推荐标准,它提供了一种技术标准来描述Web上的词汇、编码和元数据(Metadata),并建立这些对象与Web上丰富资源之间的联系。RDF于1999年2月发布,至今仍是最重要的语义Web方面的技术标准,也是其他技术的基础之一。
  三、 W3C的未来工作重点
  毫无疑问,W3C未来的工作重点仍然一如既往地围绕其长远目标来展开。具体可分为Web Services、Semantic Web,以及这两者结合起来的Semantic Web Services。除此以外,基于各种移动设备(如手机等)的Web访问机制也是目前的研究热点。
  四、 中国的W3C现状
  中国已成为Web用户增长最快的国家,W3C也注意到这一点,因此最近两年,W3C的一些高层人物相继出访我国,与我国同行进行了广泛的交流,并在香港特别行政区已设立了办事处;我国的研究人员也对W3C的草案工作投入了极大关注,目前在这方面最为活跃的单位有中国科学院计算所、中国科学院软件所、清华大学、北京大学、北京科技大学、北京邮电大学、东南大学等研究机构;但遗憾的是各大软件公司虽然也积极关注W3C的各种活动和成果,却没有主动参与到国内同行的交流、国际草案的讨论、规范的制定中去,在技术上难免比较被动。
  2003年11月,由中国计算机学会、万维网联盟香港办事处主办,在北京中国科学院情报文献中心召开了W3C 2003中国论坛。以W3C总干事Ivar Herman为首的权威人士在语义Web、移动计算、国际化、网络可读性等方面进行了交流,并介绍了这几个领域的工作内容和研究现状。
  2005年10月,北航成功申请了W3C北京办公室的挂靠资格,成为中国内地第一家也是唯一一家W3C分支办公室。这意味着中国通过北航在万维网和Web技术领域占据了关键性的角色,将共同参与规划万维网的未来发展去向。更为重要的是,仅就北京地区而言,相当一部分研究机构和企业目前已是W3C的会员,更多的高校、研究机构和企业即将申请加入W3C,目前中国在Web技术领域的发展潜力是巨大的。北航成功申请到W3C北京办公室这一成果不仅有利于北航更加积极的参与到国际交流合作中,更给中国Web领域的迅速发展起到极大的促进作用。
[编辑本段]WEB标准
  WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:
  1.结构标准语言
  (1)XML
  XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。
  (2)XHTML
  XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考http://www.w3.org/TR/xhtml1)。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。
  2. 表现标准语言
  CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2(参考http://www.w3.org/TR/CSS2/)。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。
  3.行为标准
  (1)DOM
  DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(http://www.w3.org/DOM/),DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。
  (2) ECMAScript
  ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。
[编辑本段]W3C CSS验证器
  这是什么?我需要它么?
  W3C CSS验证服务是由W3C制作的一个免费软件,用于帮助Web设计者检查层叠样式表(CSS)。你可以在W3C提供的免费在线服务中使用,也可以下载后作为一个Java程序或者Servlet运行在自己的机器上。
  你需要它么?如果你是一个web开发者或者web设计人员,这个工具将是一个强大的助手,它不仅会将你所写的css文件和css的标准进行比较,帮你找出错误,笔误,误用等等,它还可以告诉你你的css中可用性上的风险。
  上面的解释我看不懂!求救!
  大部分的网页是使用html的计算机语言编写的,这种语言能创建一个结构化划分信息,超链接,多媒体对象等。对于颜色,文字,布局等样式方面的问题,html采用css来解决,css是“层叠样式表”的简称。这个工具所做的事情就是帮助用户进行css的检查,并且在需要的时候可以做一些自动更正。
  那么,这个东西是判断一个css是正确与否的权威么?
  不,它只是一个有用的可靠的软件工具,和所有的软件一样,它也有自己的bug和问题。真正的权威应该参考css标准。
  需要花费多少钱?
  不需要。这个服务是免费的,并且源代码也是公开的,你可以自由的下载,使用,修改,分发等等。 如果你很喜欢它,我们也欢迎你加入这个项目,或者通过w3c的支持者程序来资助它,但是没有任何人可以强迫你这样做。
  谁写了这个工具?谁在维护这个工具?
  W3C维护并运行这个服务,感谢w3c的成员,志愿开发者和志愿翻译者所作的工作。更详细的信息请访问创作人员列表。你也可以加入进来。
  我能帮着做点什么呢?
  当然,如果你是一个Java的编程人员,你可以通过取得源代码,添加你的新代码或者改正bug的代码。
  除此之外,你也可以通过改进文档,翻译,加入mailinglist去解答别人的疑问来帮助这个工具。
  还有别的问题?
  如果你还有别的关于css或者css验证器的问题,请加入mailinglist或者论坛。但是在那之前,请仔细阅读一下css验证器的常见问题及解答(FAQ),避免不必要的重复劳动和浪费别人的精力。
[编辑本段]W3C 技术架构图
  W3C技术架构图描绘了一个两层的模型:万维网体系结构(被标注为“One Web”)建立在互联网(Interner)体系结构之上。图中丰富的Web层显示了W3C关心的领域和发展的技术。
  Web体系结构被描绘成一系列的层,每一层都建立在另一层之上。从底至顶依次为:
  URI/IRI, HTTP
  Web Architectural Principles
  XML Infosets; RDF(S) Graphs
  XML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer, RDF/XML, SPARQL
  在顶层包含着六个框,分别与W3C主要的活动组相对应:Web Applications, Mobile, Voice, Web Services, Semantic Web, and Privacy。
  "Interaction"(“交互”)框中罗列着:XHTML, SVG, CDF, SMIL, XForms, css, 和 WCID.
  "Mobile"(“移动”)框中罗列着 XHTML Basic, Mobile SVG, SMIL Mobile, XForms Basic, css Mobile, MWI BP.
  "Voice"(“语音”)框中罗列着 VoiceXML, SRGS, SSML, CCXML, and EMMA
  "Web Services"(“Web服务”)框中罗列着 SOAP, XOP, WSDL, WS-CDL, and WS-A.
  "Semantic Web"(“语义的Web”)框中罗列着 OWL, SKOS, and RIF.
  "Privacy"(“保密”)框中罗列着 P3P, APPEL, XML Encryption, XML Signature, and XKMS
  一个橙色的横条把这些领域联系在一起:Web Accessibility(Web可访问性), Internationalization(国际化), Mobile Access(移动访问), Device Independence(设备独立), and Quality Assurance(质量保证)。
  这个例图展示了万维网的基础框架及 W3C 的工作重点 。
  URI、HTTP、XML 和 RDF 的基础支持著五个方面的工作。无障碍网页、国际化、设备无关和质量管理等主题已融入了 W3C 的各项技术之中。
  W3C正致力把万维网从最初的设计 (基本的 HTML、URIs 和 HTTP) 转变为未来所需的模式。 W3C 的技术将帮助未来万维网成为信息世界中有高稳定性、可提升和强适应性的基础框架。
Aug 31

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#nli_con {
  height: 200px;
  width: 400px;
  overflow: hidden;
  border: 1px solid #999999;
}
div,dl,dt,dd {
  margin: 0px;
  padding: 0px;
}
dl {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCCCCC;
  font-size: 14px;
  margin-right: 10px;
  margin-left: 10px;
}
dd {
  font-size: 12px;
}
-->
</style>
<script language="javascript">
var $ = function (d){
    typeof d == "string" &&(d = document.getElementById(d));
    return $.fn.call(d);
};
$.fn = function (){//附加2个方法
  this.$ADD = function (fn){CLS.add(this,fn)};
  this.addEvent = function (sEventType,fnHandler){
    if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
      else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
      else {this["on" + sEventType] = fnHandler;}
  }
  this.removeEvent = function (sEventType,fnHandler){
    if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
      else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
      else { this["on" + sEventType] = null;}
  }
  return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
  initialize: function(id,name,out,speed) {
    this.name = name;
  this.box = $(id);
  this.out  = out;
  this.speed = speed;
  this.d = 1;
  this.box.style.position = "relative";
  this.box.scrollTop = 0;
  var _li = this.box.firstChild;
  while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
  this.lis = this.box.getElementsByTagName(_li.tagName);
  this.len = this.lis.length;  
  for(var i=0;i<this.lis.length;i++){//计算该复制多少节点,保证无缝滚动,没必要的就不复制
      var __li = document.createElement(_li.tagName);
    __li.innerHTML = this.lis[i].innerHTML;
    this.box.appendChild(__li);
    if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
  }
  this.Start();
  this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
  this.box.addEvent("mouseout",Bind(this,this.Start,[]));
  },
  Start:function (){
    clearTimeout(this.timeout);
    this.timeout = setTimeout(this.name+".Up()",this.out*1000)
  },
  Up:function(){
    clearInterval(this.interval);
    this.interval = setInterval(this.name+".Fun()",10);
  },
  Fun:function (){
      this.box.scrollTop+=this.speed;
    if(this.lis[this.d].offsetTop <= this.box.scrollTop){
      clearInterval(this.interval);
    this.box.scrollTop = this.lis[this.d].offsetTop;
    this.Start();
    this.d++;
    }
    if(this.d >= this.len + 1){
       this.d = 1;
       this.box.scrollTop = 0;
    }
  }
};
$(window).addEvent("load",function (){
  marquee = new Marquee("nli_con","marquee",1,2);//加载完后运行代码,
});
</script>
</head>
<body>
<div id="nli_con">
<dl>
   <dt><a href=http://www.hwj123.com/'blog/post/10.html' target='_blank'><strong>1. 域名与网址有什么区别?</strong></a></dt>
   <dd>一个完整网址范例如下: http://www.hwj123.com....</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/8.html' target='_blank'><strong>2. 什么是虚拟主机? </strong></a></dt>
   <dd>虚拟主机是使用特殊的软硬件技术,把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每一台虚拟主机都具有独立的域名,具有完整的Internet服务器(WWW、FTP、Email等)功能,虚拟主机之间完全独立,并可由用户自行管理,在外界看来,每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器,并由高级网管负责监控。</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/45.html' target='_blank'><strong>3. 关于中小企业网站建设的知识</strong></a></dt>
   <dd> 中小企业一直是企业上网工程主要服务的对象,中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果,本站整理了多年对中小企业服务的经验...</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/42.html' target='_blank'><strong>4. 为什么要建立网站标准?什么是网站标准?</strong></a></dt>
   <dd>  我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/22.html' target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt>
   <dd> 企业网站已经成为一个企业互联网战略的基础,有人说:"10年以后,互联网业将消失。"...</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/30.html' target='_blank'><strong>6. 2009牛年,网站怎样发展好</strong></a></dt>
   <dd>  第一,选择做网站内容, 制定网站内容,根据你的团队工作能力,工作量接受范围度等等,制定一个框架性的简单的方案。  最好能发挥自己的专长,如果你是三国里的张飞...</dd>
</dl>
<dl>
   <dt><a href='http://www.hwj123.com/blog/post/13.html' target='_blank'><strong>7. Internet域名是什么??</strong></a></dt>
   <dd>Internet域名,是Internet网络上的一个服务器或一个网络系统的名字,在全世界,没有一个重复的域名。域名的形式是以若干个英文字母和数字组成,由...</dd>
</dl>
</div>
</body>
</html>

注释

$(window).addEvent("load",function (){
  marquee = new Marquee("nli_con","marquee",a,b);//加载完后运行代码,nli_con是外框的id,a是间隔滚动的时间,b是滚动距离递增的数值
});

不需要固定一个行高,文档结构不一定非要像我这样。
可以换成

=============也可以使下面的结构==============

      

  •   


Aug 30
可为什么要清除浮动样式??
通俗一点的解释是,因为DIV的流动性会带给你很多你不想要或者说 你意想不到的效果!
专业点的解释
Quotation

     在非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

再来个形象点的DEMO
Quotation

DIV1宽度为100px,
DIV2宽度为50px,
如果上级DIV层的宽度大于DIV1+DIV2的宽度,
DIV2设置浮动属性float:left,
DIV2会像流水一样,自动显示在DIV1的右侧,
如果上级DIV层的宽度等于或者小于DIV1+DIV2的宽度,
那么,DIV2层就会被挤到DIV1的下方.
如果DIV1设置了清除属性,DIV2就不会流动到DIV1的后面,
而是直接显示在DIV1的下面.


最近更新20110506 21:38分

/* 清理浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}

简介版本

.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

使用 :after 伪类来提供浮动块后的 clear:both。


万能清除浮动样式代码
Highslide JS

html body div.clear,
html body span.clear
{
     background: none;
     border: 0;
     clear: both;
     display: block;
     float: none;
     font-size: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}

这个样式可以通过在页面中添加
<div class=”clear”></div>
<span class=”clear”> </span>
来清除页面中的浮动。
Aug 30
ie6div高度无法小于10像素解决方法
font-size:0; margin:0; padding:0; border:0;


用CSS 的定义一个DIV的高度时,在IE 7浏览器下可以正常显示。但是在IE 6 中,height 在10px以下就无法定义了。这点跟表格有点类似。解决的方法如下:
法一:定义overflow属性。比如想定义一个高度为2px 的线条。
<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

法二:将div 的字体大小属性fontsize 设置为跟高度相同。
<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>
Aug 30
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。
Highslide JS
Aug 30

css hack 不指定

tommyhu , 12:21 , 大前端 » CSS3 , Comments(0) , Trackbacks(0) , Reads(7501) , Via Original
  什么是CSS hack(http://www.cssplay.org.cn/css-hack/index.html)由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
  这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
  这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
  CSS Hack的原理是什么
  由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
  比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等
  书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
  如何写CSS Hack
  比如要分辨IE6和firefox两种浏览器,可以这样写:
  <style>
  div{
  background:green; /* for firefox */
  *background:red; /* for IE6 */
  }
  </style>

  我在IE6中看到是红色的,在firefox中看到是绿色的。
  解释一下:
  上面的css在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
  在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
  CSS hack:区分IE6,IE7,firefox
  区别不同浏览器,CSS hack写法:
  区别IE6与FF:
  
background:orange;*background:blue;

  区别IE6与IE7:
  
background:green !important;background:blue;

  区别IE7与FF:
  
background:orange; *background:green;

  区别FF,IE7,IE6:

  background:orange;*background:green;_background:blue;
  background:orange;*background:green !important;*background:blue;

  注:IE都能识别*;标准浏览器(如FF)不能识别*;
  IE6能识别*,但不能识别 !important,
  IE7能识别*,也能识别!important;
  FF不能识别*,但能识别!important;
  IE6 IE7 FF
  * √ √ ×
  !important × √ √
  浏览器优先级别:FF  以:

" #demo {width:100px;} "为例;
  #demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
  * html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
  *+html #demo {width:130px;} /*会被IE7执行*/
  ---------------

  所以最后,#demo的宽度在三个浏览器的解释为:
  FIREFOX:100px;
  ie6:120px;
  ie7:130px;
  
  http://www.1987y.org
  详细的CSS资料参考
  http://www.cssplay.org.cn/
  玩转CSS - CSSPLAY中文官方网站
  一个致力于中国CSS技术的公益组织
Aug 28
采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,像阿里巴巴、163等大型门户站点就已经完成了重构工作。本人在去年就已经有了使用CSS+DIV来编写网页源码的习惯了,个人感觉这种方法确实比传统的TABLE形式的源码架构强多了。

1:表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。

2:提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。

3:提高页面浏览速度

对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

还有因为标签是要等
下载好以后才可以显示的,所以整个网页是一下子跳出来的,这样让人感觉起来显示速度非常的慢。而使用css+div,
标签不用等
下载好就可以显示里面的内容的,所以让人感觉打开网页的速度非常之快。

4:易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

从以上的描述来看,采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。

CSS+DIV所以成为目前网页布局主流,在我看主要核心原因,其实不仅仅是其符合W3C标准,而是通过采用CSS+DIV,网页工程从此:

表现与内容分离

现在div+css已经很风靡了,各大网站都纷纷重构为div+css模式,网易就是最好的例子,采用层和CSS后,给用户最直观的体验就是网页打开速度快了很多。能给用户好的体验,为什么不做呢?

今天我主要从SEO的角度来分析用DIV+CSS进行网站制作或重构的必要性:

1、用div+css构架的网站容易向W3C 标准靠拢,网站是否符合W3C标准是搜索引擎给网页排名的一个影响因素,特别是YAHOO,它看的比较重。

2、网站源代码简洁,除了几个div,ul,li,dl,dd,dt之类的标签外,几乎不用其他标签,这样,是网站内容完全裸露在搜索引擎的蜘蛛面前,便于抓取关键内容,增大关键内容的页面的比重,从而为排名因素增加比重。

3、可轻松做到关键内容先被蜘蛛读取。一般的站点都是左中右三栏式,页面的主要内容是在中间一栏,而蜘蛛读取页面内容是按照从上而下,从左至右的顺序进行的,如果你的左栏内容比较多,那就麻烦了,你的页面主要内容权值就会下降。而用div+css就可以把主要先写在前面,在写左栏,右栏内容,然后通过CSS一定位就可以了

4、方便调整网站结构布局。对于常用的表格布局,若想改下布局,可谓牵一发而动全身,网站层结构如果设计的合理,可以用CSS很轻松的改变网站的表现,这就是结构和内容,行为的分离。如果网站结构定期改动,自然对搜索引擎的蜘蛛吸引力不小的。
一个用层和css做好根基的网站,以后的优化工作自然会省力不少的。
Aug 28
1、Firefox设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width。

2、Firefox支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上

如:

Firefox里的宽度为:500+5+5=510px,所以要把Firefox的宽度设置成490px才可以
IE里变500px

修改后的代码:


3、Firefox cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

4、在firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}

5、Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

6、Firefox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
Pages: 42/43 First page Previous page 33 34 35 36 37 38 39 40 41 42 43 Next page Final page [ View by Articles | List ]