几个CSS学习网在(可惜大部分是ENGLISH的)[9月20日更新]

时间:2009年03月26日作者:愚人码头查看次数:2,442 views评论次数:0

全部链接已经更新

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

再加一个CSSPlay

cssplay是一个CSS demo网站,里面很多demo,这些文章有教如果放置图片,有些是说CSS技巧。

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

1. CSS Help Pile

CSS Help Pile重点关于CSS资源,技巧与手法。该网站授予良好的网页组及优秀的资源,适用于各个水平的开发人员,分类包括:初学者,浏览器解析的错误,简评CSS的书籍。

2. A List Apart CSS Topics

A List Apart是一个CSS优秀文章的收集网站,从1999年开始收集文章,关注最佳网页设计。

 

3. CSS Basics

CSS Basics可以当成一书来看,用了18个章节来传授基本的CSS概念,对初学者相当有帮助。还有就是所有18个章节,提供打印或PDF格式下载。

转载注明:http://www.css88.com/article.asp?id=506

4. Eric Meyer: CSS

这里主要是收集Eric Meyer (著名的开发者)的作品,在css/edge和CSS reference等页面可以找到一些相关的资源。

5. Holy CSS Zeldman!

 

Holy CSS Zeldman是关于基于标准的CSS教程、工具、布局相关链接的收集。

6. 456 Berea Street – CSS category

456 Berea Street下有一个CSS分类,里面有超过300篇文章,这些文章有教如果放置图片,有些是说CSS技巧。

7. /* Position Is Everything */

这里只要关注的是如何摆脱浏览器显示的错误。

8. HTML Dog CSS Tutorials

HTML Dog致力于教授最佳的XHTML与CSS布局,分为初级,中级,高级三个级别。

9. Learn CSS Positioning in Ten Steps

如果使用CSS定位是一个棘手的问题,这里有10步,看能不能帮你解决。

10. Andy Budd CSS/Web Standards Links

Andy Budd有着一系列CSS/web标准的有用链接,以帮助你找到有用的资料。

11.W3CSchools CSS Tutorial

这个有中文站:http://www.w3school.com.cn/index.html

 

W3CSchools有一个CSS部分,内容涵盖了初级到高级的CSS主题。

12. css Zen Garden

 

css Zen Garden给我们展示了CSS是怎样工作的,使用相同的HTML文件,设计师提交的外部样式来美化这个文件。用Web Developer Tool就可以检查CSS是如何进行布局工作的。这个网站在7个最好的网上CSS资源里也有介绍。

13. CSS at MaxDesign

 

MaxDesign拥有Russ Weakley的一套CSS精彩教程,在Listmatic里,教你使用CSS格式化列表,在Floatutorial里,介绍floating元素的知识。

14. CSSeasy.com

 

CSSEasy.com拥有丰富的经验及创意分享,让我们更好地了解CSS。

15. CSS-Discuss

 

CSS-Discuss是一个CSS爱好者社区,而 CSS-Discuss Wiki是关于CSS的应用收集。

16. Web Design from Scratch: CSS

 

Web Design from Scratch有一章节是关于CSS的,涵盖了CSS的基本概念。 其中的Introduction to CSS对初学者很有帮助。

17.CSS-Tricks

 

CSS-Tricks是一个专注CSS的博客。

18.CSS on Delicious

 

The CSS tag on Delicious是关于优秀CSS设计的链接收集,亮点就是让我们知道哪些好东西在被人看。

19. SitePoint CSS Reference

 

SitePoint有一个CSS部分,专门讨论入门水平的CSS主题。

20. CSSDog

 

CSSDog有一部分为初学者与高级开发者设计的,其中的开发经验及参考,个人认为是最有价值的部分。

JS弹出半透明小窗口实例(支持IE,FF)

时间:2009年03月26日作者:愚人码头查看次数:5,179 views评论次数:0

JS弹出半透明小窗口实例

具体源码如下:
耗性能点:gD.style.filter=”alpha(opacity=60)”;
解决:select遮住弹出层的问题,IE6下,select消失,暂时无法解决;
 

注意一下几点:

转载注明:http://www.css88.com/article.asp?id=504

