[CSS]简单实现双引号[翻译]

这几天出去打工了。韩国人干活确实卖力，10个小时干下来，回来后没有别的想法，直接洗洗睡了
韩国人的中秋节过得真开心，学校太荒凉了，餐厅不供饭，宿舍不供热水，苦了我们了。。。太不仗义了。。。

明天有课，要汇报，所以不能去打工了，大好时光不能就这么过去了，翻译篇文章吧
一个实现双引号的比较简单的方法
对 blockquote 应用右引号的背景图片，然后对 blockquote 的 first-letter 应用左引号的图背景片。。。

1.html
<br /> <blockquote>Hello, I am a double quote…</blockquote><br />

2.指定blockquote样式
<br /> blockquote {<br />   font: 1.2em/1.6em Georgia, ”Times New Roman”, Times, serif;  //字体<br />   width: 400px;  //宽度<br />   background: url(images/close-quote.gif) no-repeat right bottom; //右引号图片<br />   padding-left: 18px;<br />   text-indent: -18px;<br /> }<br />

上面的css代码会在右下角显示右引号图片。padding-left 和 text-indent 会产生一个1 8px 的悬空缩进(hanging indent ?)。
效果如下图


[译者注]padding-left:18px 会产生 18px 的左侧内空白， text-indent:-18px 使文字向左侧缩进 18px，也就是抵消了 padding-left:18px 产生的空白。但从结果来看只是首行文字抵消了，其他行文字仍然存在 18px 的左侧内空白。[/译者注]

3.指定 blockquote first-letter 样式
现在给 blockquote first-letter 设置 18px 的左侧内空白，这样就可以使文字排列整齐。然后在左上角显示左引号图片。注意，为了好看，这里使用的不同的字体。
<br /> blockquote:first-letter {<br />   background: url(images/open-quote.gif) no-repeat left top;<br />   padding-left: 18px;<br />   font: italic 1.4em Georgia, ”Times New Roman”, Times, serif;<br /> }<br />

4.最终效果