申明：我不是资料搬运工，我只是记录一些我实际遇到的问题以及解决方案
最终效果如下
包含的主要内容有
1、如何设置背景颜色、边框颜色以及字体颜色
2、多个文本如何对齐
3、如何布局出自己想要的效果
参考的资料
eclipse如何安装javafx
javafx中插入image view图像 如何调整图片大小，不是等比例放大
javafx Scene Builder如何设置按钮的背景颜色以及字体颜色
javafx scene如何设置多个文本垂直对齐
javafx Scene Builder设置textFiled的背景颜色、边框颜色以及字体颜色
附上实现上面效果的.fxml代码
<?xml version="1.0" encoding="UTF-8"?><?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?><AnchorPane prefHeight="766.0001220703125" prefWidth="747.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="application.MyCon"><!-- TODO Add Nodes --><children><Text layoutX="295.0" layoutY="28.0" scaleX="3.9095259458651115" scaleY="2.432368163379494" strokeType="OUTSIDE" strokeWidth="0.0" text="冬瓜山实时位移检测数据" /><ImageView fitHeight="429.560546875" fitWidth="405.9136962890625" layoutX="5.0" layoutY="59.0" pickOnBounds="true" preserveRatio="false"><image><Image url="file:/C:/Users/Administrator/Desktop/1.png" /></image></ImageView><Text layoutX="448.0" layoutY="63.0" scaleX="2.6227616802394635" scaleY="2.7552219919635594" strokeType="OUTSIDE" strokeWidth="0.0" text="检测范围"><font><Font size="8.0" /></font></Text><Button id="btn" contentDisplay="CENTER" layoutX="532.0" layoutY="51.0" mnemonicParsing="false" prefHeight="25.647308349609375" style=" -fx-background-color:red; " styleClass="null" text="0m - 5m" underline="false" wrapText="false"><textFill><Color blue="0.000" green="1.000" red="0.800" fx:id="x1" /></textFill></Button><Button id="btn" contentDisplay="CENTER" layoutX="422.0" layoutY="94.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="80.0" style=" -fx-background-color:red; " styleClass="null" text="0m - 5m" textFill="$x1" underline="false" wrapText="false" /><Button id="btn" contentDisplay="CENTER" layoutX="532.0" layoutY="94.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="80.0" style=" -fx-background-color:red; " styleClass="null" text="5m-10m" textFill="$x1" underline="false" wrapText="false" /><Button id="btn" contentDisplay="CENTER" layoutX="634.0" layoutY="94.0" mnemonicParsing="false" prefHeight="25.647308349609375" style=" -fx-background-color:red; " styleClass="null" text="10m-15m" textFill="$x1" underline="false" wrapText="false" /><Button id="btn" contentDisplay="CENTER" layoutX="422.0" layoutY="137.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="80.0" style=" -fx-background-color:red; " styleClass="null" text="15m-20m" textFill="$x1" underline="false" wrapText="false" /><Button id="btn" contentDisplay="CENTER" layoutX="633.0" layoutY="137.0" mnemonicParsing="false" prefHeight="25.647308349609375" style=" -fx-background-color:red; " styleClass="null" text="25m-30m" textFill="$x1" underline="false" wrapText="false" /><Button id="btn" contentDisplay="CENTER" layoutX="532.0" layoutY="137.0" mnemonicParsing="false" prefHeight="25.647308349609375" style=" -fx-background-color:red; " styleClass="null" text="20m-25m" textFill="$x1" underline="false" wrapText="false" /><Button id="btn" contentDisplay="CENTER" layoutX="422.0" layoutY="186.0" mnemonicParsing="false" prefHeight="25.647308349609375" style=" -fx-background-color:red; " styleClass="null" text="30m-35m" textFill="$x1" underline="false" wrapText="false" /><Text fill="#1000cc" layoutX="437.0" layoutY="246.0" scaleX="1.6446962859908134" scaleY="2.509306065733269" strokeType="OUTSIDE" strokeWidth="0.0" text="测点位移" textAlignment="CENTER" /><Text layoutX="435.0" layoutY="289.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" /><Text layoutX="435.0" layoutY="317.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="B0位移" /><Text layoutX="435.0" layoutY="347.0" scaleX="1.2006662747403487" scaleY="1.8191486927024192" strokeType="OUTSIDE" strokeWidth="0.0" text="C0位移" /><TextField layoutX="486.0" layoutY="276.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="274.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="486.0" layoutY="331.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="486.0" layoutY="306.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><Text layoutX="564.0" layoutY="293.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A1位移" /><Text layoutX="564.0" layoutY="322.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="B1位移" /><Text layoutX="564.0" layoutY="349.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="C1位移" /><Text layoutX="435.0" layoutY="408.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="E0位移" /><Text layoutX="435.0" layoutY="382.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D0位移" /><Text layoutX="564.0" layoutY="380.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" /><TextField layoutX="486.0" layoutY="365.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="339.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="306.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="486.0" layoutY="393.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="367.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><Text layoutX="564.0" layoutY="410.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" /><Text layoutX="435.0" layoutY="442.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" /><Text layoutX="564.0" layoutY="438.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" /><Text layoutX="564.0" layoutY="474.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" /><Text layoutX="435.0" layoutY="478.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" /><TextField layoutX="486.0" layoutY="429.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="486.0" layoutY="461.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="433.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="404.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="612.0" layoutY="461.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><Button layoutX="537.0" layoutY="608.0" mnemonicParsing="false" prefHeight="36.0" prefWidth="96.0" style="-fx-background-color:#3385ff; -fx-text-fill:white; " text="位移曲线" /><Circle fill="$x1" layoutX="50.0" layoutY="538.0" radius="13.75" stroke="#fff733" strokeType="INSIDE" /><Circle fill="#ff33c6" layoutX="50.0" layoutY="573.0" radius="13.75" stroke="#ff007a" strokeType="INSIDE" /><Circle fill="#33e7ff" layoutX="50.0" layoutY="612.0" radius="13.75" stroke="#00e0ff" strokeType="INSIDE" /><Circle fill="#ff3d00" layoutX="50.0" layoutY="651.0" radius="13.75" stroke="#cc0000" strokeType="INSIDE" /><Text layoutX="91.0" layoutY="540.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" /><Text layoutX="91.0" layoutY="658.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" /><Text layoutX="91.0" layoutY="575.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" /><Text layoutX="91.0" layoutY="616.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" /><TextField layoutX="159.0" layoutY="526.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="159.0" layoutY="561.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="159.0" layoutY="597.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /><TextField layoutX="159.0" layoutY="643.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green; -fx-border-color:yellow; -fx-text-fill:white; " text="0.02m" /></children>
</AnchorPane>