记忆也需回忆

存档

‘Css’ 分类的存档

你需要了解的21个CSS惊人技巧

从彬Go 作者：暴风彬彬

级联样式表(CSS)在当代Web设计中已经成为重要的环节，如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及，越来越多的高质量CSS教程涌入互联网，让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧，相信其中必有你想不到的。还等什么，继续往下看吧！

8.CSS目录菜单设计

点击上图查看清晰原图
很容易理解的关于使用CSS border属性或CSS背景图属性实现目录菜单的教程。

10.使用CSS固定你的页脚

点击上图查看清晰原图
你也许会遇到这种情况:当你为每个页面设置相同的页脚后，有些页面的主题内容量很少，使得页脚自动向上移动，看上去的浏览器下面很空。这个教程将教你如何使用CSS固定页脚在页面底部来解决这个头疼的问题。

留意更新

订阅彬Go以查看CSS最新教程及资源。

英文原文:21 Amazing CSS Techniques You Should Know
翻译原文:你需要了解的21个CSS惊人技巧(彬Go)

分类: Css 标签:

如何用 CSS 将超出显示宽度的内容隐藏起来

2009年4月30日风吹过的沙没有评论

关键字: css 超出宽度隐藏

一般的文字截断（适用于内联与块）：

.text-overflow {
display:block;/*内联对象需加*/
width:31em;/*指定宽度*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* IE 专有属性，当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义：
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/
}

需要注意的是，这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。这个写法只有IE会有“…”，其它的浏览器文本超出指定宽度时会隐藏。

分类: Css, 网站建设标签: Css, 隐藏

精选15个国外CSS框架

2009年3月27日风吹过的沙没有评论

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

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

您还可以参考以下前端开发/CSS相关资源:

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

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

2.WYMstyle CSS Framework
CSS-框架-WYMstyle

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

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