Bearweb页面风格

本文展示了如何使用Bearweb网页模板的样式来美化页面HTML元素。

Web dev, HTML, CSS, 样式表

--by @ Jan 27, 2026

Index

顶级`<div>`

首先，所有的内容都必须置于一个或多个<div>内。每一个<div>代表了一个章节。你可以将内容的不同部分放入不同<div>内。<div>之间有颜色变化便于区分。

`main_title`

上面的<div>使用了main_title作为class，这将会使用深蓝色渲染背景，白色渲染文字。适合高亮标题。

上面的<div>的源码如下：


<div class="main_title">
	<h1>顶级<code>&lt;div&gt;</code></h1>
</div>

默认

这一个<div>没有使用class，也就是默认项目。适合作为内容部分。

这一个<div>的源码如下：


<div>
	<p>这一个<code><div></code>没有使用class，也就是默认项目。适合作为内容部分。</p>
</div>

这一个<div>将会有不同的背景颜色。你可以观察到内容在不同分区。

这一个<div>的源码如下：


<div class="main_title">
	<p>下一个<code><div></code>将会有不同的背景颜色。你可以观察到内容在不同分区。</p>
</div>

`tintimg`

你可以使用图片作为背景。

使用tintimg作为class来为背景染色（使用半透明颜色层遮盖背景）并修改前景文字颜色以确保可读性。

这个例子中使用了25% alpha的黑色，前景前景文字颜色为白色。

上面的<div>的源码如下：


<div class="tintimg" style="--bgcolor: rgba(0,0,0,0.25); --bgimg:url(/web/banner.jpeg); color: #FFF;">
	<p>你可以使用图片作为背景。</p>
	<p>使用<code>tintimg</code>作为class来为背景染色（使用半透明颜色层遮盖背景）并修改前景文字颜色以确保可读性。</p>
	<p>这个例子中使用了25% alpha的黑色，前景前景文字颜色为白色。</p>
</div>

`main_wide`

这一个<div>使用了main_wide作为class，内容将会占据整个屏幕宽度。

你可以尝试调整浏览器屏幕大小来观测main_wide如何影响Bearweb页面模板的响应式设计。

这一个<div>的源码如下：


<div class="main_wide">
	<p>这一个<code><div></code>使用了<code>main_wide</code>作为class，内容将会占据整个屏幕宽度。</p>
	<p>你可以尝试调整浏览器屏幕大小来观测<code>main_wide</code>如何影响Bearweb页面模板的响应式设计。</p>
</div>

`overlay`

使用overlay作为class可以让<div>悬浮在网页顶层。这有助于达到文档水印的效果。


<div id="watermark" class="overlay main_wide" style="display: flex; align-items: center; justify-content: center; color: orange;">
	<div>
	<span style="display: block; text-align: center; font-size: 8vw;">内容&lt;div&gt;示例</span>
	<span style="display: block; text-align: center; font-size: 30px;">这篇文章展示了如何使用内容&lt;div&gt;。</span>
	</div>
</div>

上面的例子展示了将一个2行的水印置于本文顶层。你可以额外添加上文提到的main_wide到class来使水印覆盖全屏宽度。使用下面的按键来激活这个效果。

模组

下面展示了可以用在顶级<div>下的模组：

关键字

使用<p class="content_keywords">来渲染关键字列表。例如：


<p class="content_keywords">关键字 1, 关键字 2, 关键字 3</p>

注意使用英文的逗号（,）来间隔关键字。

在网页加载时，关键字将会被分割为浅色的块，如为下面样式所示：


<div class="keywords">
	<span style="background: rgb(235, 250, 140);">关键字 1</span>
	<span style="background: rgb(219, 180, 221);">关键字 2</span>
	<span style="background: rgb(184, 129, 146);">关键字 3</span>
</div>

渲染效果就是：

关键字 1, 关键字 2, 关键字 3

背景将使用随机生成的浅色。每次加载页面时颜色都会不同。

注释框

你可以使用<div class="main_note">来创建一个注释框，例如：


<div class="main_note">
	<b>注释框</b>
	<p>这是一个注释框。</p>
</div>

注释框

这是一个注释框。

默认将使用灰色。你可以通过--color: #RRGGBB;样式规则来自定义颜色。当然，也可以使用预设的main_note_ok、main_note_ok、main_note_ok类型。

自定义颜色：


<div class="main_note" style="--color: blue;"><p>自定义颜色。</p></div>

OK样式注释框：


<div class="main_note_ok"><p>OK样式注释框。</p></div>

警告样式注释框：


<div class="main_note_warning"><p>警告样式注释框。</p></div>

错误样式注释框：


<div class="main_note_error"><p>错误样式注释框。</p></div>

`tintimg`

桜

除了给顶级<div>做背景外，你可以在任何以图片为背景的元素上使用tintimg样式。


