May 29, 2021 Article blog
When we develop a web page, navigation bar development is one of the important links. I t can divide the content of the website into modules, making it easy for users to query and search. A good navigation bar makes the page more concise and enhances the user experience. So in this article, let's talk about how the CSS navigation bar is made.
To achieve the effect:
Realize the idea:
First we need to create a new sequenceless table, style it to no style, remove the marker dots, and more should be an inline property. Then style the text and set the mouse-slip property.
Specific code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作立体导航</title>
<style>
.nav{
width:800px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background:#ebebeb;
border-radius: 8px;
}
.nav a{
color:#6D6E6A;
text-decoration: none;
}
.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 18px;
list-style: none outside none;
}
.nav a:hover{
color: #A24937;
font-size: 20px;
}
</style>
</head>
<body>
<ul class="nav">
<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>
<li><a href="">VIP会员</a></li>
</ul>
</body>
</html>
That's all CSS Makes Navigation Bar. For more CSS content, follow w3cschool.com.
Related: How does CSS achieve mouse-slip text? /b10> How does CSS achieve photo blur?