1.增加了iframe样式;
2. gD增加了<!–[if lte IE 6.5]><iframe></iframe><![endif]–>//解决IE6下select遮住弹出层的问题。

demo:http://www.css88.com/demo/zg_div/zg_div.html

分类:JS

【IE6的疯狂之五】div遮盖select的解决方案

时间:2009年03月26日作者:愚人码头查看次数:9,544 views评论次数:7

IE6以及一下版本下,选择框Select会覆盖Div中的内容
一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容。由于Iframe的可以显示在Select上层,就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可,不用修改其他内容。
例如:http://www.css88.com/demo/div_select/div_select.html

CSS代码
  1. body { margin: 0; padding: 0; text-aligncenterbackground-color#eee; }   
  2. #bd { margin20px autopadding5px 20px 20pxborder1px solid #bbbwidth760pxbackground-color:#9CCE2E;  }   
  3. #popup {width300px;height100px;padding10px;positionabsolute;left443px;top57px;border1px solid blue;background-color#fff;filter:alpha(opacity=60);opacity:0.4;}   
  4. #popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  

 

尤其注意这个样式:

#popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  

 

XML/HTML代码
  1. <div id=“bd”>  
  2. <h1>IE6下div遮盖select的解决方案</h1>  
  3. <div class=“parameter”>  
  4. <label for=“ddTest”>Test</label>  
  5. <select id=“ddTest”>  
  6. <option></option>  
  7. <option>pick me</option>  
  8. </select>  
  9. </div>  
  10. </div>  
  11. <div id=“popup”>  
  12. Is the select element poking through?   
  13. <!–[if lte IE 6.5]><iframe></iframe><![endif]–>  
  14. </div>  

转载注明:http://www.css88.com/article.asp?id=503
注意:<!–[if lte IE 6.5]><iframe></iframe><![endif]–>:表示在IE6下显示<iframe></iframe>,但是我们从样式中可以看出这个iframe是看不到的;
目前存在的bug:IE6下下拉框(select)看不到。

标签:分类:html+css

overflow:auto清除浮动

时间:2009年03月26日作者:愚人码头查看次数:6,538 views评论次数:1

overflow:auto清除浮动

overflow:auto在css手册中的解释:必需时对象内容才会被裁切或显示滚动条!

其实overflow:auto可以用来清除浮动

这在以前也发表过很多:

http://www.css88.com/article.asp?id=416

http://www.css88.com/article.asp?id=316

今天看一个FF下的问题,看源码:

 

CSS代码
  1. <style type=“text/css”>   
  2. <!–   
  3. body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}   
  4. body{font:400 12px Tahoma,SimSun,Arial;color:#333333;background-color:#fff; }   
  5. ul,li{list-style:none}   
  6. .ym_n{ border:#dbdbdb 1px solidheight:220pxmargin:0 autobackground:#FFFFFFwidth:256px;}   
  7. .ym_n .so1{ padding:9px 10pxheight:21px;}   
  8. .yma{ width:118pxheight:17px}   
  9. .ymsoa{ vertical-align:middle;*vertical-align:-1pxmargin-left:3px}   
  10. .ym_n .so2{ padding:15px 10px 9pxheight:21px;}   
  11. .ym_n ul{ width:222px;  margin:0 auto;  }   
  12. .ym_n li{ height:25pxwidth:74pxfloat:leftline-height:25px}   
  13. .ym_n li.redcolor:#FF0000font-weight:700}   
  14. –>   
  15. </style>  

 

XML/HTML代码
  1. <div class=“ym_n”>  
  2. <div class=“so1″>WWW.<input id=“yma” class=“yma” type=“text” name=“” /><input type=“submit” class=“ymsoa” name=“button” id=“button” value=“提交” />  
  3.   </div>  
  4. <ul>  
  5.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  6.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com.cn</label></li>  
  7.         <li class=“red”><label for=“”><input name=“” type=“checkbox” value=“” />.cn</label></li>  
  8.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  9.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label>  
  10.         </li>  
  11.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  12.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  13.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  14.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  15.   </ul>  
  16.   <div class=“so2″>WWW.<input id=“yma” class=“yma” type=“text” name=“” /><input type=“submit” class=“ymsoa” name=“button2″ id=“button2″ value=“提交” /></div>  
  17.     <ul>  
  18.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  19.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com.cn</label></li>  
  20.         <li class=“red”><label for=“”><input name=“” type=“checkbox” value=“” />.cn</label></li>  
  21.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  22.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  23.         <li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>  
  24.     </ul>  
  25. </div>  

转载注明:http://www.css88.com/article.asp?id=502

在FF显示:

见DEMO:http://www.css88.com/demo/overflow/overflow1.html

只要把样式中

.ym_n ul{ width:222px;  margin:0 auto;  } 改写成.ym_n ul{ width:222px;  margin:0 auto;  overflow:auto }

就正常了

见DEMO:http://www.css88.com/demo/overflow/overflow2.html

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

另:使用overflow:auto清除浮动,Firefox会产生focus,见

http://www.aoao.org.cn/blog/2007/05/firefox-overflow-auto/

分类:html+css

Css Reset(复位)整理

时间:2009年03月26日作者:愚人码头查看次数:3,502 views评论次数:2

Css Reset是什么? 有些同行叫 “css复位”,有些可能叫 “默认css”…..
相信看完全文您会对Css Reset有个重新的认识

原文地址: http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
 

PS:

  1. * {   
  2.  padding: 0;   
  3.  margin: 0;   
  4.  } 

这就是最常用的Css Reset,但是这里会有很多问题。

原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定”Css Reset”也是为了兼容与统一,
正确有效的使用”Css Reset”可以在某种程度上节约时间与金钱.

转载注明出处:http://www.css88.com/article.asp?id=500

非常感谢Perishable的整理与归纳

下面是关于几类Css Reset的简单介绍,本人能力有限.只能理解大概意思,还请各位看官见谅
_________________________

Minimalistic Reset [ Version 1 ]
相信这一段你经常看到.而且也是我们经常用到的

 

引用内容 引用内容
 
CSS代码
  1. * {   
  2.  padding: 0;   
  3.  margin: 0;   
  4.  }  

Minimalistic Reset [ Version 2 ]
border:0的设计有些不靠谱了

 

引用内容 引用内容
CSS代码
  1. * {   
  2.  padding: 0;   
  3.  margin: 0;   
  4.  border: 0;   
  5.  }   

Minimalistic Reset [ Version 3 ]
当然这个也是不推荐的.会跟某些默认样式有冲突

 

引用内容 引用内容
CSS代码
  1. * {   
  2.  outline: 0;   
  3.  padding: 0;   
  4.  margin: 0;   
  5.  border: 0;   
  6.  }   

_________________________

Condensed Universal Reset
这是作者当前比较钟意的一种写法.保证了相对普遍浏览器样式的统一性.

 

引用内容 引用内容
 
CSS代码
  1. * {   
  2.  vertical-alignbaselinebaseline;   
  3.  font-weight: inherit;   
  4.  font-family: inherit;   
  5.  font-style: inherit;   
  6.  font-size: 100%;   
  7.  border: 0 none;   
  8.  outline: 0;   
  9.  padding: 0;   
  10.  margin: 0;   
  11.  }  

_________________________

Poor Man’s Reset
其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理.
也经常在某些站点看到

 

引用内容 引用内容
CSS代码
  1. html, body {   
  2.  padding: 0;   
  3.  margin: 0;   
  4.  }   
  5. html {   
  6.  font-size: 1em;   
  7.  }   
  8. body {   
  9.  font-size: 100%;   
  10.  }   
  11. a img, :link img, :visited img {   
  12.  border: 0;   
  13.  }   

_________________________

Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.
而且这类规则是针对的是某些重要的常用浏览器.
比如ie,firefox等

 

引用内容 引用内容
JavaScript代码
  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,    
  2. form, fieldset, input, p, blockquote, table, th, td, embed, object {   
  3.  padding: 0;   
  4.  margin: 0;    
  5.  }   
  6. table {   
  7.  border-collapse: collapse;   
  8.  border-spacing: 0;   
  9.  }   
  10. fieldset, img, abbr {   
  11.  border: 0;   
  12.  }   
  13. address, caption, cite, code, dfn, em,    
  14. h1, h2, h3, h4, h5, h6, strong, th, var {   
  15.  font-weight: normal;   
  16.  font-style: normal;   
  17.  }   
  18. ul {   
  19.  list-style: none;   
  20.  }   
  21. caption, th {   
  22.  text-align: left;   
  23.  }   
  24. h1, h2, h3, h4, h5, h6 {   
  25.  font-size: 1.0em;   
  26.  }   
  27. q:before, q:after {   
  28.  content: ;   
  29.  }   
  30. a, ins {   
  31.  text-decoration: none;   
  32.  }   

_________________________

Yahoo CSS Reset
yahoo这帮家伙写的Reset个人觉得可以推荐

 

引用内容 引用内容
CSS代码
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
  2.  padding: 0;   
  3.  margin: 0;   
  4.  }   
  5. table {   
  6.  border-collapsecollapse;   
  7.  border-spacing: 0;   
  8.  }   
  9. fieldset,img {    
  10.  border: 0;   
  11.  }   
  12. address,caption,cite,code,dfn,em,strong,th,var {   
  13.  font-weightnormal;   
  14.  font-stylenormal;   
  15.  }   
  16. ol,ul {   
  17.  list-stylenone;   
  18.  }   
  19. caption,th {   
  20.  text-alignleft;   
  21.  }   
  22. h1,h2,h3,h4,h5,h6 {   
  23.  font-weightnormal;   
  24.  font-size: 100%;   
  25.  }   
  26. q:before,q:after {   
  27.  content:;   
  28.  }   
  29. abbr,acronym { border: 0;   
  30.  }   

_________________________

Erik Meyer’s CSS Reset
作者将Erik Meyer的代码重新整理了.但功能上还是一样的
这套Css Reset是业内是使用最多的

 

引用内容 引用内容
CSS代码
  1. html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,    
  2. del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,    
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,    
  4. dl, dt, dd, ol, ul, li, fieldset, form, label, legend {   
  5.  vertical-alignbaselinebaseline;   
  6.  font-family: inherit;   
  7.  font-weight: inherit;   
  8.  font-style: inherit;   
  9.  font-size: 100%;   
  10.  outline: 0;   
  11.  padding: 0;   
  12.  margin: 0;   
  13.  border: 0;   
  14.  }   
  15. /* remember to define focus styles! */  
  16. :focus {   
  17.  outline: 0;   
  18.  }   
  19. body {   
  20.  backgroundwhite;   
  21.  line-height: 1;   
  22.  colorblack;   
  23.  }   
  24. ol, ul {   
  25.  list-stylenone;   
  26.  }   
  27. /* tables still need cellspacing=”0″ in the markup */  
  28. table {   
  29.  border-collapseseparate;   
  30.  border-spacing: 0;   
  31.  }   
  32. caption, th, td {   
  33.  font-weightnormal;   
  34.  text-alignleft;   
  35.  }   
  36. /* remove possible quote marks (“) from <q> & <blockquote> */  
  37. blockquote:before, blockquote:after, q:before, q:after {   
  38.  content: ”“;  
  39.  }  
  40. blockquote, q {  
  41.  quotes: ”“ ”“;   
  42.  }   

_________________________

Condensed Meyer Reset
总的来说这是对Erik Meyer的Css Reset的修改与提升.

 

引用内容 引用内容
CSS代码
  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,    
  2. pre, form, fieldset, input, textarea, p, blockquote, th, td {    
  3.  padding: 0;   
  4.  margin: 0;   
  5.  }   
  6. fieldset, img {    
  7.  border: 0;   
  8.  }   
  9. table {   
  10.  border-collapsecollapse;   
  11.  border-spacing: 0;   
  12.  }   
  13. ol, ul {   
  14.  list-stylenone;   
  15.  }   
  16. address, caption, cite, code, dfn, em, strong, th, var {   
  17.  font-weightnormal;   
  18.  font-stylenormal;   
  19.  }   
  20. caption, th {   
  21.  text-alignleft;   
  22.  }   
  23. h1, h2, h3, h4, h5, h6 {   
  24.  font-weightnormal;   
  25.  font-size: 100%;   
  26.  }   
  27. q:before, q:after {   
  28.  content;   
  29.  }   
  30. abbr, acronym {    
  31.  border: 0;   
  32.  }   

最后有份关于Css Reset的使用者调查
http://css-tricks.com/poll-results-what-css-reset-do-you-use/

分类:html+css

网页设计常用精美素材下载

时间:2009年03月26日作者:愚人码头查看次数:3,276 views评论次数:0

网页设计常用精美素材下载

分类:设计素材

谷歌推出Chrome浏览器

时间:2009年03月26日作者:愚人码头查看次数:1,744 views评论次数:0

呵呵,谷歌推出Chrome浏览器!这个世界真疯狂啊!

新浪科技讯 北京时间9月3日凌晨消息,谷歌今日凌晨面向全球100多个国家推出“Google Chrome”浏览器,目前,谷歌浏览器测试版支持43种语言,与用户对谷歌产品的期望相同,谷歌浏览器着重于操作便捷性和功能性。

  谷歌称,早期的互联网时代,网页通常与简单的文本页面类似,如今互联网已经逐渐发展成为一个强大的平台,用户不仅可以通过Email和其它网络应用与朋友、同事沟通合作,还可以编辑文档、观看视频、收听音乐、管理银行帐户等等。谷歌浏览器正是以现今的互联网为基础、为应对未来可能出现的众多网络应用而设计的。

  “我们认为浏览器是走进互联网的窗户——对于用户来讲,浏览器是用来与网站、网络应用互动的工具,延续这种使用体验非常重要。”谷歌全球产品副总裁,Sundar Pichai表示,“与经典的谷歌主页一样,谷歌浏览器简单的用户界面背后由领先的核心技术支持,用以支持用户浏览今天的网络。”

谷歌浏览器建立了一个更强大的JavaScript引擎V8,以便为下一代网络应用技术提供支持,这些网络应用在目前的浏览器上几乎不可能实现。

 

    官方下载地址:

    http://www.google.com/chrome 

 

—————————————————————————————————

  谷歌称,谷歌浏览器将为用户提供更好的网络体验,使用户更易搜索,以便尽快找到所需内容。

  在功能特性上,浏览器的地址栏整合了搜索功能,只需几次点击,用户便能尽快地查到所需信息;另外,当在谷歌浏览器中打开一个新的标签页时,用户将看到一些缩略图,其中包括以往经常浏览的网站,最新的搜索结果以及书签页,使用户能更容易的浏览网页。

  谷歌强调,谷歌浏览器的核心设计理念是一个为用户提供更强的稳定性和安全性的多进程处理的平台。每一个浏览器窗口的运行都是独立的进程,标签页是相对独立的,一旦某一个标签页不能正常运行或是关闭,其他标签页不会受到影响,用户可以继续进行操作而不必关掉整个谷歌浏览器。

  谷歌同时表示,Google Chrome是一款开源软件,将通过开源为浏览器创新做贡献。

  “我们将谷歌浏览器视为能彻底改变人们对浏览器认识的产品,而且我们意识到谷歌浏览器不可能仅仅通过自己的力量单独开发完成。”谷歌全球研发总监Linus Upson表示:“谷歌浏览器的研发架构于其他开源项目基础之上,这些项目为促进竞争和创新作出了重大贡献。”

  为了更一步促进网络的开放性,谷歌浏览器所有的代码全部开源,这个开源项目名为Chromium。谷歌希望能通过公开谷歌浏览器的基础架构,在提升谷歌浏览器的性能的同时,与整个业界合作从而促进互联网的健康发展。

  谷歌强调,Google Chrome尚处在测试版阶段,即将推出的版本也只适于Windows系统,但Mac和Linux版本将随即推出。

  以下为用于 Windows 的谷歌浏览器Google Chrome(测试版)下载链接。(文雄)

    新浪下载地址:

  Google Chrome(谷歌浏览器) 简体中文版 http://down1.tech.sina.com.cn/download/down_contents/1222531200/40975.shtml

 

  Google Chrome(谷歌浏览器) 英文http://down1.tech.sina.com.cn/download/down_contents/1222531200/40981.shtml

 

    Google Chrome的官方网站:

    gears.google.com/chrome/

  谷歌介绍Chrome的主要特性:

  一框多用

  在地址栏键入字词或网址即可获得有关搜索和网页的建议。

  常用网站的缩略图

  从任一新标签即刻访问用户最喜爱的网页。

  应用程序的快捷方式

  为用户最喜爱的网络应用程序创建桌面快捷方式。

  Google Chrome(谷歌浏览器) 繁体版(香港)http://down1.tech.sina.com.cn/download/down_contents/1222531200/40982.shtml

  Google Chrome(谷歌浏览器) 繁体版(台湾) http://down1.tech.sina.com.cn/download/down_contents/1222531200/40983.shtml

停止事件冒泡和阻止浏览器默认行为的脚本

时间:2009年03月26日作者:愚人码头查看次数:2,747 views评论次数:0

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

1..停止事件冒泡
 

 

JavaScript代码
  1. //如果提供了事件对象,则这是一个非IE浏览器   
  2. if ( e && e.stopPropagation )   
  3.   //因此它支持W3C的stopPropagation()方法   
  4.   e.stopPropagation();   
  5. else  
  6.   //否则,我们需要使用IE的方式来取消事件冒泡   
  7.   window.event.cancelBubble = true;   
  8. return false;   
  9.   

2.阻止浏览器的默认行为

 转载注明:http://www.css88.com/article.asp?id=497

JavaScript代码
  1. //如果提供了事件对象,则这是一个非IE浏览器   
  2. if ( e && e.preventDefault )   
  3.   //阻止默认浏览器动作(W3C)   
  4.   e.preventDefault();   
  5. else  
  6.   //IE中阻止函数器默认动作的方式   
  7.   window.event.returnValue = false;   
  8. return false;  
分类:JS

阿里巴巴前端CSS培训PPT文档【初级入门】

时间:2009年03月26日作者:愚人码头查看次数:3,021 views评论次数:0

阿里巴巴前端CSS培训PPT文档,这个属于初级入门级别的,高手请绕道。
(本文纯属转载:http://www.f-dev.com/388

点击下载此文件

分类:html+css

再来一个未知高度图文混合垂直居中(9demo发布)

时间:2009年03月26日作者:愚人码头查看次数:2,165 views评论次数:1

未知高度图文混合垂直居中,支持IE6+,FF,无css hack。
 

CSS Play上面看到的的一个效果,这里主要是IE的问题。IE可以用这个方法垂直居中,这是见识了。

 

XML/HTML代码
  1. <div class=“ver-center”>  
  2.     <span class=“edge”></span>  
  3.     <span class=“container”>  
  4.         <img src=“http://www.css88.com/attachments/month_0805/b2008526221238.jpg” alt=“” />  
  5.         <span class=“bli”>妈妈对我说,这个无论你加了多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少个字,他都是居中的,很棒哦~</span>  
  6.     </span>  
  7. </div>  

 

CSS代码
  1. body{ margin:0 ; padding:0; background-color:#333333color:#FEFEFEfont-size:12pxline-height:150%}   
  2. .ver{width740pxbackground#292928border1px solid #6c6c6cmargin30px auto;}   
  3. .ver-center { background#292928text-aligncenterdisplaytable-cellvertical-alignmiddleheight400pxwidth740px;}   
  4. .ver-center img { border2px #ffffff solidpadding:2px;}   
  5. .ver-center .bli{ width500pxtext-alignjustifymargin10px autodisplay:block}   
  6. .edge {width: 0; height: 100%; displayinline-blockvertical-alignmiddle;}    
  7. .container {text-aligncenterwidth: 100%; displayinline-blockvertical-alignmiddle;}  

 IE垂直居中主要是这两个样式:

CSS代码
  1. .edge {width: 0; height: 100%; displayinline-blockvertical-alignmiddle;}    
  2. .container {text-aligncenterwidth: 100%; displayinline-blockvertical-alignmiddle;}  

查看:http://www.9demo.com/article/7.htm

分类:html+css