<div class="tintimg" style="--bgcolor: rgba(255, 183, 197, 0.65); --bgimg:url(/example/tree.thumb.jpg); color: #1F1618;">桜</div>

这个样式使用图片作为背景。搜索引擎将会忽略这个图片，因为搜索引擎只会识别<img>元素内的图片。如果你希望这张图片被收录的话，不要使用这个样式。

`sidebyside`

你可以（横向）并列排布两个（或多个）元素，便于比较。


<div class="sidebyside">
	<img src="/example/rail.thumb.jpg" alt="铁路" />
	<img src="/example/fall.thumb.jpg" alt="大瀑布" />
</div>

两个项目默认将各自占据50%的横向空间，且间隔10像素。如果有多个项目，或是要更改宽度比例与间隔，可以设置gap和grid-template-columns规则：


<div class="sidebyside" style="grid-template-columns: 300px 2fr 1fr; gap: 25px;">
	<img src="/example/tree.thumb.jpg" alt="樱花" />
	<div>文字1 比例2</div>
	<div>文字2 比例1</div>
</div>

文字A 比例2

文字B 比例1

上面的例子展示了3个向项目。第一个（图片）占据横向300像素。第二个（文字A）与第三个项目（文字B）以2：1的比例占据剩余的空间。项目之间的间隔为25像素。

在窄屏上，横向排版会很显得很拥挤，所以会使用竖向排版替代。

表格

示例表格
Row	Column A	Column B	Column C
Row 1	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
Row 2	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.

和HTML原版的表格相比，Bearweb网页模板提供了一个更清晰的风格，并且还提供了一个可横向滚动的容器来防止窄屏上很宽的表格导致页面排版溢出。

只要简单地使用一个<div class="tablewrap">来包裹住<table>就可以了：


<div class="tablewrap"><table>
	<caption>示例表格</caption>
	<thead>
		<tr>
			<th scope="col">Row</th>
			<th scope="col">Column A</th>
			<th scope="col">Column B</th>
			<th scope="col">Column C</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">Row 1</th>
			<td>The quick brown fox jumps over the lazy dog.</td>
			<td>...</td>
			<td>...</td>
		</tr><tr>
			<th scope="row">Row 2</th>
			<td>...</td>
			<td>...</td>
			<td>...</td>
		</tr>
	</tbody>
</table></div>

代码与代码块

行内代码使用灰色背景，例如：int i = 0。

要插入一段行内代码，只要将代码放在<code>元素内就可以了。例如：


<p>行内代码使用灰色背景，例如：<code>int i = 0</code>。</p>

代码块提供了一个可横向滚动的容器来防止窄屏上很宽的代码块导致页面排版溢出。


$include <stdio>
int main() {
	int i = 10086;
	printf("Hello int %d\n", i);
	return 0;
}

下面展示了这个例子的HTML：


<pre><code>
$include &lt;stdio&gt;
int main() {
	int i = 10086;
	printf("Hello int %d\n", i);
	return 0;
}
</code></pre>

记住转义代码中的HTML特殊字符：

&（和符合） --> &
<（小于符合） --> <
>（大于符合） --> >

图片

这样插入一张图片：


<img src="/example/bridge.thumb.jpg" alt="吊桥" />

其中：

src - 图片链接。
alt（可选） - 备用文字描述，在图片加载失败时显示以简明阐述图片内容。强烈推荐以提高用户可用性。

Bearweb网页模板提供了一个页面内图片浏览器。访客可以通过点击图片以放大图片、浏览高清版本（如果设置了的话）和图片的其它信息。

页面内图片浏览器

要使用页面内图片浏览器，使用<figure>元素将<img>元素包裹起来，并提供额外的信息。例如：


<figure>
	<img src="/example/bridge.thumb.jpg" title="Lift bridge" alt="Lift bridge" data-hd="/example/bridge.jpg" data-keywords="桥, 工程, 地标" data-description="湖边的一座老吊桥。" />
	<figcaption>一座老吊桥。</figcaption>
</figure>

where:

src - 图片（缩略图）链接。
alt（可选） - 备用文字描述，在图片加载失败时显示以简明阐述图片内容。强烈推荐以提高用户可用性。
title（可选） - 图片标题。
data-title（可选） - 如果没有title的话。
data-hd（可选） - 图片（高清大图）链接。
data-keywords（可选） - 以（英文）逗号分隔的关键字。
data-description（可选） - 图片简述。
figcaption（可选） - 在图片下方显示的小标题。强烈推荐以提高用户可用性。

页面内图片浏览器将显示：

src指向的图片。如果有定义data-hd的话，高清大图会在后台下载，并在下载完成后替代缩略图（src）。
关闭浏览器、打开缩略图（src）与高清大图（data-hd）的按钮。
标题，如果有指定title或data-title或alt的话。如果都没有，就会使用src。
简述，如果有指定data-description的话。
小标题，如果有指定figcaption的话。
分割渲染的关键字块，如果有指定的话。

横向列表

