首页设计类似下图的界面。要求第1，3，4格的高度比为3:1:1，四个文本框中的文字中部居中对齐。

设计类似下图的界面。要求第1，3，4格的高度比为3:1:1，四个文本框中的文字中部居中对齐。

时间: 2024-05-25 11:15:31 浏览: 86

类似于QQ的程序界面设计

3星 · 编辑精心推荐

用C#开发设计的，类似于QQ的程序界面设计。仅供学习

由于没有给出具体的图片，以下为一个设计类似要求的界面的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Grid Layout Example</title> <style> .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); grid-gap: 10px; height: 600px; width: 800px; margin: auto; padding: 20px; border: 1px solid black; } .item1 { grid-column: 1 / span 2; grid-row: 1 / span 3; background-color: #f1c40f; text-align: center; display: flex; align-items: center; justify-content: center; } .item2 { grid-column: 3; grid-row: 1 / span 1; background-color: #3498db; text-align: center; display: flex; align-items: center; justify-content: center; } .item3 { grid-column: 3; grid-row: 2 / span 1; background-color: #27ae60; text-align: center; display: flex; align-items: center; justify-content: center; } .item4 { grid-column: 3; grid-row: 3 / span 1; background-color: #e74c3c; text-align: center; display: flex; align-items: center; justify-content: center; } .item5 { grid-column: 4; grid-row: 1 / span 5; background-color: #34495e; color: white; text-align: center; display: flex; align-items: center; justify-content: center; } h1, h2, h3, h4 { margin: 0; } </style> </head> <body> <div class="container"> <div class="item1"> <h1>Header 1</h1> </div> <div class="item2"> <h2>Header 2</h2> </div> <div class="item3"> <h3>Header 3</h3> </div> <div class="item4"> <h4>Header 4</h4> </div> <div class="item5"> <p>Footer</p> </div> </div> </body> </html> ``` 效果如下图所示： ![Grid Layout Example](https://i.imgur.com/LvF9fLW.png)

阅读全文