1.原型参照
LayuiAmin Pro后台管理系统模板
2.系统性地设计你的CSS
主要设计了全局字体、按钮基础样式、按钮圆角、按钮悬停样式、各种配色主题样式、单选、复选框样式、标题字体、普通字体、输入框、导航菜单样式等。
/*全局字体样式*/
.root {
-fx-font-size: 14px;
}
/*按钮基础样式*/
.btn-basic {
/*文本对齐方式*/
-fx-text-alignment: center;
/*合适高度*/
-fx-pref-height: 38px;
/*内边距*/
-fx-padding: 0 18px;
/*无边框*/
-fx-border-style: none;
/*鼠标样式*/
-fx-cursor: pointer;
}
/*鼠标覆盖按钮效果*/
.btn-basic:hover {
/*粗体*/
-fx-font-weight: bold;
/*透明度*/
-fx-opacity: 0.8;
}
/*边框正?；《劝磁?/
.btn-radius-normal {
-fx-border-radius: 2px;
-fx-background-radius: 2px;
}
/*边框圆角按钮*/
.btn-radius-large {
-fx-border-radius: 50px;
-fx-background-radius: 50px;
}
/*默认主题*/
.default-theme {
-fx-background-color: #fff;
-fx-border-color: rgb(230, 230, 230);
-fx-text-fill: rgb(110, 110, 110);
}
/*深灰色主题*/
.dark-gray-theme {
-fx-background-color: rgb(58, 61, 73);
}
/*深色主题*/
.dark-theme {
-fx-background-color: rgb(40, 43, 51);
}
/*绿色主题*/
.green-theme {
-fx-background-color: #009688;
-fx-text-fill: #fff;
}
/*灰色主题*/
.gray-theme {
-fx-background-color: rgb(210, 210, 210);
-fx-text-fill: #fff;
}
/*警告色主题*/
.warning-theme {
-fx-background-color: rgb(254, 87, 34);
-fx-text-fill: #fff;
}
/*暖色主题*/
.warm-theme {
-fx-background-color: rgb(254, 184, 0);
-fx-text-fill: #fff;
}
/*蓝色主题*/
.blue-theme {
-fx-background-color: rgb(30, 158, 255);
-fx-text-fill: #fff;
}
/*内容盒子样式，设置一下圆角和内边距*/
.box {
-fx-border-color: rgb(162, 162, 162);
-fx-border-radius: 5px;
-fx-background-radius: 5px;
-fx-padding: 5 5 5 5;
}
/*输入框样式*/
.input-group {
/*对齐方式*/
-fx-text-alignment: left;
/*内容显示方式*/
-fx-content-display: inline-block;
/*合适高度*/
-fx-pref-height: 30px;
/*边框色*/
-fx-border-color: rgb(230, 230, 230);
/*提示文字颜色*/
-fx-prompt-text-fill: rgb(162, 162, 162);
/*输入文字颜色*/
-fx-text-fill: rgb(110, 110, 110);
/*边框圆角*/
-fx-border-radius: 2px;
-fx-background-radius: 2px;
/*内边距*/
-fx-padding: 5 5 5 5;
/*鼠标形状*/
-fx-cursor: pointer;
}
/*白色字体*/
.font-white {
-fx-text-fill: #fff;
}
/*灰色字体*/
.font-gray {
-fx-text-fill: rgb(110, 110, 110);
}
/*标题字体*/
.font-title {
-fx-font-size: 18px;
-fx-font-weight: bold;
}
/*复选框样式*/
.check-box .box {
-fx-background-color: #fff;
-fx-border-color: rgb(230, 230, 230);
-fx-border-radius: 3px;
}
/*复选框选中后标记的颜色*/
.check-box:selected .mark {
-fx-background-color: #fff;
}
/*复选框选中后背景色*/
.check-box:selected .box {
-fx-background-color: rgb(95, 184, 120);
}
/*单选按钮样式*/
.radio-button .radio {
-fx-background-color: #fff;
-fx-border-color: rgb(230, 230, 230);
-fx-border-radius: 100;
}
/*单选按钮中间点的颜色*/
.radio-button:selected .dot {
-fx-background-color: #fff;
}
/*单选按钮选中后背景色*/
.radio-button:selected .radio {
-fx-background-color: rgb(95, 184, 120);
}
/*表格内容居中显示*/
.table-view .table-column {
-fx-alignment: center;
}
/*左侧导航菜单按钮样式*/
.menu-btn {
-fx-pref-width: 300px;
-fx-pref-height: 35px;
-fx-background-color: rgb(40, 43, 51);
-fx-text-fill: rgb(191, 192, 194);
}
/*左侧导航菜单按钮鼠标悬停效果*/
.menu-btn:hover {
-fx-background-color: rgb(95, 184, 120);
-fx-text-fill: #fff;
}
/*风琴标题面板字体颜色*/
.titled-pane {
-fx-text-fill: rgb(174, 175, 180);
}
/*风琴标题面板背景色*/
.titled-pane > .title {
-fx-background-color: rgb(58, 61, 73);
-fx-padding: 30 10 10 10;
}
3.样式的使用
- fxml文件中使用
<Button text="默认按钮" styleClass="btn-basic,green-theme,btn-radius-normal"/>
- Java代码中使用
Button myButton = new Button("圆角按钮");
myButton.getStyleClass().add("border-button");
4.完整的使用了CSS的main.fxml布局文件
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<BorderPane
styleClass="green-theme"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.soft1841.book.controller.MainController">
<top>
<AnchorPane prefHeight="80.0">
<Label text="图书后台管理系统" styleClass="font-gray" onMouseClicked="#listDefault"
AnchorPane.topAnchor="20" AnchorPane.leftAnchor="10">
<effect>
<Reflection bottomOpacity="0.2" fraction="0.5" topOffset="-5.0"/>
</effect>
<font>
<Font name="System Bold" size="26.0"/>
</font>
</Label>
<ImageView fitWidth="45" fitHeight="45" AnchorPane.topAnchor="15" AnchorPane.rightAnchor="120">
<Image url="/img/me.png"/>
</ImageView>
<Button text="退出系统" styleClass="btn-radius-large,blue-theme"
AnchorPane.topAnchor="20" AnchorPane.rightAnchor="20"/>
</AnchorPane>
</top>
<center>
<SplitPane>
<AnchorPane styleClass="dark-gray-theme" minWidth="200">
<Accordion AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<panes>
<TitledPane alignment="TOP_LEFT" text="类别管理">
<VBox minHeight="100" spacing="10" styleClass="dark-theme">
<Button styleClass="menu-btn" text="图书类别" onAction="#listType"/>
<Button styleClass="menu-btn" text="分类统计"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="图书管理">
<VBox minHeight="100" spacing="10" styleClass="dark-theme">
<Button styleClass="menu-btn" text="图书信息" onAction="#listBook"/>
<Button styleClass="menu-btn" text="统计分析"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="用户管理">
<VBox minHeight="130" spacing="10" styleClass="dark-theme">
<Button styleClass="menu-btn" text="管理员信息"/>
<Button styleClass="menu-btn" text="读者信息"/>
<Button styleClass="menu-btn" text="统计分析"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="借阅管理">
<VBox minHeight="130" spacing="10" styleClass="dark-theme">
<Button styleClass="menu-btn" text="借阅查询"/>
<Button styleClass="menu-btn" text="统计分析"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="系统维护">
<VBox minHeight="130" spacing="10" styleClass="dark-theme">
<Button styleClass="menu-btn" text="系统初始化"/>
<Button styleClass="menu-btn" text="数据备份"/>
<Button styleClass="menu-btn" text="主题设置"/>
</VBox>
</TitledPane>
</panes>
</Accordion>
</AnchorPane>
<!--中间内容面板-->
<StackPane fx:id="mainContainer" styleClass="default-theme" minWidth="1060">
<padding>
<Insets top="10" left="30" bottom="5" right="10"/>
</padding>
</StackPane>
<padding>
<Insets top="10"/>
</padding>
</SplitPane>
</center>
</BorderPane>
5.效果
fxml+css实现效果
