制作手机网页模板需要考虑到移动设备的屏幕尺寸和分辨率,以及用户在移动设备上浏览网页的习惯,以下是一个简单的手机网页模板示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手机网页模板</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f8f9fa; padding: 10px; text-align: center; } main { padding: 10px; } footer { background-color: #f8f9fa; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>欢迎来到我的手机网页</h1> </header> <main> <h2>主要内容</h2> <p>这是一些示例文本,您可以根据需要修改和添加内容。</p> </main> <footer> <p>版权所有 © 2023</p> </footer> </body> </html>
这个模板包含了一个简单的头部、主体和页脚,您可以根据需要修改和添加内容,在样式部分,使用了一些基本的CSS样式来设置页面布局和外观,请注意,为了适应移动设备的屏幕尺寸,在``标签中设置了视口属性。