Home > Web Front-end > HTML Tutorial > How to create a web sidebar layout using HTML and CSS

How to create a web sidebar layout using HTML and CSS

王林
Release: 2023-10-18 12:27:12
Original
1363 people have browsed it

How to create a web sidebar layout using HTML and CSS

HTML and CSS are the two most commonly used technologies in modern web design. They can be used to create a variety of different types of web page layouts, including sidebar layouts. In this article, we will introduce in detail how to use HTML and CSS to create a simple web page sidebar layout, with specific code examples.

First, create a basic HTML document structure. In the

tag, add a tag to reference an external CSS style sheet file. Then, add the following code in the tag as the basic structure of the sidebar layout:
<div class="container">
  <div class="sidebar">
    <ul class="sidebar-menu">
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
      <li><a href="#">菜单项4</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- 网页内容 -->
  </div>
</div>
Copy after login

In the above code, a container is used to wrap the sidebar ( sidebar) and content area (content). The sidebar uses an unordered list (ul) as a container for menu items.

Next, use CSS to define the style of the sidebar layout. Add the following code in the external CSS stylesheet file:

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #F2F2F2;
  padding: 20px;
}

.sidebar-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: 10px;
}

.content {
  flex-grow: 1;
  padding: 20px;
}
Copy after login

In the above code, the sidebar layout is implemented by using flexbox layout. The .container class is set to display: flex;, making it a flexible box. The

.sidebar class defines the style of the sidebar, including width (200px), background color (#F2F2F2), and padding (20px). The

.sidebar-menu class defines the style of the menu items, including removing the default list style (list-style-type: none;), and setting 0 padding and margins.

.sidebar-menu li class defines the style of each menu item, including the bottom margin (10px). The

.content class defines the style of the content area, uses flex-grow: 1; to fill the remaining space, and sets the padding (20px) .

This completes a simple web page sidebar layout. You can modify the menu items in the <li> tag as needed, or add other HTML elements to the content area.

To summarize, you can easily create a web page sidebar layout using HTML and CSS. By using flexbox and some basic style definitions, a simple yet effective layout can be achieved. I hope this article helps you understand and use HTML and CSS to create sidebar layouts!

(word count: 455)

The above is the detailed content of How to create a web sidebar layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template