、CSS和JS是現代網頁設計中必不可少的工具。它們都有自己的重要作用。接下來，我將通過這個例程來展示它們如何協同工作，達到最終的目標。

首先，我們需要一個div容器來展示內容。為此，我們可以使用下列代碼創建一個寬200像素，高100像素的div容器。

<div style="width: 200px; height: 100px;">
<p>這是一個div容器。</p>
<p>它的高是100像素，寬是200像素。</p>
</div>

在這個div容器里，我們可以添加CSS來修飾其外觀。我們可以添加一個圓角邊框，并把背景色設置為灰色。CSS代碼如下：

<style>
div {
border-radius: 5px;
border: 2px solid black;
background-color: gray;
}
</style>

現在我們需要給這個div容器添加一些交互性。我們可以通過添加JS代碼使div容器在鼠標懸浮時改變顏色。JS代碼如下：

<script>
var divElement = document.querySelector("div");
divElement.addEventListener("mouseover", function(){
this.style.backgroundColor = "red";
});
divElement.addEventListener("mouseout", function(){
this.style.backgroundColor = "gray";
});
</script>

這樣，我們就完成了這個簡單的例程。我們創建了一個div容器，通過CSS修飾了其外觀，通過JS使其具有交互性。

這個例程只是CSS和JS的冰山一角。當我們深入了解它們的用法后，我們會更加深入理解現代網頁設計的本質。