Bootstrap HTML CSS中的大引号样式

bogh5gae 于 5个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(51)

我该如何使用这些巨大的引号来设计引用的样式？
我已经尝试了网上展示的大多数例子。使用Block引号和：before和：after css样式。我遇到的问题是避免在div的文本周围使用图像，因为响应性。我还使用Twitter Bootstrap框架。
这是CSS和HTML中的引用

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

个字符

的数据
问题是看起来像这个例子，尽管响应性确实起了一定的作用。引号不是彼此对角放置的。

twitter-bootstrap

来源：https://stackoverflow.com/questions/27426045/big-quotation-marks-styled-in-html-css

2条答案

按热度按时间

z4bn682m1#

虽然在阅读你的问题后，我不太清楚，但我猜你想改变引号的形状。
选择一个合适的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;
  
}

个字符
您可能还想更改font-family，以便引号的形状更适合您的需要。
这里是jsfiddle。

赞(0）回复(0）举报 5个月前

kxkpmulp2#

引号不是彼此对角放置的
所以只要把它们定位：

blockquote{
    position: relative; 
}

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

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

字符串
或者像这个演示：http://jsfiddle.net/pz6kx0bw/

赞(0）回复(0）举报 5个月前

我来回答

Bootstrap HTML CSS中的大引号样式

2条答案

相关问题

热门标签

最新问答