How to implement a fixed side navigation bar layout using HTML and CSS-HTML Tutorial-php.cn

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

PHPz

Release： 2023-10-28 08:57:27

Original

946 people have browsed it

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

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.

HTML Structure

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

<!DOCTYPE html>
<html>
<head>
    <title>固定侧边导航栏布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <!-- 导航栏内容 -->
        </div>
        <div class="main-content">
            <!-- 页面主要内容 -->
        </div>
    </div>
</body>
</html>

Copy after login

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.

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;
}

Copy after login

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.

Fill content

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

<div class="sidebar">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>

<div class="main-content">
    <h1>欢迎访问我们的网站</h1>
    <p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>

Copy after login

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.

Complete code

<!DOCTYPE html>
<html>
<head>
    <title>固定侧边导航栏布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="main-content">
            <h1>欢迎访问我们的网站</h1>
            <p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
        </div>
    </div>
</body>
</html>

Copy after login

.container {
    display: flex;
}

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

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

Copy after login

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!