CSS method to implement horizontal navigation and vertical navigation bar (code)-CSS Tutorial-php.cn

CSS method to implement horizontal navigation and vertical navigation bar (code)

不言

Release： 2018-08-21 10:53:43

Original

17597 people have browsed it

The content of this article is about the method (code) of implementing horizontal navigation and vertical navigation bar in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Vertical navigation

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}

a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>

Copy after login

Run result:

CSS method to implement horizontal navigation and vertical navigation bar (code)

##2.Horizontal navigation:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>

Copy after login

Run result :

CSS method to implement horizontal navigation and vertical navigation bar (code)

Note:

1. The display=block of the a tag makes the link a clickable area instead of text.

2. After specifying a link as a block element, you can set the width so that the width of each link looks the same.

Related recommendations:

div css navigation bar (full screen css navigation bar)_html/css_WEB-ITnose

CSS picture Navigation_html/css_WEB-ITnose

The above is the detailed content of CSS method to implement horizontal navigation and vertical navigation bar (code). For more information, please follow other related articles on the PHP Chinese website!