How to use HTML and CSS to implement a fixed side navigation bar layout

The navigation bar is a very important part of the web page layout, and the fixed side navigation bar layout is a a common design pattern. This article will introduce how to use HTML and CSS to implement a simple fixed side navigation bar layout, and provide specific code examples.

1. HTML Structure

First, we need to create a basic structure in the HTML file. The following is a simple example:

In the above code, we created a container element named "container", which contains two sub-elements, namely "sidebar" and "main-content" . "sidebar" is used to place the navigation bar, and "main-content" is used to place the main content of the page.

2. CSS Style

Next, we need to use CSS to define the style of the container and navigation bar. The following is a simple style example:

.container { display: flex; } .sidebar { width: 20%; background-color: #f1f1f1; position: fixed; height: 100%; } .main-content { margin-left: 20%; padding: 20px; }

In the above code, we achieve the left and right arrangement of the navigation bar and main content by setting "container" to "flex" layout. Set the width of the "sidebar" to 20%, the background color to gray, and position it to fixed so that it is fixed to the left side of the screen. The left margin of "main-content" is set to 20%, and some padding is added to ensure the content is not obscured by the navigation bar.

3. Fill content

Next, we can fill in the actual content in the navigation bar and main content part according to our needs.

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

In the above code, we have created an unordered list in the "sidebar" element and added some navigation links in the list items. In the "main-content" element, we add a title and text to display the main content of the page.

4. Complete code

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

.container { display: flex; } .sidebar { width: 20%; background-color: #f1f1f1; position: fixed; height: 100%; } .main-content { margin-left: 20%; padding: 20px; }

Through the above code example, we successfully implemented a simple fixed side navigation bar layout. You can adjust the style and fill in the content according to your needs to achieve more complex and diverse effects. This is a basic example that I hope will be helpful to your learning and practice.

The above is the detailed content of How to implement a fixed side navigation bar layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!