css美化blockquote标签
<style>.yinyong {
padding: 2px 8px;
font: normal 16px/20px sans-serif;
border-left: 2px solid tan;
}
.yinyong > p {
margin: 4px 0;
padding: 2px 0;
}
.yinyong > h2 {
margin: 6px 0;
padding: 2px 0;
}
.chj_code {
position: relative;
margin: 10px 0 10px 60px;
font: normal 16px/20px Consolas, Monaco, monospace;
}
.chj_code::before {
position: absolute;
content: '';
width: 0;
height: 100%;
border: 1px solid teal;
}
.chj_code > p {
margin: 3px 0 3px 10px;
position: relative;
}
.chj_code > p::before {
position: absolute;
width: 40px;
left: -55px;
content: attr(data-line);
text-align: right;
color: #bbb;
}
</style>
<p>blockquote 标签经常用于长文本引用，它以左右两头文本缩进的方式表示其内文本是引用的。以下是 blockquote 标签的默认样式，我在该标签里使用了 h2 标签和 p 标签，这是允许的，毕竟所引用的文本可能是多段落、有自己标题的：</p>
<blockquote>
<h2>定义和用法</h2>
<p><blockquote> 标签定义块引用。</p>
<p><blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。</p>
</blockquote>
<p>当代出版物的排版风格，包括纸质印刷品和基于屏幕的排版产品，都不会满足于 blockquote 的默认样式，通常会加入自己的一些修饰，以便美化引用对象的观感、提升被引用文本区别于常规文本的特征，同时也能提升阅读体验。例如下面的样子：</p>
<blockquote class="yinyong">
<h2>定义和用法</h2>
<p><blockquote> 标签定义块引用。</p>
<p><blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。</p>
</blockquote>
<p>显然，上面的两种 blockquote 样式中，第二种更美观且更易于区分文档流中的引用文本，阅读体验更友好。这是怎么做到的？方法很多，其中，最简单的，利用 border 属性就能实现。第二种 blockquote 样式的左边竖线，我利用 border-left 实现，为了配套排版需要，padding 和 font 属性尤其是 padding 要合理设置一下。以下是第二种 blockquote 样式的 CSS 和 HTML 代码：</p>
<div class="chj_code">
<p><style></p>
<p><span style='color: red;'>.yinyong </span>{</p>
<p> <span style='color: blue;'>padding</span>: 2px 8px;</p>
<p> <span style='color: blue;'>font</span>: normal 16px/20px sans-serif;</p>
<p> <span style='color: blue;'>border-left</span>: 2px solid tan;</p>
<p>}</p>
<p><span style='color: red;'>.yinyong > p </span>{</p>
<p> <span style='color: blue;'>margin</span>: 4px 0;</p>
<p> <span style='color: blue;'>padding</span>: 2px 0;</p>
<p>}</p>
<p><span style='color: red;'>.yinyong > h2 </span>{</p>
<p> <span style='color: blue;'>margin</span>: 6px 0;</p>
<p> <span style='color: blue;'>padding</span>: 2px 0;</p>
<p>}</p>
<p></style></p>
<p><br></p>
<p><<span style='color:darkred'>blockquote</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"yinyong"</span>></p>
<p> <span style ='color: green'><!-- 内容省略 --></span></p>
<p><<span style='color: darkred'>/blockquote</span>></p>
</div>
<p>看完代码，细心的朋友可能会问：咦，你这个代码是不是也用了 blockquote 标签？嗯，没有，不过也可以用。</p>
<script>
let papas = document.querySelectorAll('.chj_code');
Array.from(papas).forEach( (item,key) => {
let pps = item.children;
Array.from(pps).forEach( (p,pkey) => {
p.setAttribute('data-line', pkey + 1);
});
});
</script>
这个blockquote 标签就是用左右的缩进来区分引用的吧。学习了{:4_187:} 这个代码演示真的很像使用了blockquote 标签，要么就是论坛的代码本身带这个标签的吧{:4_173:} 代码太深奥了，我是一知半解。 庶民来了 发表于 2023-1-27 11:19
代码太深奥了，我是一知半解。
有一知，又有半解，足矣 马黑黑 发表于 2023-1-27 11:32
有一知，又有半解，足矣
很想入门，有趣的。 庶民来了 发表于 2023-1-27 16:55
很想入门，有趣的。
入门容易深造难
页:
[1]