你是否已经对现在的柱形和框框布局感到厌烦? 是时候学一下如何冲出盒子的束缚, 做一些有创造性的东西出来了. 以前, 我收集了一些几乎xx的设计都是盒式的. 这次我将会提供一些带演示文件速成的 CSS 技巧, 让大家知道如何突破框框设计, 发挥创意, 使用图片和 CSS 位置属性.

英文原文:

案例 1: Huge Inc

真正迷住我的是 网站的顶部设计. 注意看这是如何将页面元素扩展到框框之外的.

案例 2: Jason Santa Maria

从 在他网站上放置的作品数量和页面细节来看, 毫无疑问地他是网站设计领域{zh0}的设计师之一. 点击进入文章, 你会发现几乎所有的文章页面都是{dywe}的, 它们拥有与众不同的式样表. 一些视觉图像在栏栅和框框之内, 有些在其之外.

案例 3: A Brief Message

和 Jason Santa Maria 相似, 上的所有文章都拥有独特的图片和 CSS 样式表. 不想其他传统的博客, 网站正文被xx的放置, 文字环绕着图片 (就像在阅读出版物一样).

案例 4: Trent Walton

专注于网站顶部的设计, 所有文章里都显示不一样的背景和标题排版.

案例 5: Wonderbra Ultimate Strapless

虽然可以在 网站是一个令人喜爱的设计. 它的内容和图片恰当地放置在一起. 咋一看以为是 Flash 网站. 然后我查看页面代码才发现它是用 CSS 和 JavaScript 来实现的. (感谢 楼朋友的更正)

案例 6: Fox

网站打破了边框布局, 使用展开的背景图片将顶部和底部连接在一起. 而且框框之间的倾斜切入的分割看起来很有意思. 请不要忘记也去看一下其他的 Fox TV 秀网站.

案例 7: Mezzoblue

将图片延伸至网格之外. 这种效果可以通过使用负值的 margin-left 属性轻易地获得.

速成 CSS 教程

使用 CSS {jd1}位置 ()
下面的教程将使用 position 属性模仿 Huge 网站. 使用 position:absolute 来放置每一个元素. 然后为 logo, 导航和内容部分较高层次的 z-index 属性 (这样它们就可以显示在图片上方).

使用背景图片 ()
在本例中, logo 和正文将被嵌入图片里面. 为使 logo 的文字可以被点, 首先得为 H1 标签定义{jd1}位置, 然后用文本缩进的方法将 H1 a 的文字隐藏起来 (这里也可以看一下 ).

使用{jd1}位置将 Click Here 按钮放置于xx的位置. 为之定义背景图片并使用文本缩进将文字隐藏起来. 当鼠标移动到按钮上方则切换一个背景图片.

使用 margin-left 属性 ()
这个技巧极其简单. 只是定义一个为负值的 margin-left 属性并使用 float:left.

译者的话

以上案例中, 案例 7 的 Mezzoblue 是我最喜欢的一个. 美观是美观, 实用始终{dy}, 制作网页的时候使用大量图片会带来一定的副作用, 如产生大量流量费用, 打开图片耗时等等, 所以在仿效以上案例时应懂得取舍.

制作网页时, 在可选的情况下不建议使用 position 属性, 大量的使用 position 属性会令网页难以维护.

可能有人会问, 如果做成这样的效果, 为什么不干脆做成 Flash 网站呢? 因为 Flash 的封闭性, 令搜索引擎不能抓取信息, 用户也不能对其使用浏览器的页面文字搜索, 无论是 SEO 还是 UED 优化都不是好的选择. 所以, 请尽量使用文字和图片, 而非 Flash.