使用<div class="list_horizontal">来对物品进行网格样式横向排版。


<div class="list_horizontal">
	<img src="/example/river.thumb.jpg" />
	<div style="background: #FAA content-box;"><p>混合一些文字。</p></div>
	<img src="/example/rail.thumb.jpg" />
	<div style="background: #AFA content-box;"><p>混合更多的文字。</p></div>
	<img src="/example/highway.thumb.jpg" />
	<img src="/example/fighter.thumb.jpg" />
	<div style="background: #AAF content-box;"><p>加大力度混合文字。</p></div>
</div>

上面的代码可以生成下面的结果：

混合一些文字。

混合更多的文字。

加大力度混合文字。

在上面的例子中，每一行最高的项目将会决定该行的高度。如果要强制所有的项目一样高的话，可以用<div>来取代<img>，并设置<div>的background为图片。


<div class="list_horizontal">
	<div style="background: center/cover url(/example/river.thumb.jpg);"></div>
	<div style="background: #FAA content-box;"><p>混合一些文字。</p></div>
	<div style="background: center/cover url(/example/rail.thumb.jpg);"></div>
	<div style="background: #AFA content-box;"><p>混合更多的文字。</p></div>
	<div style="background: center/cover url(/example/highway.thumb.jpg);"></div>
	<div style="background: center/cover url(/example/fighter.thumb.jpg);"></div>
	<div style="background: #AAF content-box;"><p>加大力度混合文字。</p></div>
</div>

上面的代码可以生成下面的结果：

混合一些文字。

混合更多的文字。

加大力度混合文字。

Bearweb网页模板默认了渲染规则，即：窄屏1列，中屏2列，宽屏3列。你可以赋予列表ID并自定义样式规则：


<div class="list_horizontal" id="list_horizontal_customsize">
	<img src="/example/river.thumb.jpg" />
	<div style="background: #FAA content-box;"><p>混合一些文字。</p></div>
	<img src="/example/rail.thumb.jpg" />
	<div style="background: #AFA content-box;"><p>混合更多的文字。</p></div>
	<img src="/example/highway.thumb.jpg" />
	<img src="/example/fighter.thumb.jpg" />
	<div style="background: #AAF content-box;"><p>加大力度混合文字。</p></div>
</div>
<style>
	#list_horizontal_customsize { grid-template-columns: repeat(4, 1fr); }
	@media (min-width: 800px) {
		#list_horizontal_customsize { grid-template-columns: repeat(8, 1fr); }
	}
</style>

上面的代码可以生成下面的结果：

混合一些文字。

混合更多的文字。

加大力度混合文字。

纵向列表

使用<div class="list_verticla">来对物品进行报纸样式纵向排版。


<div class="list_vertical">
	<img src="/example/bridge.thumb.jpg" />
	<div style="background: #FAA content-box;"><span>混合一些文字。</span></div>
	<img src="/example/river.thumb.jpg" />
	<div style="background: #FAF content-box;"><span>混合另外一些文字。</span></div>
	<img src="/example/rail.thumb.jpg" />
	<div style="background: #AFA content-box;"><span>混合更多的文字。</span></div>
	<img src="/example/highway.thumb.jpg" />
	<img src="/example/fighter.thumb.jpg" />
	<div style="background: #AAF content-box;"><span>加大力度混合文字。</span></div>
</div>

上面的代码可以生成下面的结果：

混合一些文字。

混合另外一些文字。

混合更多的文字。

加大力度混合文字。

Bearweb网页模板默认了渲染规则，即：窄屏2列，中屏和宽屏3列。你可以赋予列表ID并自定义样式规则：


<div class="list_vertical" id="list_vertical_customsize">
	<img src="/example/bridge.thumb.jpg" />
	<div style="background: #FAA content-box;"><span>混合一些文字。</span></div>
	<img src="/example/river.thumb.jpg" />
	<div style="background: #FAF content-box;"><span>混合另外一些文字。</span></div>
	<img src="/example/rail.thumb.jpg" />
	<div style="background: #AFA content-box;"><span>混合更多的文字。</span></div>
	<img src="/example/highway.thumb.jpg" />
	<img src="/example/fighter.thumb.jpg" />
	<div style="background: #AAF content-box;"><span>加大力度混合文字。</span></div>
</div>
<style>
	#list_vertical_customsize { columns: 3; }
	@media (min-width: 800px) {
		#list_vertical_customsize { columns: 4; }
	}
</style>

上面的代码可以生成下面的结果：

混合一些文字。

混合另外一些文字。

混合更多的文字。

加大力度混合文字。

Bearweb页面风格

Index

顶级<div>

main_title

默认

tintimg

main_wide

overlay

模组

关键字

注释框

tintimg

sidebyside

表格

代码与代码块

图片

页面内图片浏览器

横向列表

纵向列表

顶级`<div>`

`main_title`

`tintimg`

`main_wide`

`overlay`

`tintimg`

`sidebyside`