📌  相关文章
📜  如何使用 jQuery Mobile 制作基本标题标记？(1)

📅  最后修改于: 2023-12-03 15:08:21.414000             🧑  作者: Mango

如何使用 jQuery Mobile 制作基本标题标记？

1. 引入 jQuery Mobile 库

在 HTML 文件中，需要引入 jQuery 和 jQuery Mobile 库：

<head>
  <meta charset="UTF-8">
  <title>jQuery Mobile Demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
2. 创建标题标记

在 HTML 文件中添加标题标记，可以使用 h1 到 h6 标签。

<div data-role="page">
  <div data-role="header">
    <h1>My Heading</h1>
  </div>
  <div data-role="content">
    <p>My content here.</p>
  </div>
</div>
3. 渲染样式

jQuery Mobile 提供了许多预定义样式，你可以使用这些样式来渲染标题标记。

<!-- 使用默认样式 -->
<h1>Default Heading</h1>

<!-- 使用圆角样式 -->
<h1 class="ui-corner-all">Rounded Heading</h1>

<!-- 使用渐变样式 -->
<h1 class="ui-bar-b ui-corner-all">Gradient Heading</h1>

<!-- 使用图案样式 -->
<h1 class="ui-bar-b ui-corner-all ui-shadow">Patterned Heading</h1>
4. 自定义样式

你也可以自定义标题标记的样式，比如修改字体颜色、大小等。

/* 修改 h1 标签的字体颜色为红色 */
h1 {
  color: red;
}

/* 修改 h1 标签的字体大小为 36 像素 */
h1 {
  font-size: 36px;
}
总结

在 jQuery Mobile 中，可以使用 h1 到 h6 标签创建标题标记，并使用预定义样式或自定义样式来渲染标题标记。