近日，在我的web課程實驗中，我遇到了一道關于CSS樣式表的思考題，讓我對CSS的應用和靈活運用有了更深刻的理解。

/* 思考題 */
/* 將下面的HTML文檔的樣式改為左側菜單欄，右側內容實時變化 */
/* 要求：菜單欄和內容欄均為固定寬度，且高度隨內容變化，菜單欄效果為豎排列表 */
/* 鼠標劃過菜單項時，菜單項顏色會改變，而內容會實時更新 */
菜單項1
菜單項2
菜單項3
菜單項4
菜單項5
內容1
內容2
內容3
內容4
內容5

    思考了一會兒后，我決定采用CSS的flex布局來完成這個任務。我首先將wrapper設為flex布局，并將其子元素均設為可伸縮，然后給菜單項設置固定寬度，并將內容項用flex-grow設為1，以實現自適應寬度。接下來，我用樣式選擇器選中ul中的li元素，并設置鼠標懸浮時的背景色，以實現菜單項的選中效果。最后，我通過JS為每個菜單項添加了一個點擊事件，當點擊菜單項時，它所對應的內容就會實時更新。

/* CSS樣式表 */
.wrapper {
display: flex;
}
ul {
width: 200px;
border-right: 1px solid #ccc;
display: flex;
flex-direction: column;
}
li {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.content {
margin-left: 10px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
p {
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
}
li:hover {
background-color: #f4f4f4;
}
/* JS代碼 */
var items = document.querySelectorAll('li');
var contents = document.querySelectorAll('div.content p');
for (var i = 0; i< items.length; i++) {
items[i].addEventListener('click', function() {
for (var j = 0; j< contents.length; j++) {
contents[j].style.display = 'none';
}
var index = Array.from(items).indexOf(this);
contents[index].style.display = 'block';
});
}

    經過簡單的調試后，項目完成了。通過這個思考題，我深深地認識到了CSS樣式表的靈活運用，以及JavaScript在Web開發中的重要性。我相信，只有不斷地學習和思考，我們才能夠更好地應用Web技術，創造出更炫酷的效果。