＜blockquote＞标签 自定义样式

最新推荐文章于 2024-04-13 11:08:33 发布
最新推荐文章于 2024-04-13 11:08:33 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： bootstrap bootstrap踩坑篇
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/81944951
版权

<blockquote>标签 自定义样式

blockquote 属于H5新增标签。结合bootstrap框架开发后台管理系统项目，使用起来无论是开发者，还是人机体验者，都是非常不错的选择和体验！

效果图如下

这里写图片描述

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>blockquote标签 自定义样式</title>

    <!-- Bootstrap -->
    <link href="statics/plugins/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
	body{padding: 20px;}
.bootstrap-elem-quote{
	margin-bottom: 10px;
    padding: 15px;
    line-height: 22px;
    border-left: 5px solid #009688;
    border-radius: 0 2px 2px 0;
    background-color: #f2f2f2;
}
</style>
  </head>
  <body>
  	<blockquote class="bootstrap-elem-quote">
		<form class="form-inline">
		  <div class="form-group">
		    <label for="exampleInputName2">Name</label>
		    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">Email</label>
		    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
		  </div>
		  <button type="submit" class="btn btn-primary">Send invitation</button>
		</form>
	</blockquote>



    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="statics/plugins/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

以上就是关于“ blockquote 标签 自定义样式 ” 的全部内容。

