Unicac's Blog
No pain, no gain! 只有经历,才感觉可贵,只有坚强,才能出众!
  • Home
  • 留言板
  • 友情链接
  • 关于unicac
  • Subscribe
Browse: Home / css

css

5个实用的CSS3实例(好文一篇)

5个实用的CSS3实例(好文一篇)

By unicac on 2010年06月6日

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际 用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。 这里有5个使用CSS3实现的常见效果,你可以马上动手试试看。 1. CSS3按钮 你可以创建一些大小、颜色不同的元素(如按钮),而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章,有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒! 2.CSS3柱形图 Ben Lister选列了很多实用的CSS3技巧,包括这个看起来相当不错 的3D柱形图。使用-webkit-transform或-moz-transform以及指定的偏移,你可以用CSS做出和图片一样令人印象深 刻的效果。 3. CSS3下拉菜单

Posted in WEB++技术 | Tagged css, CSS3, HTML5 | 1 Response

让footer永远在浏览器的底部

By unicac on 2010年04月12日

周五的时候,kedy同学问了这个问题: 怎么样让footer永远在浏览器的底部,也就是说,页面出现滚动条的时候,footer会自适应的出现在页面的最底部;当没滚动条时候,footer在浏览器的底部。 听到这里,第一反应就是用Javascript脚本实现。。。。后面想了想,用CSS也应该可以实现!

Posted in WEB++技术 | Tagged css | 1 Response

CSS裸奔节

By unicac on 2010年04月8日

今天我“裸奔”啦! 知道为什么网页没有想象中很炫的效果吗?因为今天是一年一度的“CSS裸奔节”。 想参与或了解更多,请点击http://naked.webrebuild.org/

Posted in WEB++技术 | Tagged css | 1 Response

浏览器前缀

By unicac on 2010年03月2日

浏览器前缀 Firefox:-moz-box-shadow Safari:-webkit-box-shadow Opera:-o-box-shadow IE:-ms-box-shadow

Posted in WEB++技术 | Tagged css, XHTML | 1 Response

《CSS那些事儿》—掌握网页样式与CSS布局核心技术 读后总结

By unicac on 2010年01月2日

《CSS那些事儿》前面的几章基本上已经看完了,写一些读书的总结,不过我文采实在太烂,总结得不好看不懂别见怪-_-! CSS类的书比JavaScript或者PHP编程之类的书相对来说,读起来要轻松得多,程序类的书你要循序渐进的读,如果你是一个初学者的话,前面没弄明白到后面你肯定一塌糊涂,而CSS类的书我觉得并不会这样。 废话太多了,我们入正题。 正如书前言所说的,书的重点在于实例讲解,我发现这些实例大家工作中经常碰到的。没有太多的文字来讲述概念性的东西,让人读起来很舒服(编程的书我看到两页就会打瞌睡),不必花太多心思去琢磨和记住那些名词,而是让大家把更多时间去理解和体会实例,让人能够融汇贯通。 第一章简明的讲解了CSS的作用、结构、注释方法以及一些常用CSS简写方法与CSS引入页面的方法,重点讲了CSS中的几大选择符的使用以及奇妙用法。第二章则主要介绍了一款写CSS和(X)HTML的工具editplus,Firefox浏览器的一款插件Firebug,熟悉这个插件,对做前端工作的朋友非常有好处,我经常用来调试CSS,还介绍一款截图软件FastStone Capture,作者很有心! 第三章的盒模型,盒模型的计算方法(margin+border+padding+内容宽)以及IE6浮动情况下双倍margin BUG,IE的怪异渲染模式!而盒模型的计算方法是重点! 第四章讲常见的布局方式,两列顶宽、两列自适应、单列定宽单列自适应、两列等高!第四章讲的是一般门户用的比较多三列的布局方式!两章主要讲解了布局的实现方法与技巧以及这些方法的利与弊(定位、浮动与负边距实现两列布局,背景模拟、负边距、边框模拟与JS实现两列等高,三列的布局方法是在两列布局的基础上扩展开来的,我觉得认真看了前面两列布局,再看第四章的三列布局更加能融会贯通,嘿嘿!),通过总结,采用最适合自己的方法来实现自己需要的布局方式。 先总结这么多,后面的章节没有认真看完,等认真看完再以后补上!毛主席教导我们:书读三遍才有发言权。 虽然只认真看了前面的四章,但是《CSS那些事儿》这本书绝对值得购买!

Posted in WEB++技术 | Tagged css, 读书 | 3 Responses

