In the previous article "How to add borders or font amplification effects to text with css (detailed code explanation)", I introduced you how to use css text to add borders or font amplification effects. The following article will introduce to you how to use CSS to create a simple and beautiful navigation bar. Let’s see how to do it together.
When using css to create a page, you want to make a simple and beautiful navigation bar. How to do it? Let me share the method below.
Navigation bar link list
The navigation bar is basically a list of links, so use <ul></ul>
and <li>element. </li>
Code example
1 2 3 4 5 6 7 8 |
|
Code rendering
Note: Here we use href="#"
as Test the connection.
You can add the "active
" class and select the [php homepage] option.
Code example
1 |
|
Making a navigation bar
By<ul><li><a href=""> ;</a></li></ul>
format to implement the navigation bar.
Code example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
Code rendering
The above is the detailed content of Teach you step by step to use CSS to create a simple and beautiful navigation bar (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!