在Photoshop中设计布局的时候,并不喜欢把段落左边都缩进的样子。
但是,CSS并不提供多行的缩进。因此就利用另外的标签来解决这个的问题。做起来很简单,很多人已经这么
用了。
HTML代码:
复制代码 代码示例:
<blockquote><span></span>Metus sit morbi fames eget, quam, orci, eget ultri cies ac wisi
est. tincidunt vitae, quis, tincidunt Quisque placerat libero senectus mi egestas. egestas pharetra.
ipsum
ante. volutpat. wisi. Mauris tristique sapien dapibus, id neque.</blockquote>
唯一的另外添加的标签是<span>
CSS代码:
复制代码 代码示例:
blockquote {
background: #f6e8e1 url(/images/bg_blockquote.gif) no-repeat 17px 18px;
padding: 12px 15px 10px 15px;
width: 329px;
border: solid 1px #dcdcdc;
}
lockquote span {
display: block;
float: left;
width: 58px;
height: 40px;
}
首先,给<blockquote>元素设置了背景颜色,背景图片,边框和宽度,设置成你想要的样式。
第二段CSS是给<span>设置的样式。首先把它设置成块级元素(默认的是行内元素)。然后设置左浮动,类似于给段落设置图片环绕。接着设置的宽度和高度是根据背景图片来定的,这样看起来就是双引号引起的缩进。实际可以把双引号作为<span>的背景图片,当然,作为<blockquote>的背景图片也是一样的。
上面讲的是最基本的原理,如果在页面中有许多地方要实现这种效果,可以使用javascript来实现。