CSS是一種用于網頁布局的重要技術。它可以很方便地實現側拉菜單，這在現代網頁設計中非常常見。下面我們來看一下如何使用CSS實現側拉菜單。

HTML代碼：
<div class="container">
<div class="menu-icon"><i class="fa fa-bars"></i></div>
<div class="sidebar">
<ul>
<li><a href="#">菜單項1</a></li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
</ul>
</div>
<div class="content"><p>這里是網頁內容。</p></div>
</div>
CSS代碼：
.container {
position: relative;
width: 100%;
height: 100%;
}
.menu-icon {
position: fixed;
top: 20px;
left: 20px;
cursor: pointer;
z-index: 9999;
}
.sidebar {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #333;
padding: 20px;
transition: all 0.3s ease-in-out;
z-index: 999;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar ul li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.sidebar ul li a:hover {
background-color: #fff;
color: #333;
}
.content {
position: relative;
margin-left: 250px;
padding: 20px;
}
.menu-open .sidebar {
left: 0;
}
@media only screen and (max-width: 768px) {
.sidebar {
width: 100%;
height: 100%;
left: -100%;
padding-top: 100px;
transition: all 0.3s ease-in-out;
}
.menu-open .sidebar {
left: 0;
}
.menu-open .menu-icon {
position: fixed;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 9999;
}
}

以上是使用CSS實現側拉菜單的HTML和CSS代碼。我們可以看到，在HTML代碼中，我們先定義一個名為container的div，然后在其中包含三個div元素：menu-icon、sidebar和content。其中，menu-icon是用于顯示菜單的圖標，sidebar是側拉菜單，content是網頁內容。CSS代碼中，我們通過定義menu-icon和sidebar的位置和寬度，使得側拉菜單可以從頁面左邊滑入。在響應式設計中，我們使用了媒體查詢，當屏幕尺寸小于768px時，將側拉菜單設置為100%寬度并且上下填充全部，移動菜單按鈕也放在了右上角。