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

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

Mr5年前 (2019-01-12)瞎折腾2303

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

相关文章

给你的zblogPHP添加一个面包屑导航

由于ZBLOG一些主题是比较简洁的所以也没有面包屑导航,但是对于用户体验和seo角度来说,面包屑导航还是很有必要的,那么本文就给出比较简单的代码如下当前位置:&nbsp;<a href='{$host}...

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

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

200M空间足够个人网站或博客的正常运行

弄个个人网站或者博客应该用多大的空间合适呢?想必这个问题是很多朋友的选择题,想要弄个个人博客或者网站应该用多大的空间好,这里说说我个人的感受,200M的空间差不多足够一个个人网站博客的正常运行了;新站一般从流量限制和空间存储来说200M的空...

利用input标签给文本框内添加提示文字

利用input标签给文本框内添加提示文字

很多网站上我们都看到input输入框显示提示文字如下图:如图显示,很多时候例如博客等回复框或者其他提示框内空牢牢的感觉不够“高端”实现这个方法很简单,只需要在<input>标签里添加:placeholder="提示文字...

zblog主题自带默认的404页面太low更换成腾讯公益404立马大气了

zblog主题自带默认的404页面太low更换成腾讯公益404立马大气了

相比博客系统默认的404页面真的也是没有什么好说的,不管是wordpress还是zblog自带的404页面不想其他网站404页面可以在空间商后台设置404,但是博客系统的404页面基本都是php文件,修改太麻烦,也没法301索性就把404换...

将zblog文章作者和评论显示用户名修改成别名

将zblog文章作者和评论显示用户名修改成别名

也许很多博友也会遇到如此的尴尬情况就是当自己发表博文或者评论时别人都是显示自己的别名,为什么自己却显示用户名也就是登陆ID,自己搞了半天想了个吊炸天的别名,最后显示用户名ID很多zblog主题调用的都是用户名ID 显示用户名的,也有一部分是...

发表评论

访客

看不清,换一张

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