首页创建一个html页面，带搜索框以及图片，全部居中显示

创建一个html页面，带搜索框以及图片，全部居中显示

时间: 2023-08-08 22:13:20 浏览: 133

可以这样编写HTML和CSS代码： ```html <!DOCTYPE html> <html> <head> <title>搜索页面</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } form { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input[type="text"] { padding: 10px; width: 300px; border: none; border-radius: 5px; box-shadow: 0 0 5px gray; font-size: 16px; margin-right: 10px; } button[type="submit"] { padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; box-shadow: 0 0 5px gray; font-size: 16px; cursor: pointer; } img { max-width: 100%; height: auto; } </style> </head> <body> <form> <input type="text" placeholder="搜索"> <button type="submit">搜索</button> </form> <img src="https://picsum.photos/800/600"> </body> </html> ``` 这个代码会在页面中心显示一个搜索框和一个图片。`body`元素使用了flex布局，使得页面垂直和水平居中。`form`元素和`img`元素都使用了`align-items:center;`和`justify-content:center;`属性让它们在容器中居中显示。`input`和`button`元素使用了`box-shadow`属性添加了阴影效果，增加了美观度。`img`元素使用了`max-width:100%;`和`height:auto;`属性，使得图片按比例缩放并保持在容器内。

阅读全文