DWZ JUI 是一套開源的 jQuery UI 插件集，提供了非常實用的UI控件和交互組件。使用DWZ JUI 能夠極大的提升我們開發(fā) Web 應(yīng)用的效率。

但是默認的 DWZ JUI 樣式并不夠美觀，因此我們可以借助 CSS 來優(yōu)化美化。下面介紹如何使用 CSS 來美化 DWZ JUI。

// 修改主題色
#header .nav-title { color: #fff; }
#header .nav #menu li.selected >ul.sub { background-color: #2E323B; }
// 修改彈出窗口樣式
.dlg .dialog-body { background-color: #f8f8f8; }
.dlg .dialog-button { background-color: #f8f8f8; border-top: 1px solid #ccc; }
.dlg .dialog-button a:hover { background-color: #e6e6e6; }
// 修改表格樣式
.table th, .table td {
text-align: center;
padding: 8px;
border: 1px solid #d7d7d7;
}
.table th {
background-color: #f7f7f7;
border-bottom: 1px solid #d7d7d7;
}
// 修改按鈕樣式
.btn {
display: inline-block;
margin-right: 5px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #fff;
}
.btn:hover, .btn:focus {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}

通過上述 CSS 修改，我們能夠非常便捷的實現(xiàn) DWZ JUI 界面的美化效果，提升用戶體驗與應(yīng)用品質(zhì)。