首页写一段代码改变jQuery Mobileheader部分的颜色

写一段代码改变jQuery Mobileheader部分的颜色

时间: 2024-04-09 14:31:45 浏览: 101

要改变 jQuery Mobile 的 header 部分的颜色，您可以使用以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Header Color</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.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> /* 自定义样式 */ .custom-header { background-color: #ff0000; /* 设置背景颜色为红色 */ color: #fff; /* 设置文本颜色为白色 */ } </style> </head> <body> <div data-role="page"> <div data-role="header" data-theme="a" class="custom-header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content goes here.</p> </div> </div> </body> </html> ``` 上述代码中，我们首先引入了 jQuery Mobile 的 CSS 和 JavaScript 文件。然后，在 `<style>` 标签中，我们定义了一个名为 `custom-header` 的自定义类，其中设置了背景颜色为红色（`#ff0000`）和文本颜色为白色（`#fff`）。在 `<div data-role="header">` 标签中，我们添加了自定义类 `custom-header`，以应用我们定义的样式。您可以根据需要修改背景颜色和文本颜色的值。注意，这段代码使用了 jQuery Mobile 1.4.5 版本，如果您使用其他版本，请相应更改引入的文件链接。

阅读全文