首页jquery mobile 个人网页代码

jquery mobile 个人网页代码

时间: 2023-08-02 10:05:15 浏览: 118

下面是一个简单的 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` 属性用于指定列表是否将边框插入到内容中。您可以根据自己的需求进行修改和扩展。

阅读全文