`
jsntghf
  • 浏览: 2526174 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

引用块(Blockquote)CSS效果

CSS 
阅读更多
<style type="text/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;
  }

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

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

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

  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 span {
    padding-right: 50px;
    display: block;
    background-image: url(images/closequote5.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
  } 
</style>

<blockquote class="style1">   
  <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span>   
</blockquote>

<blockquote class="style2">   
  <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span>   
</blockquote>

<blockquote class="style3">   
  <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span>     
</blockquote>

<blockquote class="style4">   
  <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span>   
</blockquote>

<blockquote class="style5">   
  <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span>   
</blockquote>

 

 效果图如下:

 

分享到:
评论

相关推荐

    HTML blockquote 标签使用与美化

    总的来说,`&lt;blockquote&gt;` 标签是HTML中用于创建美观且易于阅读的引用块的重要工具。结合CSS,我们可以进一步定制它的样式,使其成为网页设计中的亮点。无论是技术文档、博客文章还是任何其他类型的内容,善用`...

    android TextView 支持CSS样式

    - **引用块标签 `&lt;blockquote&gt;`**:定义长引用。 - **换行标签 ` `**:定义换行。 - **引用标签 `&lt;cite&gt;`**:定义作品的标题。 - **定义标签 `&lt;dfn&gt;`**:定义词条。 - **对齐标签 `&lt;div align=""&gt;`**:定义...

    HTML标签的默认CSS样式汇总

    9. **块引用(blockquote)**:默认会有一些外边距,用于区分引用内容和普通文本。 10. **预格式化文本(pre)**:保留其中的空格和换行,方便展示代码或其他格式敏感的文本。 11. **表格的表头单元格(thead)、...

    前端css+html+布局笔记

    声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式,实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 ...

    normalize.css-8.0.1.zip

    5. **其他元素**:还包括对`&lt;pre&gt;`、`&lt;code&gt;`、`&lt;blockquote&gt;`、`&lt;q&gt;`、`&lt;abbr&gt;`、`&lt;dfn&gt;`、`&lt;samp&gt;`等特殊元素的样式调整,以提升代码块和引用等内容的展示效果。 **三、使用Normalize.css的好处** 1. **减少样式...

    《HTML5+CSS3项目开发案例教程》习题答案.docx

    项目4探讨了列表相关元素,如无序列表`&lt;ul&gt;`和有序列表`&lt;ol&gt;`,CSS中的`display`属性如何将元素转换为行内块元素,中文数字的设置,列表项`&lt;li&gt;`或`&lt;dd&gt;`的使用,以及CSS的伪类选择器应用,如将奇数行文本颜色设为...

    css块状元素与内联元素以及inline-block

    * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级元素,也是 CSS 布局的主要标签 * dl - 定义列表 * fieldset - 表单控制组 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - ...

    html+css基础知识.pdf

    HTML和CSS是构建网页的基础技术,它们共同决定了网页的结构和样式。...随着Web技术的发展,HTML5和CSS3引入了更多新特性,如新的元素、动画效果、响应式设计等,学习和理解这些基础知识是进一步深入学习的前提。

    HTML&CSS note

    - `&lt;blockquote&gt;`:用于展示引用文本,适用于较长的引用,显示为缩进式段落。 - `&lt;pre&gt;`:保持文本原始格式,如代码示例。 - `&lt;span&gt;` 和 `&lt;div&gt;`:分别用于定义段落和跨段落的内容块。 ##### 字符级标记 - **字体...

    通过Dreamweaver CS学习HTML DIV CSS 网页文字PPT学习教案.pptx

    - 引用他人的内容通常用`&lt;blockquote&gt;`标签,使文字呈现块状引用样式。 4.2.4 设置标题文字: - 标题由`&lt;h1&gt;`至`&lt;h6&gt;`标签表示,级别越高,标题越大,通常`&lt;h1&gt;`代表主标题,`&lt;h6&gt;`为子标题。CSS可以进一步定制标题...

    Markdown-Here-CSS-:几个Markdown Here CSS样式

    Markdown Here则是在这个基础上,通过CSS(Cascading Style Sheets)来控制其渲染效果,使得Markdown文本在预览时更加美观。 Markdown Here CSS样式文件通常包含一系列的CSS规则,用于定义Markdown元素的显示方式。...

    Collapse Blockquote-crx插件

    在技术实现层面,"Collapse Blockquote-crx"可能采用了JavaScript和CSS来操作DOM(文档对象模型),通过监听用户的交互事件,动态修改`&lt;blockquote&gt;`元素的样式,实现其折叠和展开的效果。同时,由于是浏览器扩展,...

    什么是块元素block和内联元素inline

    (此标签已过时,不推荐使用,可以通过CSS实现相同效果) - `&lt;dir&gt;`:用于定义目录列表,已过时。 - `&lt;div&gt;`:通用容器元素,常用于页面布局。 - `&lt;dl&gt;`:定义定义列表。 - `&lt;fieldset&gt;`:用于将表单内的相关元素...

    学习心得.doc

    故 Paragragh 标签是,块引用标签是&lt;blockquote&gt;。有些标签说明页面如何被格式化(例如,开始一个新段落),其他则说明这些词如何显示(使文字变粗)。还有一些用 HTML 编写的超文本文档称为 HTML 文档,它能独立于...

    normalize.rar

    6. **结构元素**:修复了`hr`(水平线)、`blockquote`(引用块)等结构性元素的样式,使其在不同浏览器下保持一致。 四、实际应用与扩展 在实际项目中,开发者只需引入normalize.css,即可快速实现跨浏览器的样式...

    testimonial_section_1::rocket: :comet: 你好,这是来自我的纯 CSS 块的推荐部分。 这是随时可以使用的,漂亮且响应Swift的部分

    在这个例子中,HTML可能包含了如`&lt;div&gt;`、`&lt;section&gt;`、`&lt;p&gt;`(段落)、`&lt;blockquote&gt;`(引用)等元素,用以组织推荐内容、作者信息和设计布局。 压缩包中的文件“testimonial_section_1-main”可能是这个推荐部分...

    MonkdyGTD 语法

    - 块引用使用大于号来表示引用的文本。 ```markdown &gt; blockquote,level1 &gt;&gt; blockquote,level2 &gt;&gt;&gt; blockquote,level3 ``` 显示效果: &gt; blockquote,level1 &gt; &gt;&gt; blockquote,level2 &gt;&gt; &gt;&gt;&gt; blockquote,level3 #...

Global site tag (gtag.js) - Google Analytics