当前位置:首页 > 功能 > 正文内容

5个不同类型的文章Blockquote的CSS应用样式适用于zblog

Mr6年前 (2019-01-12)功能2920

Blockquote标签多用于博客或论坛引用内容的时候,这里介绍5个blockquote的css样式,通过实例,让大家进一步了解blockquote的用法。

文字引用.jpg

Blockquote是一个html元素,它用于标识一个特别的单元内容,这部分内容是从其他网站或资源里拿来的。不同的浏览器有不同的内置Blockquote,同城仅仅是一个简单的左边旁注。如果你要使用很多引用,像博客那样,那么控制这个元素并给它一些CSS样式是个好的想法。

一个受欢迎的技术是在块引用区域放个大大的绘制的引用图标在左上方和右下方。在这个没有多背景图的前css3时代,如果不用一点额外的html,是很难做到的。最容易的技术是连同 <blockquote> 元素添加一个 <span> 元素。虽不理想,但有用。你能够应用很多这个块引用元素,然后使用span设置第二个背景图片。左上角和右下角分别地设置。

经典应用 效果

经典引用.jpg

css代码(注意图片路径):

     blockquote.style1 {
          font: 14px/20px italic Times, serif;
          padding: 8px;
          background-color: #faebbc;
          border-top: 1px solid #e1cc89;
          border-bottom: 1px solid #e1cc89;
          margin: 5px;
          background-image: url(images/openquote1.gif);
          background-position: top left;
          background-repeat: no-repeat;
          text-indent: 23px;
     }
     blockquote.style1 span {
          display: block;
          background-image: url(images/closequote1.gif);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代码:

<blockquote class="style1">
  <span>
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
  </span>
</blockquote>

主流引用 效果

主流引用.jpg

css代码:

blockquote.style2 {
          font: 14px/22px normal helvetica, sans-serif;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 50px;
          padding-left: 15px;
          padding-top: 10px;
          padding-right: 10px;
          padding-bottom: 10px;
          border-left: 3px solid #ccc;
          background-color:#f1f1f1
     }

html代码:

<blockquote class="style2">
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
</blockquote>

趣味引用 效果

趣味引用.jpg

css代码(注意图片路径):

 blockquote.style3 {
          font: 18px/30px normal Tahoma, sans-serif;
          padding-top: 22px;
          margin: 5px;
          background-image: url(images/openquote3.gif);
          background-position: top left;
          background-repeat: no-repeat;
          text-indent: 65px;
     }
     blockquote.style3 span {
          display: block;
          background-image: url(images/closequote3.gif);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代码:

<blockquote class="style3">
  <span>
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
  </span>
</blockquote>

另类的引用 效果

另类引用.jpg

css代码(注意图片路径):

blockquote.style4 {
          font: 14px/20px italic Times, serif;
          padding-left: 70px;
          padding-top: 18px;
          padding-bottom: 18px;
          padding-right: 10px;
          background-color: #dadada;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          margin: 5px;
          background-image: url(images/openquote4.gif);
          background-position: middle left;
          background-repeat: no-repeat;
          text-indent: 23px;
     }

html代码:

<blockquote class="style4">
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
</blockquote>

大括号 效果

大括号.jpg

css代码(注意图片路径):

blockquote.style5 {
          font: 12px/18px normal "Courier New", sans-serif;
          padding-left: 70px;
          padding-top: 2px;
          padding-bottom: 2px;
          background-color: #000;
          color: white;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          margin: 5px;
          background-image: url(images/openquote5.gif);
          background-position: middle left;
          background-repeat: no-repeat;
          text-indent: 23px;
       }
     blockquote.style5 div {
          padding-right: 50px;
          display: block;
          background-image: url(images/closequote5.gif);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代码:

<blockquote class="style5">
  <div>
    <span>
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
    </span>
  </div>
</blockquote>

注:以上5款引用样式需要有图片素材,没有图片素材没有效果,推荐使用主流引用无需任何图片素材,直接修改css代码即可!

扫描二维码推送至手机访问。

版权声明:本文由微客生活发布,如需转载请注明出处。

本文链接:https://www.weklife.cn/90.html

相关文章

【转载】给你的zblog文章页添加一个版权说明

【转载】给你的zblog文章页添加一个版权说明

zblog文章页底部添加一个版权声明类似“本文由XX原创,转载请注明xxx”的字样,有的主题模板是没有这些的,下面为详细操作步骤效果一CSS代码.open-message{margin-bottom:10px;padding:5px&nbs...

win10找不到默认打开图片的软件替换成其他的或者画图工具咋办?

win10找不到默认打开图片的软件替换成其他的或者画图工具咋办?

如果说win7 或者win10发现常用的浏览图片的工具没了,从而换成了画图以及其他软件,怎么恢复呢,网上资料也有很多,这里就不重复他们的方法了,直接在文章底部下载以及编辑好的注册文件,下载到电脑上自行双击运行安装就行了。Windows默图片...

Zblog升级php版本数据库错误提示“Class "Database__pdo_mysqli" not found”解决方案

Zblog升级php版本数据库错误提示“Class "Database__pdo_mysqli" not found”解决方案

ZBLOG升级php版本的时候出现:Class "Database__pdo_mysqli" not found 错误提示,修改办法:我用的阿里云的升级时候提示了以下信息:首先需要程序版本能够支持php版本,所以最好事先...

手机视频或照片隔空投送到台式(win系统)电脑的新方法

手机视频或照片隔空投送到台式(win系统)电脑的新方法

最开始得时候想要把手机上的内容传送到电脑都是通过数据线的方式,但是现在很多人也会用QQ或者微信的文件传输模式去传输到电脑,但是这个方法会被QQ或微信压缩文件,如果是图片还好不是很严重,但是如果是视频的话就会被严重压缩,毕竟不是图片可以选择源...

Zblog使用云存储插件网页图片不显示的问题解决方案

Zblog使用云存储插件网页图片不显示的问题解决方案

因为一直都是使用的七牛云存储插件, 以为是云存储那边出了什么问题, 就把全站所有的远程云存储图片全部删除了,然后就导致了现在站点很多文章内的图片都已经没有了,索性也就没有继续在弄。前段时间登录自己的这个站点发现图片都不显示了, 找了好久的原...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。