Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to fix the navigation bar in css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to fix the navigation bar in css.

In css, you can use the position attribute to pin the navigation bar; you just need to add the "position: fixed;" style to the navigation bar element for fixed positioning. Fixed positioning makes the element fixed in a certain position in the window, does not move even if the window scrolls, and does not affect other elements of the window.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The method of fixing the navigation bar by css:

1. HTML part:

Create a ul tag to make an unordered list, because you need the effect of a page jump, and insert the a tag in the li tag to write the navigation content into the a tag. Finally, create a div and set the height of the div to 1500px. When you slide the scroll bar, it is easy to observe the position of the navigation bar. The specific code is as follows

The news on the home page dynamically contacts us about us

2. CSS part:

The basic framework has been built, now beautify the page with CSS, float the unordered list on the left with float: left, arrange it on a line, adjust the spacing between navigation with Padding, set the mouse hover effect with hover pseudo-class selector, show red when the mouse passes through navigation, and yellow when navigation is activated.

The most important step is to pin the navigation bar at the top of the page. We use the attribute position: fixed to generate a fixed positioning element that is positioned relative to the browser window. Then set the example from the top to 0 (that is, top: 0), so that the navigation fixed at the top is done. The detailed code is as follows:

* {margin:0;padding: 0;} ul {list-style-type: none; overflow: hidden; background-color: # 333; position: fixed; top: 0; width: 100%;} li {float: left;} li a {display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none } li a:hover:not (.active) {background-color: red;} .active {background-color: yellow;}

Let's take a look at the actual effect:

When sliding the mouse:

When the navigation bar is pinned, the most critical step is to use the positioning position and set its property value to fixed, with the distance top at the top of the example set to 0.

Thank you for your reading, the above is the content of "how to fix the navigation bar in css". After the study of this article, I believe you have a deeper understanding of how to fix the navigation bar in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.