blockquote标签几种CSS式样美化

浏览器支持

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更改和美化双引号样式一

效果图:

blockquote标签几种CSS式样美化

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、使用图片更改和美化双引号样式二

效果图:

blockquote标签几种CSS式样美化

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更改和美化双引号样式三

效果图:

blockquote标签几种CSS式样美化

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更改和美化双引号样式四

效果图:

blockquote标签几种CSS式样美化

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更改和美化双引号样式五

效果图:

blockquote标签几种CSS式样美化

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

所有代码都可以根据自己喜好,进行修改!

七片枫叶 | HTML5/CSS3 | 3507 | 0 | 2018-02-21

本文暂无评论
发表评论    
名称 *
邮箱
网址
验证码 *  
内容
相关文章
两款漂亮大气的CSS3式样立体按钮
两款漂亮大气的CSS3式样立体按钮

CSS3应用非常广泛,做出来的效果也非常好看,网上搜集了两款...

猜你喜欢
ZblogPHP日期、浏览量、内容简介等几个常用调用字段
ZblogPHP日期、浏览量、内容简介等几个常用调用字段

ZblogPHP中,常用的像:日期、浏览次数、评论数、栏目名...

Z-BLOG
PHPCMS V9 首页调用最新、热门文章
PHPCMS V9 首页调用最新、热门文章

首页调用最新文章:{pc:get sql=&quo...

PHPCMS
两款漂亮大气的CSS3式样立体按钮
两款漂亮大气的CSS3式样立体按钮

CSS3应用非常广泛,做出来的效果也非常好看,网上搜集了两款...

HTML5/CSS3
ZblogPHP幻灯片调用代码
ZblogPHP幻灯片调用代码

幻灯片是网站不可少的元素,有一个好看的幻灯片,能...

Z-BLOG
Godaddy空间用DEDECMS发图集报错
Godaddy空间用DEDECMS发图集报错

最近在Godaddy买了个虚拟主机,选的是豪华型的:Delu...

零碎
blockquote标签几种CSS式样美化
blockquote标签几种CSS式样美化

浏览器支持 Internet...

HTML5/CSS3
ZblogPHP分页标签、文章数量、总页码数标签
ZblogPHP分页标签、文章数量、总页码数标签

博客网站,实用的分页标签、文章数量、总页码数、当前页、首页、...

Z-BLOG
ZblogPHP列表页调用多张图片式样
ZblogPHP列表页调用多张图片式样

大部分主题首页、列表页都是调用文章一张缩略图,有...

Z-BLOG
微信再出重拳!在朋友圈做这种事,永久封号!你朋友圈有这么做的吗?
微信再出重拳!在朋友圈做这种事,永久封号!你朋友圈有这么做的吗?

10日晚,针对微信朋友圈中出现的恶意违规及对抗行为,微信团队...

杂谈
热点推荐
DEDECMS文章数量、会员等常用统计字段

常用站点统计字段,如:共有多少篇文章,多少位会员等。共有文章...

浏览全文

土豪米店-精品域名专卖
  • 热门文章
  • 热评文章
  • 最新文章
标签列表
WWW.ELFGOD.COM
精灵网

Copyright ElfGod.COM.Rights Reserved.
Designed by SML
站长QQ:79087916