七片枫叶 | 8345℃ | 2018-02-21
浏览器支持
Internet Explorer、Firefox、Opera、Google Chrome、Safari,所有主流浏览器都支持 <blockquote> 标签。
标签定义及使用说明
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。
提示和注释
提示:如果标记是不需要段落分隔的短引用,请使用 <q>。
HTML 4.01 与 HTML5之间的差异
在 HTML 4.01 中,<blockquote> 标签定义一段长引用。在 HTML5 中,<blockquote> 标签定义摘自另一个源的块引用。
HTML 与 XHTML 之间的差异
注释:如需把页面作为 XHTML 进行验证,那么 <blockquote> 元素必须包含块级元素,如:
<blockquote> <p>这是一个引用,这是一个引用。</p> </blockquote>
几种常用CSS式样
1、使用CSS3更改和美化双引号样式一
效果图:
CSS代码:
@import url(https://fonts.googleapis.com/css?family=Open+Sans); blockquote { color:#888; background-color: #eae6f3; border-left: 1em solid #5236a0; padding: 1em 1.5em 1em 1.5em; position: relative; font-family: 'Open Sans', sans-serif; line-height: 150%; text-indent: 35px; } blockquote:before { color: #392570; content: "\201C"; font-size: 5em; position:absolute; left:-15px; top: 35px; line-height: 0.1em; } blockquote:after { color: #392570; content: "\201D"; font-size: 5em; position:absolute; right:15px; bottom: 0em; line-height: 0.1em; }
2、使用图片更改和美化双引号样式二
效果图:
CSS代码:
blockquote { font: 14px/20px italic Times, serif; color:#888; padding: 18px; background-color: #dddddd; border-left: 15px solid #666666; margin: 5px; background-image: url(images/quote_open.png);/*图片地址*/ background-position: 15px 10px; background-repeat: no-repeat; text-indent: 23px; } blockquote span { display: block; background-image: url(images/quote_close.png);/*图片地址*/ background-repeat: no-repeat; background-position: bottom right; }
图片自己可以制作或网上找找式样好看的。
3、使用CSS3更改和美化双引号样式三
效果图:
CSS代码:
blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*字体*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*边框 - (选项)*/ border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; /*盒子阴影 - (选项)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } blockquote::before{ content: "\201C"; /*左双引号的Unicode编码*/ /*字体*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*位置*/ position: absolute; left: 10px; top:5px; } blockquote::after{ content: ""; /*如果要显示右双引号,则写 content: "\201D"; */ }
4、使用CSS3更改和美化双引号样式四
效果图:
CSS代码:
blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; }
5、使用CSS3更改和美化双引号样式五
效果图:
CSS代码:
blockquote { background-color: #eae6f3; border-left: 1em solid #5236a0; margin: 1.0em 0 1.0em; padding: 1em 1em 1em 1em; position: relative; color: #888; } blockquote:before { color: #392570; content: "\201C"; font-size: 5em; line-height: 0em; margin-right: 0em; vertical-align: -0.4em; } blockquote:after { color: #392570; content: "\201D"; font-size: 5em; position:absolute; right:3px; bottom: 0em; line-height: 0.1em; }
所有代码都可以根据自己喜好,进行修改!
发现好多CMS、博客系统都有这个问题,搞怪了。。导航显示二级栏目:{pc:conte...
5901
验证码很烦,,所以就想取消掉。方法如下:取消后台登陆验证码:打开\phpcms\mo...
5708
浏览文章时用小键盘“← →”翻页,不想写废话了,具体方法如下:新建个JS代码如下:(...
4776
首页调用最新文章:{pc:get sql="SELECT&nbs...
5104
phpcms v9 utf-8版,在使用论坛中的点击图片翻页时出现错误。通过反复试验...
4885
现WINDOWS系统越来越没有节操了,为了赚钱会偷偷搞点小动作,WIN10每次更新后,开机会自动打开浏览器,访问MSN网站,对很多人来说,这是一个不礼貌的行为。那么我们怎么关闭WIN10系统中这个不礼貌的行为呢?解决方法如下:1、快捷键:W...
11309
(一)MSDN (Microsoft Developer Network)版 MSDN软件是微软公司面向软件开发者的一种版本。MSDN 涵盖了所有可以被开发扩充的平台和应用程序,如微软公司的百科全书 Encarta,或者是各种游戏,是不...
9000
最近在使用Z-BLOG PHP版博客系统,一个挺不错的博客系统,以前用过DEDECMS、PHPCMS、WordPress。 折腾来折腾去,还是用回了国产CMS软件,觉得国产CMS软件接地气,适合国内大小站长的需求! 使用Z-BLO...
8508