大引号

几年前,我使用标签在我的网站上创建报价(带有大引号)。

几年前,我使用标签在我的网站上创建报价(带有大引号)。

现在我想做同样的事情,但它不再起作用了,我得到的唯一东西是小的“”,而不是大的。

我怎么把旧的,大的拿回来?

谢谢

76

我相信你正在寻找这样的东西:

Blockquote example

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}
blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}
blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
blockquote cite:before {
    content: "\2014 \2009";
}

将代码插入到 aJSFiddle for you to play with中。

找到了一个关于它的教程:http://www.web-source.com/2012/04/24/pure-css-blockquote-styling/

29

这是一个纯 CSS 解决方案,在右下角添加了一个大的开头报价和大的结尾报价:

blockquote {
    font-family: Georgia, serif;
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}
<div>
    <blockquote>
        It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat.
    <footer>
        <cite>
            Teddy Roosevelt
        </cite>
    </footer>
    </blockquote>
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(144)
如何从批处理文件创建空文本文件 (create windows batch file)
上一篇
如何将inset应用于tailwindcss中的框阴影
下一篇

相关推荐

  • vscode code命令:# 如何使用 VSCode 命令

    VSCode Code命令是Visual Studio Code的一个内置命令,用于在本地和远程服务器上执行代码。它可以让你在不同的系统上运行代码,而不需要安装任何软件。…

    2023-01-22 09:55:35
    0 90 50
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-01-30 08:19:31
    0 85 58
  • cv树洞柒夜事件CV树洞中的秘密与惊奇

    cv树洞柒夜事件是一个有趣的计算机视觉活动,它提供了一种新的方式来利用计算机视觉技术来探索和发现景观。它始于2020年7月,由一群热爱计算机视觉的研究者和开发者发起,他们希望通过使用机器学习技术来探索景观中的精彩之处。cv树洞柒夜事件的目标是使用机器学习技术来探索景观中的精彩之处,并利用这些发现来改善景观设计。参与者需要使用机器学习技术来探索景观,并利用这些发现来改善景观设计。参与者可以使用Python,OpenCV,TensorFlow等技术来完成任务,并将其发布在GitHub上。…

    2023-01-08 12:49:50
    0 19 24
  • cv小随:如何利用CV技术提升求职成功率

    示例示例cv小随是一种基于计算机视觉的智能技术,它可以帮助用户自动识别图像中的物体、场景和行为,从而实现自动化的图像处理。cv小随可以用于多种应用场景,如图像搜索、图像分类、图像识别、图像检测等。…

    2023-01-01 11:12:42
    0 91 55
  • win10可以安装cad2007吗:CAD2007是否可以在Win10上安装?

    不可以,因为CAD2007不支持Windows 10系统。如果想要安装CAD2007,需要安装在Windows XP或者Windows 7系统上。…

    2023-01-20 02:04:42
    0 99 82
  • iban code是什么意思一种国际银行帐户号码标准

    IBAN(International Bank Account Number)代码是一种国际标准的银行账户号码,用于在不同国家之间进行国际转账。它由一串字母和数字组成,通常由2至4个字母开头,后面跟着一串数字。…

    2022-12-30 09:24:47
    0 55 59
  • cv 机器视觉:如何利用机器视觉技术提高图像处理效率

    CV(Computer Vision)机器视觉是一门研究计算机如何理解和处理图像的学科,它旨在使计算机能够以人类般的方式识别和理解图像。它主要应用于图像处理、图像分析、计算机视觉等领域,广泛应用于机器人、自动驾驶、医疗影像分析等领域。…

    2023-01-23 11:32:51
    0 97 98
  • mac 开发c++:Mac 下开发 C++ 的入门指南

    示例示例Mac OS X 是一个强大的操作系统,可以用来开发 C++ 应用程序。下面是一个简单的 C++ 程序的代码示例:#include…

    2023-01-02 10:39:58
    0 96 62

发表评论

登录 后才能评论

评论列表(35条)