CSS 和 jQuery-UI 是兩種非常流行的前端技術，可以用來美化網頁并增強用戶交互。下面分別介紹它們的使用方法。

// CSS代碼段
/* 定義一個紅色的背景 */
body {
background-color: red;
}
/* 定義一個藍色的字體 */
h1 {
color: blue;
}

使用 CSS 可以大幅度地美化網頁，例如上面的代碼定義了一個紅色的背景和藍色的標題。但是當我們需要更多的交互效果時，jQuery-UI 就派上用場了。

// jQuery代碼段
$(function() {
// 折疊面板
$("#accordion").accordion();
// 添加對話框
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"確認": function() {
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
// 鼠標懸停效果
$("button").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "white");
});
});

上面的代碼實現了三種不同的交互效果。首先是折疊面板，可以讓用戶點擊標題展開或收起內容。接下來是對話框，當用戶點擊按鈕時會彈出一個對話框進行確認或取消操作。最后是鼠標懸停效果，當用戶將光標懸停在按鈕上時，按鈕背景顏色會變成黃色。

結合 CSS 和 jQuery-UI 可以實現更加豐富、美觀和交互的網頁效果，為用戶帶來更好的體驗。