《CSS那些事儿》到了

By unicac on 2009年11月28日

这本书本来打算在卓越上买的,发货时间太恐怖,选择了百度有啊。签收的时候快递的说,本来今天早上书就到了,后面发错了,给到了另外一个人,后面他发现错了,去拿回来,才这么晚才送到我这里!包装很好! 《CSS那些事儿》-掌握网页样式与CSS布局核心技术 看了书的知识体系概览,总共分为五大篇: CSS入门篇 CSS页面布局篇 CSS页面元素篇 CSS应用篇 CSS实战篇 当然啦,每一篇又有更细的划分。。。。粗略的看了一下前言,第一感觉:真长;第二感觉:作者很用心。 书拿到手上了,接下来的日子,就是开始闭关看书了。。。。那是享受的过程!

Posted in WEB++技术 | Tagged css | 4 Responses

Table单元格强制换行与强制不换行

By unicac on 2009年11月23日

Table单元格数据自动换行或不换行的实现方法: 强制换行: <style type="text/css">.AutoNewline{word-break: break-all;/*必须*/}</style><table><tr><td class="AutoNewline">自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</td></tr></table> 强制不换行: <style type="text/css">.NoNewline{word-break: keep-all;/*必须*/}</style><table><tr><td class="NoNewline">不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</td></tr></table>

Posted in WEB++技术 | Tagged css | Leave a response

各浏览器的私有属性

By unicac on 2009年10月9日

css上的透明属性: CSS代码 filter:alpha(opacity=50);/* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity: 0.5;/* 支持CSS3的瀏覽器(FF 1.5也支持)*/ FireFox私有属性: CSS代码 -moz-opacity:0.5;(透明度) moz-border-radius: border-radius {1,4}(作圆角) Properties 屬性 CSS代码 moz-appearance: appearance value 直接定義外觀 (測試無結果..) CSS代码 -moz-binding: uri | none ; 鏈接XBL 跟HTC很像的東東.. CSS代码 -moz-background-clip:border | padding ; 背景是否包括 border, padding 不包括 ,對應CSS3 background-clip CSS代码 -moz-background-inline-policy: bounding-box | continuous | each-box [...]

Posted in WEB++技术 | Tagged css | Leave a response

全透视:CSS Z-index 属性

By unicac on 2009年09月18日

翻译:堂主 译文 非常好的一篇技术文档,翻译自Louis Lazaris 2009年9月15日发表的《The Z-Index CSS Property: A Comprehensive Look》,相信会帮助很多像我一样的前端狂! 原作者保留所有版权。如作者认为这篇翻译稿会引起您的任何不便,请发邮件给我,我会第一时间删除。 EN文不好,欢迎各路牛头斧正。 <———————————————- 分割线 ———————————————-> 大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上的混乱和(开发者心理上)的挫败感。但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解决很多layout方面的挑战提供强有力的帮助。 在这篇文章里,我们会准确的说明究竟什么是Z-index,它为什么会这么不为人所了解,并一起讨论一些关于它的实际使用中的问题。我们同时会描述 一些会遇到的浏览器间的差异,那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全透视文章将会为那些有着良好 基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。 这是什么? Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。 三维手法展现的Z轴 为了更清晰的描述Z-index是如何工作的,上面的这张图片夸大展示了层叠元素在视觉位置上的关系。

Posted in WEB++技术 | Tagged css | 2 Responses

CSS 3.0 参考手册 (中文版)

By unicac on 2009年08月24日

CSS 3.0 参考手册 (中文版) CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 手册难点 中文资料少,对英文翻译功底要求较高; 基础语法要求字斟句酌,避免产生歧义; 兼容性列表涉及浏览器及版本众多; 草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例。 备受期待的 CSS 3 新功能 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。 CSS 3.0 参考手册 (中文版) 预览:   下载: CSS 3.0 参考手册 (中文版) 下载 (366k) 来自ISD WEBTEAM  http://webteam.tencent.com/css3/

Posted in WEB++技术 | Tagged css | Leave a response

Next »

日志分类

  • JavaScript
  • WEB++技术
  • 生活、情感与见闻

Archives

  • 2010 年八月
  • 2010 年七月
  • 2010 年六月
  • 2010 年五月
  • 2010 年四月
  • 2010 年三月
  • 2010 年二月
  • 2010 年一月
  • 2009 年十二月
  • 2009 年十一月
  • 2009 年十月
  • 2009 年九月
  • 2009 年八月
  • 2009 年七月
  • 2009 年六月