我们知道使用css当中的text-align:justify就可以实现两端对齐了。比如下面这
<div style="text-align: justify; width: 300px">In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king's castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king's child went out to the forest and sat down by the fountain; and when she was bored she took a golden ball, and threw it up on high and caught it; and this ball was her favorite plaything.</div>
In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out to the forest and sat down by the fountain; and when she was bored she took a golden ball, and threw it up on high and caught it; and this ball was her favorite plaything.
我们知道，这种排版很类似Office Word的排版方式。如果有类似TEX的排版，对于这些非等宽字体，就会更好看了。Bram Stein就为我们用javascript实现了这样的功能。
比较我们可以发现，使用javascript的话，排版会更紧凑。其实它更强大之处还在于图文混排。当然那需要更强的图层控制能力。
[......]
上次介绍的荧光按钮其实是其于这一次的代码基础上加上了背景特效而已。那么一个漂亮的CSS3按钮应该如何实现呢？
其实很简单。首先确定按钮风格。CSS3的色彩模式为RGBA，RGB大家都很熟悉，A呢其实就是透明度。看代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .button, .button:visited { background: #222 url(overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer } |
然后确定按钮的大小。分成small, medium 和 large。
44d9fc2e0[......]
近期评论