Several methods for making web navigation bars and solutions to common problems (for newbies)

Unordered list is a very practical tag often used in html page layout. However, novices often have problems with horizontal layout when using unordered lists. The author provides here Several methods and Solutions to common problems when using unordered lists to create web page navigation bars. (Take css internal style as an example)

[Note: A classmate asked me how to make a web page before, but he only knows HTML. The ones used in this article are all CSS. Therefore, if you need to create navigation urgently and have no CSS technical foundation, add in the tag, and then write the css into it. That's it. A key code is required, which can be seen at the end. ]

1. Set the floating arrangement through the tag.

①How to use: Add the float:left; attribute to the css style.

②Common problem: When the web page is adjusted, the navigation changes at the same time, and the layout becomes confusing.

③Solution: ⑴A common method in the website study that the author has contacted is to absolutely position the li tag and then adjust the left size.

This method is more royal and is conducive to individual modifications. But for those with low web page requirements, it may be troublesome.

⑵Based on my own experiments, the author proposes a very simple method

You can set the format through the tag. The method is very simple. Just set the whith value of the div to be equal to or greater than the maximum length of the web page.

2. The second method :

①Use the inline attribute value of the display attribute of the tag to achieve peer arrangement. At the same time, the distance can be modified by adjusting the margin and padding values.

②The problem and solution are the same as the first one.

3. The third method :

① Completely use absolute positioning, suitable for special requirements on button position. (Because it is more troublesome, and the general navigation is one column, it is not recommended, but it is still easy to use for friends who need it)

②Generally there will be no typesetting problems

③Advantages: Stable, generally no problems with the layout, high degree of freedom. Disadvantages: Not as unified and regular as the previous one, relatively cumbersome, and troublesome in typesetting.

The above is all the content compiled by the author. There is no guarantee that it will be comprehensive and accurate, so bloggers who have better methods can leave a message. If there are any mistakes that need to be pointed out, I hope you can give me your advice. This article is intended to help bloggers who encounter difficulties in the early stages of learning like the author. Thank you all n(*≧▽≦*)n. The button code mentioned earlier:

a{ position: relative; overflow: hidden; background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 10px; margin: 4px; width: 80px; }