草巾冒小子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单而漂亮的Blockquote样式
CSS 初学者指南
06-22 3144
块引用在符合标准的浏览器中显示为“前有大引号”，而在IE中则以较粗的左边框和浅灰色背景显示。 与其他块引用技术不同，此样式不需要嵌套的块级元素（如p）。 这样，它将段落变成内联样式的元素，以防止内容降到引号下方。 blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px;...
Typora修改空格样式（blockquote）
既然青春留不住
08-18 1567
文章目录Typora修改空格样式 blockquote Typora修改空格样式 blockquote 当我们用Typora记笔记的时候有时会需要用>加空格来做一些小标题，Typora原来的空格样式是灰色的，当我们小标题比较多的时候看起来就不清晰，这时我们就可以选择自定义空格样式。 Typora主题样式也比较丰富，Github、Newsprint、Night、Pixyll、Whitey,我用的是Github，找到文件——>偏好设置 再打开主题文件夹 就会打开到对应安装目录——>\Ty
element-ui form表单自定义label的样式、内容
最新发布
来一颗砂糖橘
04-13 4134
element-ui form表单自定义label的样式、内容。
HTML如何实现双引号加粗大 字体小,【2个实例】教你怎样修改和美化blockquote双引号及css样式...
weixin_35834213的博客
06-03 1022
blockquote默认的双引号千篇一律太过普通，我们能否更改它并美化它，以搭配网页模版的视觉要求？答案是肯定的。下面我就以两个实例来教你怎样修改和美化blockquote双引号，并送上漂亮的css样式。概括来说，主要是通过如下两个方法来实现：下面分别用实例详细介绍。1、使用css3更改和美化双引号样式一效果图：blockquote-css3修改双引号css代码：@import url(https...
blockquote class="layui-elem-quote"
ppwwp的专栏
10-12 4091
引用块、字段集区块、横线等等，这些元素都无需依赖任何模块 引用模块 &lt;blockquote class="layui-elem-quote"&gt;引用区域的文字&lt;/blockquote&gt; &lt;blockquote class="layui-elem-quote layui-quote-nm"&gt;引用区域的文字&lt;/blockquote&gt; 横线 默认分割线 &
html标签 q,HTML标签之<q> <blockquote>
weixin_42526417的博客
06-20 647
两个标签都表示“引用”。不同的是，q标签是行内元素，在内容的开始和结尾处会包有“”，而 blockquote是块级元素，默认带有左右40px的外间距，不带“”。从语义上讲，前者引用的是小段文字，后者引用的是大段的内容块。从兼容性上讲，在IE67下q标签不会带有“”。FF下的引号是漂亮的全角字符：“”。而chrome下则为半角字符：""。至于IE89，应该也是全角字符，但在不指定字体的情况下真的丑爆...
引用块（Blockquote）CSS效果
03-20
NULL 博文链接：https://eric-gao.iteye.com/blog/890633
HTML标签速查参考手册（实用速查收藏版）
05-10
- `<BLOCKQUOTE>`: 引用长段落。 - `<HR>`: 水平分隔线。 - `<BR>`: 换行。 在实际开发中，为了保持代码的可维护性和适应不同浏览器，推荐使用HTML5标准，并结合CSS和JavaScript进行页面设计和交互处理。同时，...
html标签注释集合[借鉴].pdf
10-11
14. `<blockquote>`: 用于引用大段文字。 15. `<body>`: 定义HTML文档的主体内容。 16. `<br>`: 插入一个换行符。 17. `<button>`: 创建一个可点击的按钮，可以用于提交表单或触发JavaScript事件。 18. `...
网页设计html代码标签大全宣贯.pdf
11-08
7. `<BLOCKQUOTE>` 和 `</BLOCKQUOTE>`：用于表示一个长的引用，浏览器通常会自动缩进。 8. `<EM>` 和 `</EM>`：用于强调文本，通常以斜体显示。 9. `<STRONG>` 和 `</STRONG>`：表示特别重要的文本，通常以粗体...
html常用代码大全[借鉴].pdf
10-11
滚动条样式可以通过CSS（Cascading Style Sheets）进行自定义，例如在`<HEAD>`标签内添加样式规则，改变滚动条的颜色和样式。`<MARQUEE>`标签则用于创建滚动文本效果，`behavior`属性可设置滚动方式，`direction`...
html常用标签
12-31
28. `<custom>`: 不是标准HTML标签，可能是指自定义元素。 29. `<datatransfer>`: 与数据拖放操作相关的API。 30. `<dd>`: 定义列表中的定义部分，通常缩进显示。 31. `<del>`: 标记已被删除的文本。 32. `<dfn>...
<blockquote>标签，长文本引用
CTI技术与呼叫中心设计
10-15 918
 的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。       等等，上一节标签不是也是对文本的引用吗？不要忘记标签是对简短文本的引用，比如说引用一句话就用到标签。       如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用blockquote>。 语法: blockquote>引用文本 如下面例子：
CSS中关于定位position的问题,blockquote,div,span三个的区别
tavor的专栏
11-09 6808
CSS中关于定位position的问题，定位共分为四种：1.static 无特殊定位，对象遵循HTML定位规则,2.absolute 绝对定位，如果父元素有使用定位，则是相对于父元素的坐标进行绝对定位;否则相对于浏览器的边界（或者说文档的边界）进行绝对定位。3.relative 相对定位，就是相对于他本身应在的位置进行定位。4.fixed 固定定位，相对于浏览器边界是固定的，如
如何在WordPress主题中自定义Blockquotes样式
cumohuo9136的博客
09-10 685
Quotes often are the most memorable part of your article. They are also the most shared part of any post or presentation. This is why newspapers and main stream media sites customize their blockquote ...
blockquote 和 q 标签 css样式
weixin_33920401的博客
05-21 364
blockquote与q标签都是用来表示内容引用的。两者有什么区别呢？简单说，blockquote重点在block上，它包含的子元素要求是块元素(block-levelcontent)，比如p、div，常用在大段的引文处。q的话，用于短文字的引用(inlinecontent),本身也是inline元素使用这两个标签，多数浏览器会默认加上一对引号。可以使用以下css做一个清...
marked扩展语法（增加自定义表情）
大大橘子的博客
06-22 4116
背景 最近在移植WordPress的Sakura主题到Halo上（实际上只是参照样式重写了）。评论这里需要使用marked，Halo官方提供的表情不太适合我，且我早就想扩展一个带表情的marked了。因此正好借着这个机会，扩展一个带表情的marked。 后续也想扩展一下文章页面的marked，只是目前还没有插件。因此暂时先只改评论的即可，到时候通用一套语法即可。 【注：当前文章大部分内容为分析，篇幅较长，如果不想看过程，直接跳转至扩展即可】 本篇文章基于如下内容 marked.js：https://git
请帮我写一个关于王勃和他的出名的诗的网页，要求只使用html5的标签和属性，至少使用35个标签和15个属性，网页中需要用到至少以下常用标签和属性，不要在本次实验中出现CSS样式和js代码。 (1)、基础标签 <meta> 属性charset，取值为utf-8； 属性http-equiv，取值为 expires/refresh； 属性name，取值为keywords、roborts。 属性content，注意content与不同属性搭配时的对应取值含义。 <title> <h1….h6> <p> <div> <section> <article> <aside> <footer> <address> <head> (2)、表单 <form> 属性action、method、target、enctype <input> 属性type，取值为radio、checkbox、file、password、text、submit、date、email、tel、range， 另外还有属性required、placeholder、pattern (3)、下拉选择列表和选项列表 <select> <optgroup> <datalist> <option> (4)、列表 <ul> <ol> <li> (5)、表格 <table> <tr> <th> <td> (6)、图像与映射 <img> 属性src、usemap <map> <area> 属性coords、href、shape、target (7)、链接 <a> <link> (8)、其他 <button> <canvas> <style> <script> <audio> <video>
06-01
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="expires" content="0"> <meta http-equiv="refresh" content="60"> <meta name="keywords" content="王勃,唐代,诗人"> <meta name="robots" content="index,follow"> <title>王勃及其名诗</title> </head> <body> <header> <h1>王勃及其名诗</h1> <nav> <ul> <li><a href="#introduction">简介</a></li> <li><a href="#poems">代表作</a></li> <li><a href="#conclusion">结论</a></li> </ul> </nav> </header> <section id="introduction"> <h2>简介</h2> <p>王勃（650年－676年），字子安，唐代初期著名的文学家和政治家。其诗歌以豪放派为主，代表作有《滕王阁序》、《秋风词》等。</p> <blockquote> <p>凌波不过横塘路，但目送，芳尘去。锦瑟华年谁与度？月桥花院，琐窗朱户，只有春知处。</p> <footer> <cite>《秋风词》</cite> </footer> </blockquote> </section> <section id="poems"> <h2>代表作</h2> <article> <h3>《滕王阁序》</h3> <p>始建于唐太宗贞观元年（627年），是一座历史悠久的楼阁，位于江苏扬州市广陵区瘦西湖畔。</p> <img src="tengwangge.jpg" alt="滕王阁" usemap="#tengwangge-map"> <map name="tengwangge-map"> <area shape="rect" coords="0,0,100,100" href="https://baike.baidu.com/item/%E6%BB%95%E7%8E%8B%E9%98%81" target="_blank" alt="滕王阁百度百科"> </map> </article> <article> <h3>《秋风词》</h3> <audio src="qiu_feng_ci.mp3" controls>您的浏览器不支持 HTML5 音频元素。</audio> <video src="qiu_feng_ci.mp4" controls>您的浏览器不支持 HTML5 视频元素。</video> <ol> <li>凌波不过横塘路</li> <li>但目送，芳尘去</li> <li>锦瑟华年谁与度</li> <li>月桥花院，琐窗朱户</li> <li>只有春知处</li> </ol> </article> </section> <section id="conclusion"> <h2>结论</h2> <table> <thead> <tr> <th>作品</th> <th>类型</th> <th>评价</th> </tr> </thead> <tbody> <tr> <td>《滕王阁序》</td> <td>散文</td> <td>被誉为“千古文章”，是中国文学史上的经典之作。</td> </tr> <tr> <td>《秋风词》</td> <td>词</td> <td>王勃的词作中，这首《秋风词》被人们传颂最为广泛。</td> </tr> </tbody> </table> <form action="#" method="post" target="_blank" enctype="multipart/form-data"> <fieldset> <legend>留言板</legend> <label for="name">姓名：</label> <input type="text" id="name" name="name" required placeholder="请输入您的姓名"><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required placeholder="请输入您的邮箱"><br> <label for="message">留言：</label> <textarea id="message" name="message" rows="4" cols="40" required placeholder="请输入您的留言"></textarea><br> <input type="submit" value="提交"> </fieldset> </form> <button onclick="alert('感谢您的阅读！')">点个赞吧</button> <canvas id="myCanvas" width="300" height="150"> 您的浏览器不支持 HTML5 画布元素。 </canvas> <style> #myCanvas { border: 1px solid black; } </style> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script> <address> 联系我们：北京市海淀区中关村大街1号<br> 电话：010-12345678<br> <a href="mailto:wangbo@example.com">wangbo@example.com</a> </address> <footer> <p>版权所有 © 2021 王勃</p> </footer> </section> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值