CSS是構建網頁的基礎，它可以控制網頁的布局、樣式和交互效果。而左側菜單和右側內容是非常常用的布局，下面我們來學習如何使用CSS來實現這種布局。
首先，我們需要HTML代碼來創建這種布局。以下是一個基本的HTML代碼：
<div class="container"> <div class="left-menu"> <ul> <li>菜單1</li> <li>菜單2</li> <li>菜單3</li> </ul> </div> <div class="right-content"> <p>右側內容區域</p> </div> </div>
上面的HTML代碼描述了一個有兩個塊元素的
容器。左側是一個使用了
- 標簽的菜單，右側是一個使用了
標簽的內容區域。接下來，我們需要使用CSS來完成這個布局。
下面是CSS代碼的基本結構：
.container {
display: flex;
}
.left-menu {
width: 200px;
background-color: #f1f1f1;
}
.right-content {
flex: 1;
}首先，我們使用了display:flex;來將容器設置為Flex布局。這樣可以讓左側菜單和右側內容區域自動排列到同一行，并且可以根據需要進行伸縮。
接下來，我們為左側菜單定義了一個固定的寬度，并設置了它的背景色為#f1f1f1。這樣可以使左側菜單保持固定寬度，并與右側內容區域形成對比。
最后，我們為右側內容區域使用了flex: 1;來將其設為一個伸縮項，這樣它可以根據需要自動拉伸或縮小，以適應不同的屏幕大小。
通過以上的HTML和CSS代碼，我們可以輕松創建一個左側菜單、右側內容的基礎布局。我們可以根據需要對其進行進一步的優化和完善，以實現更加豐富、復雜的頁面布局效果。