css给你灵感-排出漂亮的版面

午梅2008-06-03 23:08:01

这是css排版成的漂亮的杂志效果，Freeren希望它能给你带来一些灵感。

图片的透明边框

你看到的图片周围有个透明的边，这不是PS做出的效果，确实是个border，只是给这个border设定了白色50%透明度。在IE，Firefox和Opera都是可显示的。

图片上的半透明背景的文字

这是一个申请50%透明度的段落。

半透明图片上的全透明区块的文字

这是一个没有申请透明度的div。

为图片加上相框

图文混排，带边框的图片左浮动

We can create a class named thinborderfloat that will automatically put a thin border around our image and float it to the left. We used a long name thinborderleft, but you can name it anything you want.

带相框的图片和文字混排

Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

象报刊杂志一样的文字排版方式

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(18) but if the water repelled him and he floated, he was condemned. In the ordeal of hot iron, the accused walked barehanded with a hot iron bar. Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned.

Three days later, when her bandages were removed, her healing hands revealed her fate: if the wounds were healing cleanly, she was absolved; if corruptly, condemned... But in 1215 the Church forbade priests to officiate at ordeals and suddenly stripped these rituals of their divine imprimatur.

Paragraph 2: This is the right side text. The width is 45 percent which will make the page fluid but I'm not minding all of the rules here. Just typing in what I think might work. The graceful way to do this is not clear. This demonstrates only that it can be done in our browser.

The use of a shim or a spacer.gif is considebeige a cheat by some but for this one to make sense to most people the invisible image is useful. It allows us to make the left column and the right column a fixed size. Best of all, it works. There are a number of considerations for this code. The first line of paragraphs are indented. The padding is adjusted for this font size.

I. THE ORDEAL AND THE JURY TRIAL: THEORETICAL PRELUDE

This is just text typed in to demonstrate code. The source is of unknown origin, just text copied and pasted to fill a side of the page to a width that will properly demonstrate the technique.

(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him;

Although the jury's origins lie hidden in Dark Ages rituals, we can trace the origins of the sort of jury that concerns us here--the criminal trial jury--with something like pinpoint accuracy: The first true criminal jury trial seems to have taken place at Westminster in 1220.(16) Juries had long acted to resolve various civil disputes, especially claims about land, and they had for decades served as accusing bodies in criminal cases in the manner of modem grand juries. But not before 1220 did a jury sit in judgment of a criminal accused with the discretion either to acquit or to condemn.

The occasion of this sudden birth of trial by jury was the sudden death of trial by ordeal.(17) Before 1215, criminal trials had proceeded by ordeal or by battle. In the ordeal of cold water, the accused was tossed in a pool with a rope tied around his hips. If he sank, he was hauled out an innocent person, for the purity of the water had accepted him...

You will not see this line but it is needed. Take it out to see the background color beige disappear from the center. Surely there is a better way. Thinkity, thinkity

方框中居中的图片

COKE

文本块背景的表现

This is the content area where we can put text or images. The padding of 10px around all four sides allows space between this text and the black border.

带说明的图片

Your Text Goes Here

上一篇：css给你灵感-排出杂志的效果
下一篇：css给你灵感-象壁画一样的图片展示

发表看法1

>> more 看看其他人的看法
来而不顶非礼也！
1 梧栖凤 2009-9-8 19:36 Tuesday
}

css给你灵感-排出漂亮的版面

有什么想说的吗？