当前位置:首页 > 瞎折腾 > 正文内容

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

Mr2年前 (2019-01-12)瞎折腾791

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代码即可!

版权声明:若无特殊注明,本站文章均由 微客生活 编辑发布

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

分享给朋友:

相关文章

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

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

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

利用DIV+CSS让某些文字或图片只在电脑PC端显示移动端不显示

利用DIV+CSS让某些文字或图片只在电脑PC端显示移动端不显示

现在的网页都讲究一个自适应,所以有部分文字或图片不想再移动端页面显示,当然一般的博客主题或网站模板都自带了这个功能,但是少部分网页没有区分,让PC端的问题一个不漏都显示在了移动端,尤其是备案信息,由于...

zblog常用广告位添加代码及方法

zblog常用广告位添加代码及方法

zblog常用广告位添加博客添加广告也是正常的,前期没有流量不添加广告,但是运营一段时间之后有了稳定的流量,那么添加广告就是必须的了,不然白白浪费了流量,在此记录一下广告位的添加方法和相关代码,以便日...

zblog更换主机空间的博客搬家流程

zblog更换主机空间的博客搬家流程

zblogPHP版本更换服务器或主机操作以下几个步骤即可完成1、用ftp软件把老版网站的所有文件下载至本地,登陆到老版网站sql数据库进行备份导出(主机提供商一般是提供数据库备份导出功能的)得到一个s...

简单的zblog内容页相关文章调用方法

简单的zblog内容页相关文章调用方法

也许你会遇到和我一样的问题,使用了一款没有任何多余功能代码的简介主题,发现文章底部也没有相关文章,本文就写两个简单的相关文章调用的方法方法一:通过tags调用相关文章1、找到博客文章页的模板;zblo...

zblog程序的自定义404页面设置方法

zblog程序的自定义404页面设置方法

关于zblog404页面的自定义设置方法首先来说博客程序不管是zblog还是wordpress基本都是自带404页面的,所以没办法在htaccess设置或者空间服务商后台设置想要自定义博客404页面唯...

发表评论

访客

看不清,换一张

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