jquery mobile 个人网页代码
时间: 2023-08-02 08:05:15 浏览: 120
构建跨平台APP jQuery Mobile移动应用实战代码
下面是一个简单的 jQuery Mobile 个人网页的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人网页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的个人网页</h1>
</div>
<div data-role="content">
<h2>关于我</h2>
<p>我是一名前端工程师,擅长使用 HTML、CSS、JavaScript 开发响应式网页。</p>
<h2>我的项目</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
</ul>
<h2>我的博客</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#">博客1</a></li>
<li><a href="#">博客2</a></li>
<li><a href="#">博客3</a></li>
<li><a href="#">博客4</a></li>
</ul>
<h2>联系我</h2>
<p>电子邮箱:myemail@example.com</p>
<p>电话号码:1234567890</p>
</div>
<div data-role="footer">
<h4>© 2021 我的个人网页</h4>
</div>
</div>
</body>
</html>
```
这个示例使用了 jQuery Mobile 的组件和工具来美化网页,并采用了响应式设计技术,可以在不同大小的屏幕上自适应布局。其中,`data-role` 属性用于指定元素的角色,如页面、头部、内容区域、底部等;`data-inset` 属性用于指定列表是否将边框插入到内容中。您可以根据自己的需求进行修改和扩展。
阅读全文