.examples 实例展示样式类


效果如下:

自由的使用html标签

通过pre标签来显示代码
标签1 标签2
内容1
内容2

开始使用


html结构 单标签 无边框 标签说明
<div class="qpf examples">
	<p>内部可自由的使用html标签</p>
	<pre>通过pre标签来显示代码</pre>
	<div class="showcode">
		<span>标签1</span>
		<span>标签2</span>
		<pre style="display: none;">内容1</pre>
		<pre style="display: none;">内容2</pre>
	</div>
</div>
						
<div class="qpf examples">

	<div class="showcode">
		<span>html</span>
		<pre style="display: none;">内容1</pre>
	</div>
</div>
						
<div class="qpf examples none">

	<div class="showcode">
		<span>html</span>
		<pre style="display: none;">内容1</pre>
	</div>
</div>
						
# 可无限添加标签数量, 限定span元素, 但它们必须连续. 因为需要使用它们的顺序ID.
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
# 相同pre标签也必须连续, 中间无其他元素.
<pre style="display: none;"> ... </pre>
<pre style="display: none;"> ... </pre>
<pre style="display: none;"> ... </pre>

# span和pre 元素自身必须连续, 它们直接可以有其他元素, 但视觉效果不好.
# .showcode 交互由qpf.examples.js 提供.

# 如果想重置文字大小和颜色. 设置父元素是无效的, 只能设置到标签上, 或
重置css样式
.qpf.examples .showcode>span{}

- 选中标签的样式为 .active