CSS webpage layout tutorial 9: Design website navigation with CSS-horizontal navigation website navigation is the most important element of a website, it is the most direct and convenient tool for users to access website content. Website navigation consists of horizontal navigation, vertical navigation, drop-down, and multi-level menu navigation.
As a portal website design, horizontal navigation is generally used for the main navigation. Because there are many texts at the bottom of the portal, and each channel has a different style, it is the best choice to design a unified style in a fixed area on the top without occupying too much space for navigation, most portals in China adopt this form.
Currently, vertical navigation is no longer popular in the design of portal websites. Vertical navigation tends to express product categories.
Drop-down navigation is mainly used for websites with complex functions. It is also common on some websites.
In general, the core goal of navigation is to design a simple and quick operation portal to help users quickly reach the corresponding content on the website. The design should be based on the needs of the website type and content to design a reasonable navigation form. Here we will use css to design the three commonly used navigation forms to see how css implements these styles.
Horizontal navigation
There is a big difference between creating navigation by using css layout and table layout. In addition to page layout, the most important part of a website is navigation, in this step, we should first create a simple and bright navigation system, and then complete the final navigation with the design effect step by step. Here we first come up with a preliminary design style on the top. navigation is a form of horizontal navigation. Before starting css navigation, let's first think about the traditional table-style navigation. If the table is just implemented in the form of navigation, You need to design a table. Navigation currently consists of seven columns. You need to design a table with one row and seven columns, insert the navigation text in each unit label, and center the text of each cell, let's take a look at the implementation code:
The Code shows that the width and height of the table are set, and the border margin is set to 0 to hide the table line, and the text alignment of the cell is centered, A simple navigation is implemented. The key point here is to design a data table similar to the navigation form to associate the navigation with each grid of data. Let's take a look at how to use css to design the same navigation system.
The core of DIV + CSS layout is to achieve the separation of performance and content. First, let's take a look at the coding methods of the content section:
