首页iPhone网页的代码

iPhone网页的代码

时间: 2023-11-15 09:05:48 浏览: 82

以下是一个简单的HTML代码示例，可以用于创建iPhone网页： ```html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My iPhone Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } .card { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); margin: 10px; width: 200px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .card img { max-width: 100%; height: auto; margin-bottom: 10px; } .card h2 { font-size: 16px; margin-bottom: 5px; } .card p { font-size: 14px; text-align: center; margin-bottom: 0; } </style> </head> <body> <h1>Welcome to My iPhone Page</h1> <div class="container"> <div class="card"> <img src="https://via.placeholder.com/150x150" alt="App Icon"> <h2>My First App</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="card"> <img src="https://via.placeholder.com/150x150" alt="App Icon"> <h2>My Second App</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p> </div> <div class="card"> <img src="https://via.placeholder.com/150x150" alt="App Icon"> <h2>My Third App</h2> <p>At vero eos et accusamus et iusto odio dignissimos ducimus.</p> </div> </div> </body> </html> ``` 此代码创建了一个简单的iPhone网页，其中包含一个标题和三个应用程序卡片。它使用了Flexbox布局和一些基本的CSS样式来使网页看起来更好。

阅读全文