主页
博文

格式样式 v4（排版、元素、属性等）

08yt

1. 居中元素

居中任何元素（将使元素位于页面中心）。

如何使用： 将 center 类添加到任何元素。示例：

<p class="center">Bla bla bla....</p>
<div class="center">Bla bla bla....</div>

如果您想居中一个按钮（或任何其他内联元素），请先将其包装在 <div> 中。示例：

<div class="center">
  <a href="#" class="button">Button text</a>
</div>

2. 首字下沉

Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本。

如何使用：

<span class="dropcap">L</span>orem Ipsum is simply dummy....

3. 语法高亮

用于在语法高亮框中编写大量代码。 Igniel … …

如何使用：

<pre class="syntax-highlighter">
Parsed code goes here.
</pre>

4. 按钮

4.1. 填充（默认）

按钮

<a> 标签使用 button 类 <a> 标签使用 btn-fill 类

如何使用：

<a href="#" class="button">Button default</a>

或：

<a href="https://www.google.com" class="button">Button default</a>

或：

<a href="https://www.google.com" class="btn-fill">Button default</a>

4.2. 轮廓

按钮轮廓

<a> 标签使用 btn-outline 类

如何使用：

<a href="#" class="btn-outline">Button outline</a>

或：

<a href="https://www.google.com" class="btn-outline">Button outline</a>

5. 盒子

默认盒子。 Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本。

信息盒子。 Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本。

成功盒子。 Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本。

警告盒子。 Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本。

危险盒子。 Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本。

盒子如何使用

如何使用： （不同的类名会产生不同的结果）

<div class="box-default">Box default.</div>
<div class="box-info">Box info.</div>
<div class="box-success">Box success.</div>
<div class="box-warning">Box warning.</div>
<div class="box-danger">Box danger.</div>

6. 引用

6.1. 默认

社交媒体营销、社交媒体优化、面向初学者的博主教程。激发你的热情！#Nganggurpreneur

如何使用：

<blockquote>Text goes here.</blockquote>

6.2. 带作者

因为苦难之后确实有安逸。古兰经，开阔章：5

如何使用：

<blockquote class="with-author">
  <p>Text goes here.</p>
  <footer>Author's name</footer>
</blockquote>

7. 图片

7.1. 默认Blogger

图片根据Blogger编辑器中选择的大小显示。

带标题的图片在Blogger编辑器中的默认样式 带标题的图片在Blogger编辑器中的默认样式

如何使用： 只需使用Blogger默认功能插入图片。

7.2. 图形

带有 figcaption 的标准 figure 标签。图片将根据博客布局的宽度自动放大。

标准 figure HTML 标签 标准 figure HTML 标签

如何使用：

<figure>
  <img src="your-image-url.jpg" alt="ALT Text" />
  <figcaption>Caption</figcaption>
</figure>

8. 表格

8.1. 默认

编号 姓名 城市

1 Igniel 茂物 2 Rain 万隆 3 RedSky 雅加达 4 Queen 勿加泗 5 Bjita 丹格朗 6 Alphabetees 茂物

如何使用： 基本上，它使用的是标准表格代码。我为您写出来，以防您懒得打开 W3Schools。

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Igniel</td>
      <td>Sukabumi</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Rain</td>
      <td>Bandung</td>
    </tr>
    <!-- ...重复 <tr> 到 </tr> 之间的代码以创建更多行 -->
  </tbody>
</table>

8.2. 横向滚动

这对于列数较多的表格更好。

列 1 列 2 列 3 列 4 列 5 列 6 列 7 列 8 列 9 列 10

1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10

如何使用：

<div class="table-scroll">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <!-- ...重复 <tr> 到 </tr> 之间的代码以创建更多行 -->
    </tbody>
  </table>
</div>

9. 有序列表

是一种带编号的列表。

  1. 一一
  2. 二二二
  3. 三三三
  4. 四四四
  5. 五五五
  6. 六六六
  7. 七七七
  8. 八八八
  9. 九九九
  10. 十十十

10. 无序列表

是一种不带编号的列表。

  • 一一
  • 二二二
  • 三三三
  • 四四四
  • 五五五
  • 六六六
  • 七七七
  • 八八八
  • 九九九
  • 十十十

11. 嵌套列表

  • 一
    • 一一
      • 一一一
  • 二
  • 三
  • 一
    • 一一
      • 一一一
  • 二
  • 三
  • 一
    • 一一
      • 一一一
  • 二
  • 三

发表评论