在 html css 中样式化的大引号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27426045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Big Quotation marks styled in html css
提问by Reeze Cornelius
How would I style a quote with those huge quotation marks?
我将如何用那些巨大的引号来设计报价？
I have tried most of the examples shown online. Using Block quote with the :before and :after css styles. The issue I'm having is avoiding the use of a image in div's wrapped around text, because of responsiveness. I'm also using the Twitter Bootstrap framework.
我已经尝试了在线显示的大多数示例。将块引用与 :before 和 :after css 样式一起使用。由于响应性，我遇到的问题是避免在环绕文本的 div 中使用图像。我也在使用 Twitter Bootstrap 框架。
The Quote in html:
html中的报价：
<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>
And the css:
和CSS：
blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
}
blockquote h3 {
font-size:21px;
}
blockquote h3:before {
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}
blockquote h3:after {
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}
The problem is getting to look like this example.Although the responsiveness does sort of work. The Quotation marks are not positioned diagonally from one another
问题是看起来像这个例子。尽管响应性确实起作用了。引号不是彼此对角定位的
回答by Kuba Rakoczy
Although it's not clear after reading your question I guess you want to change the shape of quotation marks.
虽然阅读您的问题后不清楚，但我猜您想更改引号的形状。
Pick a proper unicode valueand add a quotesproperty. E.g.
选择一个合适的unicode 值并添加一个quotes属性。例如
blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
quotes: "1C""1D""18""19";
}
blockquote h3 {
font-size:21px;
}
blockquote h3:before {
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}
blockquote h3:after {
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>You may also want to change the font-familyso the shape of quotation marks is more suitable to your desires.
您可能还想更改font-family引号的形状，以便更适合您的需要。
Here is jsfiddle.
这是jsfiddle。
回答by Jan Drewniak
The Quotation marks are not positioned diagonally from one another
引号不是彼此对角定位的
So just position them:
所以只需定位它们：
blockquote{
position: relative;
}
blockquote h3:before {
position: absolute;
top: 0;
left: 0;
}
blockquote h3:after{
bottom: 0;
right: 0;
}
Or like in this demo: http://jsfiddle.net/pz6kx0bw/
或者像在这个演示中：http: //jsfiddle.net/pz6kx0bw/
