10

我将如何用那些巨大的引号来设计引用？

我已经尝试了大多数在线显示的示例。将块引用与 :before 和 :after css 样式一起使用。由于响应性，我遇到的问题是避免在 div 中使用环绕文本的图像。我也在使用 Twitter Bootstrap 框架。

html中的报价：

<div class="container">
    <blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

和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;
}

我试图达到的最终结果

问题看起来像这个例子。尽管响应能力确实起作用。引号不是彼此对角放置

4

2 回答 2

15

尽管阅读您的问题后不清楚，但我想您想更改引号的形状。

选择一个适当的unicode 值并添加一个quotes属性。例如

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

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>

您可能还想更改font-family引号的形状，使其更适合您的需求。

这是jsfiddle。

于 2014-12-11T15:51:09.040 回答
7

引号不是彼此对角放置

所以只需定位它们：

blockquote{
    position: relative; 
}

blockquote h3:before {
    position: absolute; 
    top: 0;
    left: 0; 
}

blockquote h3:after{
    bottom: 0; 
    right: 0; 
}

或者像在这个演示中一样：http: //jsfiddle.net/pz6kx0bw/

于 2014-12-11T16:16:11.477 回答