Home > Article > Web Front-end > Create first-level navigation with div+css
This article mainly shares how to make a simple navigation bar. It has a certain reference value, let’s take a look with the editor below
Today I will share how to make a simple navigation bar:
Step one: Introduce the css style sheet and create a new A layer with the id nav uses ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6, 3499910bf9dac5ae3c52d5ede7383485 tags to create the finished effect.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <p id="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> </ul> </p> </body> </html>
The second step is to set the CSS style:
1. Set the attributes of nav
#nav{ width: 500px; height: 50px; border: 1px solid red; }
The display effect is as follows:
##2. Clear the dot in front of the ff6d136ddc5fdfeffaf53ff6ee95f185 tag
#nav ul{ list-style: none; }
3. Set the properties of the 3499910bf9dac5ae3c52d5ede7383485 tag contained under ff6d136ddc5fdfeffaf53ff6ee95f185
#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; }
4 .Set the mouse over effect
#nav ul li a:hover{ background-color: #ABCDEF; }
Final effect:
Complete HTML code part :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <p id="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> </ul> </p> </body> </html>
Complete the CSS style code part:
*{ margin: 0; padding: 0; } #nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px; } #nav ul{ list-style: none; } #nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; } #nav ul li a:hover{ background-color: #ABCDEF; }
The above is the detailed content of Create first-level navigation with div+css. For more information, please follow other related articles on the PHP Chinese website!