用grid布局写一个demo
时间: 2023-04-07 13:00:59 浏览: 100
好的,我可以回答这个问题。以下是一个使用grid布局的简单示例:
HTML代码:
```
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
```
CSS代码:
```
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
```
这个示例将9个元素放在一个3x3的网格中,每个元素之间有10像素的间隔。您可以根据需要调整网格的大小和元素的样式。
相关问题
tkinter 布局Demo
这是一个使用`tkinter`布局的基本示例:
``` python
import tkinter as tk
root = tk.Tk()
# 创建几个Label和Entry控件
tk.Label(root, text="First Name").grid(row=0)
tk.Entry(root).grid(row=0, column=1)
tk.Label(root, text="Last Name").grid(row=1)
tk.Entry(root).grid(row=1, column=1)
# 创建一个Button控件并放置在底部
tk.Button(root, text="Submit").grid(row=2, column=1, pady=10)
# 设置窗口的标题和尺寸
root.title("Layout Demo")
root.geometry("300x150")
root.mainloop()
```
这个示例创建了一个简单的表单,包含“First Name”和“Last Name”标签以及相应的文本框,以及一个提交按钮。这里使用了`grid()`方法来排列控件,其中`row`和`column`参数指定了每个控件应该放置在哪个行和列上。
`pady=10`是指沿`y`轴方向添加`10`像素的内部填充,以便使按钮离表单底部有一定的间距。
最后,`title()`和`geometry()`方法设置窗口的标题和尺寸。然后调用`mainloop()`方法可以开始显示窗口和运行应用程序。
给个实现注册功能的的基于JavaFX 界面布局的界面设计DEMO
好的,以下是一个基于JavaFX的注册界面设计DEMO:
```java
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;
public class RegisterDemo extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Register");
// 创建一个GridPane布局
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
// 添加标题
Label sceneTitle = new Label("Register");
sceneTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(sceneTitle, 0, 0, 2, 1);
// 添加用户名标签和输入框
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
// 添加密码标签和输入框
Label password = new Label("Password:");
grid.add(password, 0, 2);
PasswordField passwordField = new PasswordField();
grid.add(passwordField, 1, 2);
// 添加确认密码标签和输入框
Label confirmPassword = new Label("Confirm Password:");
grid.add(confirmPassword, 0, 3);
PasswordField confirmPasswordField = new PasswordField();
grid.add(confirmPasswordField, 1, 3);
// 添加注册按钮
Button registerButton = new Button("Register");
grid.add(registerButton, 1, 4);
// 添加提示信息
Label message = new Label();
grid.add(message, 1, 5);
// 注册按钮事件处理
registerButton.setOnAction(event -> {
String userNameValue = userTextField.getText().trim();
String passwordValue = passwordField.getText().trim();
String confirmPasswordValue = confirmPasswordField.getText().trim();
// 判断用户名和密码是否为空
if (userNameValue.isEmpty() || passwordValue.isEmpty() || confirmPasswordValue.isEmpty()) {
message.setText("Please enter user name and password.");
} else if (!passwordValue.equals(confirmPasswordValue)) {
message.setText("Passwords do not match.");
} else {
// TODO: 将用户名和密码保存到数据库中
message.setText("Registration successful.");
}
});
// 创建场景并显示窗口
Scene scene = new Scene(grid, 400, 275);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
```
这个注册界面包含了用户名、密码和确认密码的输入框,以及一个注册按钮。当用户点击注册按钮时,程序会检查用户名和密码是否为空,并且检查密码和确认密码是否一致。如果一切正常,程序会将用户名和密码保存到数据库中,并显示注册成功的提示信息。