Web排版中有很多示例，其中引号完全适合您的布局。 当您需要表达对话或重复引用其他来源的报价时，这是一种完美HTML样式。 但奇怪的是，网上没有太多专业示例可供您寻找灵感。
我想在今天的帖子中专门介绍如何创建时尚的blockquotes和pull quotes 。
作为网页设计师， 您必须将网页内容视为出售域名的关键因素 。 为您的博客文章和页面创建时尚外观将使读者迷上更长的时间。 这些引用样式之间存在一些差异，我们应该仔细检查它们 ，以充分理解这些现代设计趋势。
不需要非常了解HTML5或CSS3 ，但是具有Web设计的一些背景知识会使此过程变得容易得多。 并随意在您自己的布局中模拟许多这些样式！
深入语义学
在研究CSS样式之前，我们应该首先研究一下blockquotes和pull quote之间的区别。 您可以在标记中使用一小组不同的标记来表示这些页面元素。
块引用
使用HTML5 blockquote标签时，它应代表完整的文本块–一个段落或可能的几个段落。 这些通常跨越文本的整个宽度，并且看起来会比正常情况大得多。 块引用包含来自任何外部参考 （最常见的是其他网站或博客文章）的引用文本 。 但是您可以引用印刷媒体甚至电影或电视节目等数字媒体中的文字。
拉引号
拉引号在内容部分之间的页面一侧对齐。 HTML5中没有特定的pullquote标记，因此语义并不完全是形式上的 。 但是，拉引号最典型的用法是复制文档中某处已经找到的文本。 这有助于强调重要的短语并打破典型的页面流 。
新HTML5引用规则
在所有以前HTML标准中，blockquote元素是一个根元素，仅包含语义标记标签。 这些可以是<p> ， <ul> ， <div>或其他块线元素。 这通常意味着块引用只能用于较大的文本引用。
但是，新的HTML5 blockquote规范明确指出“不必在blockquote元素内使用p个元素” 。 这使构建HTML非常容易，因为我们不需要依赖更旧，更令人困惑的编码标准 。 只需将您的文本放入<blockquote>标记，就可以了。
另一个典型的添加是块引用上的cite属性。 您可以设置一个唯一的URL值 ，其中包含您要引用的文本。 这不是添加到您的代码中的不错选择，但是有些替代方法可能更易于使用。
例如，您可以在blockquote的正下方添加一些文本，然后链接到文本中的文章。 在这种情况下，您的读者也有机会将报价追溯到其原始来源 。
内联报价
拉引号可以被视为内嵌引号，因为它们通常浮动在页面内容的左侧或右侧。 文章使用这些内联拉引号（或提升引号） 显示文章中的相关内容 。
较小的HTML5 <q>标记可用于包装这些拉引号，尽管此元素通常用于段落内的引号。 我很少见过Web开发人员使用<q>标记，因为它在标记中非常笨拙 。
老实说，我建议为您的拉引号设置自定义样式 ，并将其包装在div，span甚至blockquote元素中 。
我上面的示例说明了一个非常简单的拉引号。 我们可以在任何典型的blockquote元素上设置.pull类的样式，然后将其浮动到右侧。 您可以使用引号和斜体文字进一步修饰样式。
样式完整CSS Blockquotes
让我们看一下我使用CSS属性创建的一些基本示例。 块引用非常有趣，因为可以遵循许多独特的样式。 由于可以将文本混合到主页内容中，因此典型的内联引号有些微妙。
上面的示例使用默认的块样式引号，并在顶部带有署名。 您可以放置一个字符引用或Web链接以连接到您引用的文本。 我添加了文本阴影效果以增强查看效果。
这种blockquote样式与典型的默认属性有很大不同。 您可以自由复制我的代码并编辑样式以适合您的需要。 如果您认为看起来更好，可以将来源属性移到引号下方。 流动性是创建可行的报价的重要方面，在监视器上看起来也不错。
使用BG图片报价
块引用的另一种流行趋势是添加您自己CSS背景图像作为引号。 由于您无法预测这些引号的高度，因此通常会创建两个不同的图像，并将其中一个引号上下颠倒旋转。
在我的示例中，我们使用另一个带有特殊类.bq3 blockquote。 我正在使用一个包含用引号引起来的全文的段落元素，以便我们的底部引号将垂直扩展。
前提是在左上角的blockquote元素上使用非重复的背景图像。 然后在内部段落元素上，在右下角添加另一个非重复的背景图像。 加上一些额外的填充，我们可以为任何页面布局设计一个非常漂亮的blockquote样式！
引人注目的引语
对于我的最后一部分代码，我们可以创建一组全新的彩色内联拉引号。 这个内部的blockquote元素浮动在左侧，并且我创建了一个与段落文本形成对比的深色方框配色方案。 当您浏览页面内容时，这将脱颖而出。
理想情况下，您可以按照布局使用任何匹配的配色方案。 拉引号的独特之处在于它们可以放在页面副本的任何位置，并且看起来仍然非常优雅 。 但是，当您添加带有圆角的这些额外的背景效果时，您会发现访问者更喜欢阅读而不是浏览文章。
您可以根据自己的设计创建非常相似的内容，甚至可以添加背景图像。 可能性是无限的，因此在采取任何第一步之前都需要仔细考虑。 但是，以这些CSS示例为起点，并继续进行编码并编写自己的代码！
进一步阅读
陈列室画廊
在不炫耀网络人才的情况下，哪篇文章是完整的？ 在以下画廊中，我整理了40多个网站布局中的引号和引号示例 。
来自世界各地的设计师将发现很多灵感可以运用。 但是，如果您对我们可能错过的样式有任何疑问或建议，请随时在下面的帖子讨论区中发表评论。
翻译自: https://www.hongkiat.com/blog/stylish-blockquotes-pullquotes/
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
