主程序

-package com.soft1841.oop.week1;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.net.URL;

public class ButtonApp extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
URL location = getClass().getResource("/fxml/button.fxml");
FXMLLoader fxmlLoader = new FXMLLoader(location);
Parent root = fxmlLoader.load();
Scene scene = new Scene(root,543,824);
scene.getStylesheets().add(ButtonApp.class.getResource("/css/style.css").toExternalForm());
primaryStage.setTitle("知乎");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

按钮

-package com.soft1841.oop.week1;

import javafx.scene.control.Button;

public class MyButton extends Button {
public MyButton(){
this.setPrefSize(436,44);
this.setStyle("-fx-background-color: rgb(0, 132, 255);-fx-border-radius: 10;-fx-text-fill: #FFFFFF");
}
}

标签

-package com.soft1841.oop.week1;

import javafx.scene.control.Label;

public class ZhihuLa1 extends Label {
public ZhihuLa1(){
this.setStyle("-fx-text-fill: #0084ff;-fx-font-size: 28");
}
}

-package com.soft1841.oop.week1;

import javafx.scene.control.Label;

public class ZhihuLa2 extends Label {
public ZhihuLa2(){
this.setStyle("-fx-text-fill: #8590a6;-fx-font-size: 14");
}
}

hxml

-<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.*?>

<?import com.soft1841.oop.week1.MyButton?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.control.Label?>
<?import com.soft1841.oop.week1.ZhihuLa1?>
<?import com.soft1841.oop.week1.ZhihuLa2?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.soft1841.oop.week1.ButtonController">

<ImageView AnchorPane.topAnchor="55"
           AnchorPane.leftAnchor="180">
    <Image url="/img/知乎.png"/>
</ImageView>
<ZhihuLa1 text="登录知乎，发现更大的世界"
          AnchorPane.leftAnchor="104"
          AnchorPane.topAnchor="170"/>

<MyButton text="登录"
          AnchorPane.leftAnchor="50"
          AnchorPane.topAnchor="435"/>
<ZhihuLa2 text="手机号或邮箱"
          AnchorPane.topAnchor="243"
          AnchorPane.leftAnchor="56"/>
<ZhihuLa2 text="密码"
          AnchorPane.topAnchor="330"
          AnchorPane.leftAnchor="56"/>
<ZhihuLa2 text="忘记密码"
          AnchorPane.rightAnchor="56"
          AnchorPane.topAnchor="370"/>
<ZhihuLa2 text="二维码登录 · 海外手机登录 · 社交账号登录 "
          AnchorPane.topAnchor="510"
          AnchorPane.leftAnchor="56"/>

</AnchorPane>

css

-.root{

-fx-background-color: rgb(255, 255, 255);

}