如何使用HTML和CSS實作一個固定側邊導覽列佈局

導覽列是網頁佈局中非常重要的一部分，固定側邊導覽列佈局是一種常見的設計模式。本文將介紹如何使用HTML和CSS來實作一個簡單的固定側邊導覽列佈局，並提供具體的程式碼範例。

1. HTML結構

首先，我們需要在HTML檔案中建立一個基本的結構。以下是一個簡單的例子：

上面的程式碼中，我們建立了一個名為"container"的容器元素，裡麵包含了兩個子元素，分別是"sidebar"和"main-content" 。 "sidebar"用於放置導覽列，"main-content"用於放置頁面主要內容。

2. CSS樣式

接下來，我們需要使用CSS來定義容器和導覽列的樣式。以下是一個簡單的樣式範例：

.container {
    display: flex;
}

.sidebar {
    width: 20%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
}

.main-content {
    margin-left: 20%;
    padding: 20px;
}

在上面的程式碼中，我們透過設定"container"為"flex"佈局來實現導覽列和主要內容的左右排列。 "sidebar"的寬度設定為20%，背景色為灰色，將其定位為fixed，使其固定在螢幕的左側。 "main-content"的左邊距設定為20%，並增加了一些內邊距，以確保內容不會被導覽列遮擋。

3. 填入內容

接下來，我們可以根據需求在導覽列和主要內容部分填入實際的內容。

    

        
首页
        
关于我们
        
产品
        
联系我们
    



    
欢迎访问我们的网站
    
这里是主要内容区域，您可以在这里显示具体的页面内容。

在上面的程式碼中，我們在"sidebar"元素中建立了一個無序列表，並在清單項目中加入了一些導航連結。在"main-content"元素中，我們新增了一個標題和一段文字來展示頁面的主要內容。

4. 完整程式碼

    
    



    

        

            

                
首页
                
关于我们
                
产品
                
联系我们
            
        
        

            
欢迎访问我们的网站
            
这里是主要内容区域，您可以在这里显示具体的页面内容。
        
    

.container {
    display: flex;
}

.sidebar {
    width: 20%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
}

.main-content {
    margin-left: 20%;
    padding: 20px;
}

透過以上的程式碼範例，我們成功實作了一個簡單的固定側邊導覽列佈局。你可以根據自己的需求進行樣式的調整和內容的填充，以實現更複雜和多樣化的效果。這是一個基礎的範例，希望對你的學習和實踐有所幫助。

以上是如何使用HTML和CSS實作一個固定側邊導覽列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！