Category Archives: HTML & CSS

jQuery打造个性有序列表

Posted on 2009年02月11日 by Bell

当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决,但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表. 先来看Demo 实现起来也很简单,看看第一个例子,首先是载入javascript代码 <script type=“text/javascript” src=“js/jquery-1.3.js”></script> <script type=“text/javascript”> $(document).ready(function(){ $(“#step li”).each(function (i) { i = i+1; $(this).addClass(“item”+i); }); </script>

Posted in HTML & CSS, jQuery1 views | 4 Comments

5个CSS3实用特性

Posted on 2009年01月5日 by Bell

虽然CSS3还没有普及,但其具有的新特新却是每个设计师梦寐以求的,下面我们就来看看5个非常实用的CSS3特性: 1.圆角矩形 目前我们想制作圆角矩形只能通过图片的方式来实现,但在CSS3中只需要一二句代码就OK了: .round{ -moz-border-radius:10px; -webkit-border-radius:10px; } border-radius:10px;就是圆角的半径为10px,数值越大,弧度越大. 从代码就很明显的看出IE不支持这个…-moz 对应火狐,-webkit 对应safari和chrome.

Posted in HTML & CSS1 views | Tagged , | Leave a comment

HTML5 令人期待的五项功能

Posted on 2008年12月31日 by Bell

  HTML 5 是超文本置标语言下一个重要版本，HTML 自1999年发布 HTML 4.01 以来，其开发一直处于停顿状态，而1999年至今正好是 Web 飞速发展的时间，现在的 HTML 版本已经无法适应现在的 Web 内容与应用。HTML 5 旨在提高 HTML 的交互行，支持当前多样的，复杂的 Web 内容。同时，它也会解决 HTML 4 Web 应用功能上的欠缺。 HTML 5 的历史背景   HTML 5 的讨论开始于2003年，当时，W3C 对由 Web Hypertext Application Technology Working Group (WHATWG) 开发的 HTML 5 … Continue reading →

Posted in HTML & CSS1 views | Tagged | Leave a comment

background-clip 与 background-origin 的一则运用[转]

Posted on 2008年12月19日 by Bell

background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。 语法为： background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding | content] [, [border | padding | content]]* … Continue reading →

Posted in HTML & CSS1 views | Tagged | Leave a comment

Google Chrome谷歌浏览器的CSS hack

Posted on 2008年12月18日 by Bell

Google于9月3号推出了浏览器Google Chrome，写前端效果的同志们又有得辛苦了，IE/FF/Opera/Safari/Google Chrome本来不太平的世界更混乱了。 　所幸Google Chrome用的是与Safari一样的Webkit引擎，我们可以使用对safari相似的方式作css hack，写法为： @media screen and (-webkit-min-device-pixel-ratio:0) { .selector{/* 针对Google Chrome、Safari 3.0 的CSS样式 */} } 　　另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。 　　此css hack无效 p.callout { color:#FF0000; font-weight:normal; } p.callout { color:#000000; font-weight:bold;# } 附：各种常见浏览器使用的内核 (Rendering Engine) Mozilla Firefox ( Gecko ) … Continue reading →

Posted in HTML & CSS1 views | Tagged | Leave a comment
Pages: Prev 1 2 3 4 5 6 7 8 Next